在 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>
