echarts给饼图添加点击事件

最新推荐文章于 2024-05-28 15:57:14 发布

置顶白黑besos

最新推荐文章于 2024-05-28 15:57:14 发布

阅读量9.8k

点赞数 2

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/cxc199459/article/details/127083659

版权

vue使用echarts,给饼图添加点击事件

var valueData = [
      {value: 33,name: '诊所'},
    {value: 29,name: '汽车服务相关'},
    {value: 27, name: '洗衣店'},
    {value: 26,name: '中介机构'},
    {value: 22,name: '汽车维修'}
];
var nameData = ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修'];
var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];

let Option2 = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {d}% <br/> {c}"
    },
    legend: {
        // orient: 'vertical',
        icon: 'circle',
        bottom: 20,
        x: 'center',
        y: 'top',
        data: nameData,
        textStyle: {
            color: '#fff'
        }
        //data: ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修', '火车站', '人流指数', '日式简餐/快餐', 'ATM', '超市']
    },
    series: [{
        type: 'pie',
        // radius: ['20%', '40%'],
        center: ['50%', '50%'],
        left:70,
        right:70,
        color: colorData,
        data: valueData,
        labelLine: {
            normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            }
        },
        label: {
            normal: {
                formatter: '{c|{b}}\n{a|{d}}'+ '%',
                rich: {
                    b: {
                        fontSize: 12,
                        color: '#12EABE',
                        align: 'left',
                        padding: 4
                    },
                    d: {
                        
                        fontSize: 12,
                        align: 'left',
                        padding: 2
                    },
                    c: {
                        color: '#fff',
                        fontSize: 12,
                        align: 'left',
                        padding: 2
                    }
                }
            }
        }
    }]
}
var dom1 = document.getElementById("Box2");
var myChart1 = echarts.init(dom1);
let number = 0 //声明一个变量稍后接扇区的dataIndex 
myChart1.on('click', function(param) { //添加点击事件
    console.log(param );
    myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
    if (param.dataIndex !== number) { // 当鼠标点击的时候 消除上一个扇区的高亮
        myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
    }
    number = param.dataIndex //接住当前扇区的dataIndex
});
myChart1.setOption(Option2)
myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是默认第一条数据高亮