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

最新推荐文章于 2023-02-09 21:14:40 发布

唐文军

最新推荐文章于 2023-02-09 21:14:40 发布

阅读量1.3w

点赞数 1

分类专栏： echarts图表文章标签： js jquery gulp

本文链接：https://blog.csdn.net/Ambitiouss/article/details/105583564

版权

echarts图表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

首先看效果:

看效果

未点击未高亮
在这里插入图片描述
点击高亮：
来啊看代码！

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...');
       });
    });
}