小程序使用echarts 踩坑大全 tooltip v-if隐藏图表错位 滑动图表不跟随等

309 阅读1分钟

[本文已参与「新人创作礼」活动,一起开启掘金创作之路。] 

1、小程序不支持tooltip 解决方法

 tooltip: {
        trigger: 'axis',
        animation: false,
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: 'red'
            }
        },
        formatter: function(params) {
          let tip = `${params[0].name}\n`;
          for (let i = 0; i < params.length; i++) {
            tip += `{marker${params[i].seriesIndex}at0|} ${params[i].seriesName}: ${params[i].value}\n`;
          }
          return tip;
        }
    },

2、v-if隐藏图表错位问题 要把v-if换成 hidden="{{canvasBox}}" canvasBox为Boolean类型

3、滑动图表不跟随 force-use-old-canvas="true"

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}" force-use-old-canvas="true"></ec-canvas>

4、echarts层级问题 我的解决方式是先把图表隐藏收起来,看的时候再点击放开显示

image.png