echarts的饼图中间总数根据选中的legend改变

79 阅读1分钟

echarts的api太多,目前没有发现合适的api也有可能是我没找到 目前只找到通过事件解决 如果能通过配置解决更好, 如果有请不吝告知

// instance.current是chart实例
instance.current.on("legendselectchanged", function (params: any) {
        if (props.option?.series[0].type === 'pie') {
          const newOption = {...props.option}
          // 选中的legend
          const selectItem = Object.keys(params.selected).filter((i) => params.selected[i])
          const count = newOption?.series[0].data.reduce((pre, now) => {
            return (selectItem.indexOf(now.name) >= 0 ? now.value * 1 : 0) + pre
          }, 0)
          // 之前的formatter配置   formatter: `${count}\n\r${name}(${setting[0].unit})`,
          // 通过换行符拆分在通过新值拼接
          const c = newOption?.series[0].label.normal.formatter.split('\n')
          newOption.series[0].label.normal.formatter = count + '\n' + c[1]
          instance.current.setOption({...newOption})
        }
});

![J0C8S3{X{GPLU$2MA3_XG1.png

TLRKOGG@2DYTQ(ZK(XQQ0JW.png

![X502{2A~{@T6@S@3IQH`3I.png