echarts 自定义、覆盖legend点击事件,禁用legend默认的点击行为

有一个需求场景,使用echarts时想要自定义legend的点击事件,但是不要legend的默认点击事件——就是点击会隐藏和显示对应的饼图

查阅文档和手册之后,发现没有可以直接使用的方法

那么换个思路,在默认事件触发之后再把取消选中的legend选中回来就可以啦

依赖以下下几个配置:

1. legendselectchanged

myChart.on('legendselectchanged', function (params) {
     
    // ...
});

监听legend点击改变的事件,可以实现自定义事件,但是不能覆盖默认的选中和取消选中的事件

2. selected

option = {
     
	tooltip: {
     
	    selected: {
     
			// ...
		},
	    // ...
	},
	//...
}

可以设置初始选中项,这里不会直接使用

3. setOption

myChart.setOption({
     
	legend:{
     
		selected:{
     
			//...
		}
})

动态改变配置,到这里就很清晰了,将 legendselectchanged 中取消选中的legend动态设置回来

4. animation

option = {
     
    animation: false,
	//...
}

如果对动画没要求,关闭动画,效果会更好

完整html代码


<html>

<head>
    <meta charset="utf-8">
    <title>ECharts 实例title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
head>

<body>
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
      
            animation: false, // 取消动画
            tooltip: {
      
                trigger: 'item',
                formatter: '{a} 
{b}: {c} ({d}%)'
}, legend: { orient: 'vertical', left: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 335, name: '直接访问'}, { value: 310, name: '邮件营销'}, { value: 234, name: '联盟广告'}, { value: 135, name: '视频广告'}, { value: 1548, name: '搜索引擎'} ] } ] }; myChart.setOption(option); // 关键代码 myChart.on('legendselectchanged', function (params) { myChart.setOption({ legend:{ selected:{ [params.name]: true}} }) console.log('点击了', params.name); // do something });
script> body> html>

你可能感兴趣的:(echarts,javascript,数据可视化,javascript)