同名数量统计（饼图带滚轮的图例）+详细注释

#同名数量统计

#饼图，右边有多项选择，可以有滑动的效果，点击会让其数据参与进来

<template>

<div id="main" :style="{width:'1000px',height:'700px'}"></div>

</template>

<script>

export default {

name: "demo12",

data() {

return {};

},

mounted() {

let Mychart = this.$echarts.init(document.getElementById("main"));

//传入五十个参数

var data = genData(50);

let option = {

title: {

text: "同名数量统计",

subtext: "纯属虚构",

x: "center"

},

tooltip: {

//数据触发

trigger: "item",

formatter: "{a} <br/>{b} : {c} ({d}%)"

},

legend: {

//图例类型为滑轮滚轮类型

//可滚动翻页的图例。当图例数量较多时可以使用。

//可进行配置

type: "scroll",

//图例列表的布局朝向。'horizontal','vertical'

orient: "vertical",

//图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

right: 10,

//图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

top: 20,

bottom: 20,

//传递参数为自定义方法的返回值

data: data.legendData,

//同样为方法返回值

selected: data.selected

},

series: [

{

//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

name: "姓名",

//饼状图

type: "pie",

//图表比例大小，比例越大图越大

radius: "70%",

//图表的位置，控制左右和上下

center: ["50%", "50%"],

//方法返回值

data: data.seriesData,

//图形样式。

itemStyle: {

//

emphasis: {

//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

shadowBlur: 10,

//阴影水平方向上的偏移距离。

shadowOffsetX: 0,

//阴影颜色。

//颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

shadowColor: "rgba(0, 0, 0, 0.5)"

}

}

}

]

};

Mychart.setOption(option);

//遍历传参（随机数随机传入，名字，数量都不一样）

function genData(count) {

//定义一个数组，传入很多数字对象

var nameList = [

'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'

];

//需要的数组设置为空，一会好把数据放进来

var legendData = [];

var seriesData = [];

var selected = {};

 

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;

}

return {

legendData: legendData,

seriesData: seriesData,

selected: selected

};

function makeWord(max, min) {

//ceil函数：返回大于或者等于指定表达式的最小整数，即向上取整

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>