uni-app引入echarts tooltip formatter解析不了HTML问题

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app引入echarts tooltip formatter解析不了HTML问题

Image

1 回复

在uni-app中使用ECharts时,确实可能会遇到tooltipformatter无法解析HTML标签的问题。这通常是因为ECharts的默认设置或者uni-app的环境限制导致的。不过,你可以通过一些技巧来解决这个问题。

以下是一个示例,展示如何在uni-app中配置ECharts的tooltip以支持HTML解析:

首先,确保你已经正确安装并引入了ECharts库。在uni-app项目中,你可以通过npm安装ECharts:

npm install echarts --save

然后,在你的页面组件中引入ECharts并配置tooltip

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '../../static/echarts.min'; // 根据你的项目路径调整

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let tooltipStr = `<div style="color: #333;">${params[0].name}</div>`;
            params.forEach(param => {
              tooltipStr += `<div style="margin-top: 8px;">${param.seriesName}: <span style="color: ${param.color};">${param.value}</span></div>`;
            });
            return tooltipStr;
          },
          rich: {
            a: { color: '#900', lineHeight: 22, align: 'center' }
          }
        },
        // ... 其他配置项
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };

      chart.setOption(option);
      return chart;
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 500px;
}
</style>

在这个示例中,tooltip.formatter函数返回了一个包含HTML字符串的模板。注意,ECharts的formatter函数需要返回一个有效的HTML字符串,并且确保HTML标签被正确解析。此外,通过设置rich属性,你可以进一步自定义富文本样式。

请确保你的uni-app项目支持HTML解析,并且ECharts版本与你的项目兼容。如果仍然遇到问题,检查是否有其他样式或脚本影响了HTML的渲染。

回到顶部