一、echarts图表环形图如何展示一个数据,鼠标滑过展示另外一个数据
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter:function(params){
return (params.data.label + '<br>网站数量:' + params.data.num)
},
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎',label:'开发',num:30},
{value: 735, name: '直接访问',label:'运维',num:20},
{value: 580, name: '邮件营销',label:'后端',num:15},
{value: 484, name: '联盟广告',label:'前端',num:10},
{value: 300, name: '视频广告',label:'测试',num:55}
],
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine :{show:true}
}
} ,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
二、echart图表点击事件中,事件重复
// 解决点击事件调用n次的问题
let that = this;
let myChart= echarts.init(this.$refs.visitchart); --vue获取echart的id方法
// 1、清除画布
myChart.clear()
// 2、调用setOption
myChart.setOption(option)
///3、在渲染点击事件之前先清除点击事件
myChart.off('click')
// triggerEvent为true时,触发点击事件
myChart.on('click', function (params) {
// console.log(params)
if (params.value === '订单') {
console.log(params.value)
}
})
三、echarts中饼图或环形图的高亮效果(点击高亮/默认某一条高亮)
let that = this;
let myChart= echarts.init(this.$refs.visitchart); --vue获取echart的id方法
let chooseIndex = 0;
//默认第一条高亮
that.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});
that.myChart.off('click'); //取消echarts点击多次触发
that.myChart.on('click',function(e){
// console.log(e)
if(e.dataIndex != chooseIndex){
//没用选中的取消高亮
that.myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: chooseIndex});
}
//选中某一条高亮
chooseIndex = e.dataIndex;
that.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});
四、echarts柱状图如何点击高亮
1、针对多维数组的在柱状图
let that = this;
let color = ['#EE6666','#5470C6','#FAC800'];
let myChart= echarts.init(that.$refs.visitchart);
myChart.on('click',function(item){
that.options.series.map((item,index)=>{
let style = {
normal:{
color:color[index]
}
}
item.itemStyle = style;
})
that.options.series[item.seriesIndex].itemStyle.normal = 'purple'; --seriesIndex//单维数组的索引
that.options.series[item.componentIndex].itemStyle.normal = 'purple'; --componentIndex//多维数组的索引
myChart.setOption(that.options)
})