echarts环形图数量最大的数据默认高亮显示

最新推荐文章于 2023-12-27 16:49:03 发布

Mirai_D

最新推荐文章于 2023-12-27 16:49:03 发布

阅读量555

点赞数 11

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_54480597/article/details/134919635

版权

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option = {
    tooltip: this.tooltip,
    legend: this.legend,
    series: this.series,
};
option.series[0].data = this.data;
myChart.setOption(option);
window.addEventListener('resize', () => {
    myChart.resize();
});
// 默认高亮展示数量最大的数据
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: this.total,
});
myChart.on('mouseover', (v) => {
  if (v.dataIndex != this.total) {
    // 高亮显示悬停的那块
    myChart.dispatchAction({
      type: 'hideTip',
      seriesIndex: 0,
      dataIndex: this.total,
    });
    // 当检测到鼠标悬停事件，取消所有选中高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: this.total,
    });
  }
});

// 检测鼠标移出后显示之前默认高亮的那块
myChart.on('mouseout', (v) => {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: this.total,
  });
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: this.total,
  });
});

series: [
  {
    type: 'pie',
    top: '15%',
    radius: ['40%', '80%'],
    avoidLabelOverlap: false,
    // label: {
    //   show: false,
    //   position: 'center',
    // },
    label: {
      fontSize: 15,
      lineHeight: 20,
      position: 'center',
      formatter: (params) => {
        return '';
      },
      emphasis: {
        formatter: (params) => {
          this.total = params.dataIndex;
          //切换非默认选项配置数据展示
          return (
            '{Proportiondefault|' +
            params.percent.toFixed(2) +
            '%}' +
            '\n{name|' +
            params.name +
            '}'
          );
        },
      },
      rich: {
        Proportion: {
          //切换的数字参数配置
          fontSize: 40, //显示样式大小
          backgroundColor: 'white', //覆盖数据的背景
        },
        name: {
          //切换的，name名字配置
          color: '#333',
          fontSize: 16,
          backgroundColor: 'white',
        },
        Proportiondefault: {
          fontSize: 22,
          backgroundColor: 'white',
        },
      },
    },

    emphasis: {
      label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold',
      },
    },
    labelLine: {
      show: false,
    },
    data: [],
  },
],