echars饼图点击时如何放大(高亮)?

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

image.png

阅读 4.1k
2 个回答

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

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

image.png
主要是这个控制:
image.png


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'
      }
    }
  ]
};

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏