在 UniApp 中使用 ECharts，也可以通过自定义渲染函数来支持在 x 轴标签中使用 HTML 标签。以下是一个示例代码，展示如何在 UniApp 中使用 ECharts 并支持 x 轴标签中的 HTML 标签：
- 在
template中引入 ECharts 组件，并为其设置一个标识符（例如chart）：
<template><view class="echarts-container"><ec-canvas id="chart" canvas-id="chart" :ec="ec"></ec-canvas></view>
</template>
- 在
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>
