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

朱雀 2022-05-11 11:00 1837阅读 0赞

# 一、代码及页面演示 #

## 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，页面展示 ##

![70][]

# 二、代码分析 #

## 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  组合，组合的样子如下图所示：

![70 1][]

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)，颜色和名字。可以通过点击图例控制哪些系列不显示。比如在右边的这些图例中，一旦点了虚的图标，就可以在左边显示

![70 2][]

//l egend中type：

图例的类型。可选值：

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

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

可选：

*  'horizontal'
 *  'vertical'

data：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是[饼图][Link 1]，也可以是饼图单个数据的 `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)'  
      \}\]

[70]: /images/20220505/ea8f0dd6b9f440be9d6d48205f529a40.png
[70 1]: /images/20220505/3cd9edc011b948c3bae408e38fa54912.png
[70 2]: /images/20220505/f01bb4aa04f94988942760d74ad26fd2.png
[Link 1]: http://www.echartsjs.com/option.html#series-pie