e-chart实现label文字渐变色

产品需要把 e-chart 折线图上的label文字颜色调整为面积图一致颜色，试了几个方法都没有解决，最后通过svg解决了，记录一下

解决思路：把e-chart 使用svg渲染，然后定义label时使用富文本，color使用单独定义的svg渐变颜色

实现效果如下：

 

主要代码如下，

// svg渐变色
<svg>
    <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="20%" stop-color="#12c2e9"></stop>
      <stop offset="100%" stop-color="#f64f59"></stop>
    </linearGradient>
  </svg>

// e-chart 使用svg渲染方式
 var chartDom = document.getElementById('main');
 var myChart = echarts.init(chartDom, '', { renderer: 'svg' });    

// lable 使用富文本

          label: {
            show: true,
            position: 'top',
            formatter(a, b) {
              return `{span|${a.data || 0}}{legend|}`;
            },
            color: 'url(#textGradient)',//渐变色
            rich: {
              span: {
                fontSize: 18,
                fontWeight: 'bold'
              },
              legend: {
                fontSize: 14
              }
            }
          },

　　完整代码如下

<template>
  <div style="width: 500px; height: 300px" id="main"></div>
  <svg>
    <linearGradient id="textGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="20%" stop-color="#12c2e9"></stop>
      <stop offset="100%" stop-color="#f64f59"></stop>
    </linearGradient>
  </svg>

</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, nextTick } from "vue";

onMounted(() => {
  nextTick(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, '', { renderer: 'svg' });
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          color:{
            type: 'linear',
            x: 0,
            y: 1,
            colorStops: [
              {
                offset: 0,
                color: '#12c2e9',
              },
              {
                offset: 1,
                color: '#f64f59',
              },
            ],
            global: false // 缺省为 false
          },
          label: {
            show: true,
            position: 'top',
            formatter(a, b) {
              return `{span|${a.data || 0}}{legend|}`;
            },
            color: 'url(#textGradient)',//渐变色
            rich: {
              span: {
                fontSize: 18,
                fontWeight: 'bold'
              },
              legend: {
                fontSize: 14
              }
            }
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    myChart.setOption(option);
  })
})
</script>
<style scoped>
</style>