echarts 饼状图 扇形选中事件发多次请求 pieselectchangedhe

jQuery我就不多说了,
echarts也是非常受欢迎,最近有用到,我这个例子里对饼图的单圈操作还是很全面的。

首先看效果:

看效果

未点击未高亮
echarts 饼状图 扇形选中事件发多次请求 pieselectchangedhe_第1张图片
点击高亮:echarts 饼状图 扇形选中事件发多次请求 pieselectchangedhe_第2张图片
来啊 看代码!

function PieTest () {
	this.pie();
}

PieTest.prototype.pie = function () {
	let _this = this;
    let oldAgePie = echarts.init(document.getElementById('oldAgePie'));
    
     // 清空当前实例,会移除实例中所有的组件和图表
    oldAgePie.clear();

	 // (eventName: string, handler?: Function)
    // 可选,可以传入需要解绑的处理函数,不传的话解绑所有该类型的事件函数。  多次请求的问题就在这里!!!!!!!@!!
    oldAgePie.off('pieselectchanged'); 
    oldAgePie.setOption({
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} :  {d}% ({c}个)',
        },
        legend: {
            bottom: 10,
            left: 'center',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        },
        series: [{
            name: '',
            type: 'pie',
            radius: [0,'70%'],
            hoverAnimation: false, // 禁用鼠标滑过
            selectedMode: 'single', // 选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single','multiple',分别表示单选还是多选。
            selectedOffset: 10, // 选中扇区的偏移距离。
            center: ['50%', '50%'],
            // silent: true, // 设置这个饼图不响应鼠标点击事件
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' },
            ],
            itemStyle: {
                borderColor: 'white',
                borderWidth: 0.6,
                emphasis: {
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    borderWidth: 0
                }
            },
            labelLine: {
                normal: {
                    length: 20 // 改变标示线的长度
                }
            },
            label: {
                normal: {
                    formatter: '{b}:{d}%({c}个)',
                    borderWidth: 20,
                    borderRadius: 4,
                    textStyle: {
                        color: '#000000', // 改变标示文字的颜色
                        fontWeight: 900,
                    }
                }
            }
        }]
    });

	 // 饼状图点击事件
	// 因为我要在点击高亮或者取消高亮的时候进行发请求操作
   oldAgePie.on('pieselectchanged', function(params) {
        params.selected[params.name] == true ? _this.keyValOne = params.name  :  _this.keyValOne = '';
        console.log('dosomething...');
       });
    });
}

拷贝完记得点赞吖

你可能感兴趣的:(JavaScript,echarts,jQuery)