2022.11.11

1.echarts饼图鼠标点击选中后长高亮

//默认第一条高亮
that.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});

that.myChart.off('click');  //取消echarts点击多次触发
that.myChart.on('click',function(e){
    // console.log(e)
  
    if(e.dataIndex != chooseIndex){
        //没有选中的取消高亮
        that.myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: chooseIndex});
    }
    //选中某一条高亮
    chooseIndex = e.dataIndex;
    that.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});

或者

//点击后高亮显示悬停的那块
myChart.on('click', function(e) {
    //当检测到鼠标悬停事件，取消默认选中高亮
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: [0,1,2,3,4,5,6]
    });
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
    });
});

2.echarts中legend的rich在textStyle,legend的formatter参数为name中,其中不支持html标签

3.echarts中的tooltip的formatter参数为params,其中支持html标签

4.echarts中的label的formatter参数为params,在label的formatter中的无法使用html标签,使用rich赋样式

5.echarts中通过在series.data中添加数据的方式来为实现环形图间断的方式时,图例legend垂直展示无效,可以给图例设置data实现垂直展示

this.current.options.series[0].data.forEach(ele => {
  data.push(ele, {
    value: 2,
    show: false,
    name: '',
    itemStyle: {
      normal: {
        color: 'transparent'
      }
    }
  })
})
if (this.current.options.legend.length === 1) {
  this.current.options.legend[0].data = data.map(item => {
    if (item.name !== '') {
      return item.name
    }
  })
}

6.echarts中环形图label标签可以通过padding[0,-xxx]的方式实现标签在标签线上

series: [
  {
    type: 'pie',
    name: ele.compDetail.boxInnerNameContent,
    label: {
      show: !!ele.compDetail.dataLabelIfShow,
      color: '#ffffff',
      position: 'outside',
      padding: [0, -80], // 文字块的内边距
      formatter: function(params) {
        if (params.name) {
          if (ele.compDetail.dataLabelShowType === 1) {
            return `${params.name}\n\n{b|${params.value}} {a|(${params.percent.toFixed(0)}%)}`
          } else if (ele.compDetail.dataLabelShowType === 2) {
            return `${params.name}\n\n{a|(${params.percent.toFixed(0)}%)}`
          } else {
            return `${params.name}\n\n{b|${params.value}}`
          }
        }
      },
      rich: {
        a: {
          fontSize: ele.compDetail.dataLabelPercentageText
        },
        b: {
          fontSize: ele.compDetail.dataLabelOriginText
        }
      }
    },
    labelLine: {},
    itemStyle: {},
    data: this.seriesData
  }
]