uni-app引入echarts出现Bug

示例代码：

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
var graph = this.options;
myChart.hideLoading();

option = {  
    title: {  
        text: '标题',  
        top: 'bottom',  
        left: 'right'  
    },  
    tooltip: {},  
    animationDuration: 0,  
    animationEasingUpdate: 'quinticInOut',  
    series: [{  
        name: '标题',  
        type: 'graph',  
        layout: 'force',  
        force: {  
            initLayout: "circular",  
            repulsion: 150,  
            layoutAnimation: true  
        },  
        data: graph.nodes,  
        links: graph.links,  
        roam: true,  
        label: {  
            position: 'inside',  
            formatter: '{b}'  
        },  
    }, ],  
};

myChart.setOption(option);

myChart.on('click', function(params) {  
    console.log(params);  
});

操作步骤：

uniapp ×
vue √

预期结果：

uniapp √

实际结果：

Tell me why?

bug描述：

使用uniapp引入echarts

无法触发echarts中click事件的

如果脱离uniapp, 正常使用vue2或vue3去开发,引入echarts在移动端click事件是正常触发的

也就是说这是uniapp本身编译存在的问题! 我好不容易认真写一次代码,你们却把我伤的这么彻底, 焯!

zlyuanteng 1楼•11 天前

在 uni-app 项目中引入 ECharts 时，可能会遇到一些常见的问题或 Bug。以下是一些常见的解决方案和注意事项：

1. 引入 ECharts 的正确方式

在 uni-app 中引入 ECharts 时，建议使用 npm 安装 echarts，并在页面中引入。

npm install echarts --save

然后在页面中引入：

import * as echarts from 'echarts';

2. 使用 `canvas` 渲染图表

uni-app 中的 canvas 组件与微信小程序中的 canvas 类似，因此你可以使用 echarts 的 canvas 渲染方式。

<template>
  <view>
    <canvas canvas-id="myChart" id="myChart" style="width: 100%; height: 300px;"></canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('myChart'), null, {
        width: 300,
        height: 300
      });

      const option = {
        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);
    }
  }
};
</script>

3. 常见问题及解决方案

3.1. `canvas` 无法渲染图表

原因: uni-app 中的 canvas 组件与 echarts 的渲染方式可能不兼容。
解决方案: 使用 uni-app 提供的 canvas 组件，并确保 canvas-id 正确设置。

3.2. 图表显示不全或样式异常

原因: canvas 的宽高设置不正确，导致图表显示不全。
解决方案: 确保 canvas 的宽高设置正确，并且与 echarts 实例的宽高一致。

<canvas canvas-id="myChart" id="myChart" style="width: 300px; height: 300px;"></canvas>

3.3. 图表无法动态更新

原因: 数据更新后，图表没有重新渲染。
解决方案: 在数据更新后，手动调用 chart.setOption(option) 方法重新渲染图表。

this.option = newOption; // 更新数据
this.chart.setOption(this.option); // 重新渲染图表

3.4. 图表在滚动时出现异常

原因: canvas 组件在滚动时可能会出现问题。
解决方案: 将 canvas 放在 scroll-view 组件之外，或者使用 position: fixed 固定图表位置。

4. 使用 `uCharts` 替代方案

如果 ECharts 在 uni-app 中遇到难以解决的问题，可以考虑使用 uCharts，这是一个专门为 uni-app 设计的图表库，兼容性更好。

npm install @qiun/ucharts --save