uniapp echarts x轴 支持html标签

在 UniApp 中使用 ECharts，也可以通过自定义渲染函数来支持在 x 轴标签中使用 HTML 标签。以下是一个示例代码，展示如何在 UniApp 中使用 ECharts 并支持 x 轴标签中的 HTML 标签：

1. 在 template 中引入 ECharts 组件，并为其设置一个标识符（例如 chart）：

<template>
  <view class="echarts-container">
    <ec-canvas id="chart" canvas-id="chart" :ec="ec"></ec-canvas>
  </view>
</template>

2. 在 script 中引入 ECharts 库，并设置 x 轴标签数据和自定义渲染函数：

<script>
import * as echarts from '@/components/ec-canvas/echarts';

export default {
  data() {
    return {
      ec: {
        lazyLoad: true
      },
      xAxisData: ['<span style="color: red;">A</span>', '<span style="color: blue;">B</span>', '<span style="color: green;">C</span>']
    };
  },
  onReady() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        // 获取图表组件实例
        const chart = this.selectComponent('#chart');

        // 调用 setOption 方法配置图表
        chart.init((canvas, width, height, dpr) => {
          const myChart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr
          });

          // 自定义渲染函数
          const renderXAxisLabel = (params) => {
            const xAxisData = this.xAxisData;
            if (xAxisData.length) {
              const item = xAxisData[params.dataIndex];
              return item;
            }
            return '';
          };

          // 配置选项
          const option = {
            xAxis: {
              type: 'category',
              data: this.xAxisData,
              axisLabel: {
                interval: 0,
                formatter: renderXAxisLabel
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200, 150],
              type: 'bar'
            }]
          };

          // 使用配置项显示图表
          myChart.setOption(option);

          // 将图表实例保存在 data 中，方便后续操作
          this.chartInstance = myChart;

          // 返回 chart 实例，供外部使用
          return myChart;
        });
      });
    }
  }
};
</script>