2020-3-3 seo达人
Echarts饼图之数据展示
1、组件简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
官网链接：Echarts官网
W3C教程：W3C–Echarts教程
2、前端代码实现
首先，下载库，并引入到项目文件；
话不多说，直接上代码。
/* 封装的组件 HTML代码
<div class="echart-wrap-box">
<div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");
defaults: {
option: {
echartsObj: {},
tooltip: {//提示框浮层内容。
trigger: 'item',//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
formatter: "{b} : {c}万人"//提示框浮层内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
//如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色。
color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
legend: {//图例组件。
orient: 'vertical',//图例列表的布局朝向:垂直的
x: '80%',//图例组件离容器左侧的距离。
y: '60%',//图例组件离容器上侧的距离。
// width: 100,
textStyle: {},//图例文字的样式
// left: 'right',//图例组件离容器左侧的距离。
top: 'center',//图例组件离容器上侧的距离。
data: [],//右侧图例小组件信息数据
},
series: [{//饼图信息
name: '',
type: 'pie',//饼状图
radius: 140,//饼图的半径。
center: ['50%', '50%'],
minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
label: {//展示文本设置
normal: {
show: true,
formatter: "{b} : {c}万人",//视觉引导线内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
},
emphasis: { //文本样式
show: true, //展示
textStyle: { //文本样式
fontSize: '16',
fontWeight: '600',
}
}
},
labelLine: {//视觉引导线设置
normal: {
show: true
}
},
data: [],//饼状图信息数据,value(数量)和 name为默认数据；
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
},
onInit(event) {
vm = event.vmodel;
let data;//假设这里通过ajax获取到了需要展示的数据；
if (data.length == 0) {
return
}
data = data.sort((a, b) => { return b.number - a.number });//数据根据数量number从大到小排序
if (data.length > 7) {//从大到小的第八个新增粉丝数量的年份 开始统一归为 其他年份新增粉丝数量
let arr = data.slice(7);
let num = 0, rate = 0;
for (let i = 0; i < arr.length; i++) {//第七个之后累数量和比率
num += Number(arr[i].number);
rate += Number(arr[i].rate);
};
let objOtherYear = {
value: num,
name: '其他年份__nana新增粉丝数量',
rate: rate
};
let arr2 = data.slice(0, 7);
arr2.push(objOtherYear);
data = arr2;
data = data.sort((a, b) => { return b.number - a.number });//数据根据数量number从大到小排序
}
this.option.series[0].data = [];
this.option.legend.data = [];
for (let i = 0; i < data.length; i++) {
let seriesData = {
value: 0,
name: '',
rate: ''
};
seriesData.value = data[i].number;
seriesData.name = data[i].year;
seriesData.rate = data[i].rate;
this.option.series[0].data.push(seriesData);//给饼图赋值数据
let legendData = {
name: '',
icon: 'circle',//强制设置图形为:圆形
textStyle: {
color: '#000'
}
}
legendData.name = data[i].year;
this.option.legend.data.push(legendData);//给图例组件赋值数据
}
},
callFun: avalon.noop,//点击饼状图后的回调
isClickEchartsOUt: avalon.noop,//是否为饼图外的点击，父组件进行判断后传过来
onReady(event) {
this.echartsObj = echarts.init(event.target.children[0]);//初始化
this.echartsObj.setOption(this.option);
$(window).resize(() => {
this.echartsObj.resize();
});
let dataIndex;//保存选中扇区的序号
let _this = this;
this.$watch('isClickEchartsOUt', () => {
if (this.isClickEchartsOUt) {//如果不是饼状图扇区的点击，则取消选中；
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消选中指定的饼图扇形。
// 可选，系列 index，可以是一个数组指定多个系列
seriesIndex: 0,
// 可选，数据的 index
dataIndex: dataIndex,
})
}
});
// 处理点击饼图内部的事件
this.echartsObj.on('click', function (params) {
if (params.dataIndex != dataIndex) {//如果不是前一次选中的扇区，则取消选中
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消选中指定的饼图扇形。
// 可选，系列 index，可以是一个数组指定多个系列
seriesIndex: 0,
// 可选，数据的 index
dataIndex: dataIndex,
})
}
dataIndex = params.dataIndex;
_this.echartsObj.dispatchAction({
type: 'pieSelect',//选中指定的饼图扇形。
// 可选，系列 index，可以是一个数组指定多个系列
seriesIndex: 0,
// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
dataIndex: dataIndex,
})
vm.callFun(params);//回调，传点击获取到的数据给父组件
});
},
onDispose() {}
}