一、代码及页面演示

1，html代码

<!DOCTYPE html>
<html>

     selected: data.selected
    },
    series: [{
     name: '姓名',
     type: 'pie',
     radius: '55%',
     center: ['40%', '50%'],
     data: data.seriesData,
     itemStyle: {
      emphasis: {
       shadowBlur: 10,
       shadowOffsetX: 0,
       shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
     }
    }]
   };

   echarts.init(document.getElementById('main')).setOption(option);

    return {
     legendData: legendData,
     seriesData: seriesData,
     selected: selected
    };

    function makeWord(max, min) {
     var nameLen = Math.ceil(Math.random() * max + min);
     var name = [];
     for(var i = 0; i < nameLen; i++) {
      name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
     }
     return name.join('');
    }
   }
  </script>
</body>

</html>

2，页面展示

二、代码分析

1，js生成随机数

走进genData：

首先语法上用的是var而不是let，nameList定义了姓氏列表。进入循环：

for(var i = 0; i < 50; i++) {
     name = Math.random() > 0.65 ?
      makeWord(4, 1) + '·' + makeWord(3, 0) :
      makeWord(2, 1);
     legendData.push(name);
     seriesData.push({
      name: name,
      value: Math.round(Math.random() * 100000)
     });
     selected[name] = i < 6;
    }

name取值时，根据随机数，0.35的几率为两个makeWord 组合，组合的样子如下图所示：

makeWord实际上是根据传入的两个值，分别为max、min，得出一个名字的长度，为min + Math.random() * max，即 min到max + min等额随机取值，然后从nameList中随机push进去一个字。

所以：

name = Math.random() > 0.65 ?
makeWord(4, 1) + '·' + makeWord(3, 0) :
makeWord(2, 1);

这一段，随机生成了 1+4x + . + 0 + 3x 或 1 + 2x个字符的名字。

有了名字之后，下一步是加入同名数，同样是随机生成：

Math.round(Math.random() * 100000)

2，将数据加入饼图

老规矩，我们一行一行分析

（1）title

代码部分：

title: {
     text: '同名数量统计',
     subtext: '纯属虚构',
     x: 'center'
    },

title用来设置标题，text是标题文本，subtext是字标题文本，x在api中没有找到，但将center换成left可看出，它实际上是x轴的位置

（2）tooltip

//本坐标系特定的 tooltip 设定。放在外面是全局设置。trigger有两种类型，'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'，什么都不触发。

// formatter，提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

代码：
    tooltip: {
     trigger: 'item',
     formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

（3）legend

legend 图例组件；图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。比如在右边的这些图例中，一旦点了虚的图标，就可以在左边显示

//l egend中type：

图例的类型。可选值：

'plain'：普通图例。缺省就是普通图例。
'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

orient——图例列表的布局朝向：

可选：

'horizontal'
'vertical'

data：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。

selected：图例选中状态表。

代码：

    legend: {
     type: 'scroll',
     orient: 'vertical',
     right: 10,
     top: 20,
     bottom: 20,
     data: data.legendData,

selected: data.selected
},

（4）series

//series 表示一个系列

代码：
    series: [{
     name: '姓名',
     type: 'pie',
     radius: '55%',
     center: ['40%', '50%'],
     data: data.seriesData,
     itemStyle: {
      emphasis: {
       shadowBlur: 10,
       shadowOffsetX: 0,
       shadowColor: 'rgba(0, 0, 0, 0.5)'
      }]

echarts学习笔记2——饼图分析