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