实现功能,如图所示:
实现点击不同颜色获取到不同的数据
1.建立Echarts,指定需要的配置项,代码如下所示
this.options = {
title: {
text: '50%',
subtext: 'C',
left: '45%',
top: '30%',
position: 'center',
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#00eeff',
}, // 标题
subtextStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#00eeff',
}, // 副标题
},
color: ['rgb(33, 204, 151)', 'rgb(250, 202, 0)', 'rgb(210, 59, 95)'],
series: [{
type: 'pie',
radius: ['65%', '80%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center',
textStyle: {
fontSize: 12,
fontWeight: 'bold'
},
formatter: '{c}%\n{b}'
}
},
data: [{
value: 20,
name: 'A',
},
{
value: 50,
name: 'B'
} ,
{
value: 30,
name: 'C'
}
]
}],
};
2.基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('percents')); //通过Dom元素获取
3.使用刚指定的配置项和数据显示图表
myChart.setOption(this.options);
myChart.on('click',function (params) {
if(params.name=='绿色'){
window.location.href='/home/maintain/lifemanage'; //跳转到组件内对应页面
this.jump() //或调用方法进行路由跳转以及传参
}
});
jump(){
this.router.navigate(['/home/maintain/lifemanage'], { queryParams: {status:''}});
}