代码结构:
// 接口请求
getLineChartDataFun(scope){
......
getLineChartData({scope}).then(res => {
if (res.code === 200) {
......
this.draw();
} else {
this.$message.error(res.msg);
}
})
},
draw(){
//获取element,自己定义
this.insuranceChart = this.$echarts.init(document.getElementById("insuranceChart"));
// 配置
this.insuranceOption = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
//数据由接口获取
{ value: 1048, name: '北京' },
{ value: 735, name: '上海' },
{ value: 580, name: '杭州' },
{ value: 484, name: '广州' },
{ value: 300, name: '郑州' }
]
}
]
};
// 添加
this.insuranceChart.setOption(this.insuranceOption);
}