echarts pieChart legend 图例文字颜色与图例一致

先看成图效果

首先是封装一个公用的函数

const renderPieEcharts = (
  ele: HTMLDivElement,
  data: Record<string, any>[],
  color: string[],
  titleText: string,
) => {
  const legendData = data.map((item, i) => ({
    name: item.name,
    textStyle: {
      color: color[i],
    },
  }))

  const myChart = echarts.init(ele)
  const option:ECOption = {
    title: {
      text: titleText,
      x: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
    },
    color,
    tooltip: {
      show: false,
      trigger: 'item',
    },
    legend: {
      data: legendData,
      itemWidth: 12,
      itemHeight: 8,
      textStyle: {
        color: 'auto',
        rich: {
          name: {
            fontSize: 12,
            fontWeight: 400,
            width: 50,
            padding: [0, 0, 0, 5],
            color: '#fff', // 图例文字颜色
            fontFamily: 'Source Han Sans CN-Regular',
          },
          value: {
            fontSize: 14,
            fontWeight: 500,
            align: 'right',
            fontFamily: 'Source Han Sans CN-Medium',
          },
        },
      },
      right: 'center',
      orient: 'vertical',
      bottom: '10',
      itemGap: 10,
      formatter: (name: string) => {
        const item = data.find((item) => item.name === name)
        return `{name|${name}}{value| ${item?.value}}`
      },
    },
    series: [
      {
        name: titleText,
        type: 'pie',
        center: ['50%', '40%'],
        radius: ['60%', '90%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

准备好测试数据

const inspectData = [
  { value: 35, name: '年检临期', color: '#1A85FF' },
  { value: 8, name: '超期未检', color: '#FFDA30' },
  { value: 12, name: '需复检', color: '#19D995' },
]

开始调用

onMounted(() => {
  renderPieEcharts(InspectRef.value as HTMLDivElement, inspectData, ['#1A85FF', '#FFDA30', '#19D995'], '年检')
}