全栈技术博客-文章详情

echart点击和高亮事件

最后更新时间：2023-10-04 17:19:13

echart

## 一、echarts图表环形图如何展示一个数据，鼠标滑过展示另外一个数据
```js
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次的问题
```js
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中饼图或环形图的高亮效果(点击高亮/默认某一条高亮)
```js
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柱状图如何点击高亮
```js
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)
})
```

echart点击和高亮事件

留言条数·0