概要
vue+element+echarts:制作数据统计饼图
整体架构流程
1、安装环境:npm install
2、编译调试:npm run dev
3、部署打包:npm run build
主要代码
<div class="chart-pie" id="chartPie1">
mounted() {
//获取页面的echarts图表
this.chartPie1 = echarts.init(document.getElementById('chartPie1'));
},
this.formPie1(this.dataResult.hangup, 'dataPie1'); //挂断统计
this.chartPie1.setOption(this.dataPie1);
formPie1(dataPie, curveName) {
let pieWidth = this.chartPie1.getWidth() / 2;
let colors = ["#00C5D1", "#FFA572", "#D3D6DD"];
let i = 0;
this[curveName] = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
transitionDuration: 0, //过度默认0.4s效果导致模糊
},
legend: {
textStyle: {
fontFamily: 'Source Han Sans CN, Source Han Sans CN',
fontWeight: 400,
fontSize: 12,
color: '#6E87AB',
lineHeight: 20,
fontStyle: 'normal',
},
bottom: 2,
left: 'center',
data: ['正常挂断', '中途挂断', '无挂断状态'],
selectedMode: false,
},
backgroundColor: '#fff', // 设置背景色
series: [{
name: '挂断统计',
type: 'pie',
radius: ['40%', '55%'],
startAngle: 130, //饼图的起始角度配置
minAngle: 5, //饼图的最小角度配置
animationDuration: function(idx) {
// 越往后的数据时长越大
return idx * 600;
},
animationEasing: '挂断统计',
animationDuration: 800,
label: {
alignTo: 'edge',
formatter: '{name|{b}:{c}}\n{time|{d}%}',
minMargin: 50,
edgeDistance: 60,
lineHeight: 24,
rich: {
time: {
fontSize: 12,
color: '#999',
}
}
},
labelLine: {
length: 20,
maxSurfaceAngle: 20
},
labelLayout: function(params) {
const isLeft = params.labelRect.x < pieWidth;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft ?
params.labelRect.x :
params.labelRect.x + params.labelRect.width;
console.log("points:", points);
return {
labelLinePoints: points
};
},
data: dataPie,
itemStyle: {
normal: {
// 设置饼图的颜色
color: function() {
return colors[i++];
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
},
小结
通过echarts官网查询参数:
图参数配置