前端 - echars饼图点击时如何放大（高亮）？

Question

给饼图添加点击事件，点击对应区块放大，再次点击正常，这种交互如何实现呢？

Answer 1

可以通过设置select相关属性进行设置

Answer 2

根据回复中的需要给echart添加点击再事件事件就行了:

 var echartsObj = echarts.init(document.getElementById('chart-container'));
 echartsObj.setOption(option)
 echartsObj.on('click', function (params) {
      console.log(params.data);
    })

主要是这个控制:

option = {

  title: {
    text: '饼图纹理',
    textStyle: {
      color: '#235894'
    }
  },
  tooltip: {},
  series: [
    {
      name: 'pie',
      type: 'pie',
      radius: ['40%', '70%'],
      selectedMode: 'single',
      selectedOffset: 30,
      clockwise: true,
      label: {
        fontSize: 18,
        color: '#235894'
      },
      labelLine: {
        lineStyle: {
          color: '#235894'
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      itemStyle: {
        opacity: 0.7,
        borderWidth: 3,
        borderColor: '#235894'
      }
    }
  ]
};