微信小程序Echarts动态使用及图表层级踩坑解决方案

背景

微信小程序是一款便捷的开发平台，而Echarts又是一款非常强大的数据可视化工具，将二者结合起来可以展现出更加生动、形象的数据图表。但是在实际的开发中，我们可能会遇到一些问题，例如动态使用Echarts和图表层级问题等。

动态使用Echarts

在小程序开发中，我们希望在不同的页面中使用不同的图表，并且数据也可以动态变化。这时候，我们就需要动态使用Echarts来展现数据。

首先，在小程序的.json文件中引入Echarts的资源：

{
  "usingComponents": {
    "ec-canvas": "./ec-canvas/ec-canvas"
  }
}

然后，在小程序的.js文件中，将变量传给页面：

var that = this;
that.setData({
  ec: {
    onInit: function (canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      chart.setOption(that.getOption());
      return chart;
    }
  }
});

最后，在小程序的.wxml文件中，在相应位置插入Echarts图表：

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

图表层级问题

在小程序中，我们可能需要在不同的页面中展现多个图表，但是每个图表的层级可能会相互影响，导致部分图表不能正常展现。

解决方案一：使用fixed定位

将每个图表使用fixed定位来解决层级问题。

.chart {
  position: fixed;
  height: {{chartHeight}}rpx;
  width: 100%;
  top: {{chartTop}}rpx;
  left: 0;
  z-index: {{zIndex}}; // 使用不同的z-index来调整层级
}

解决方案二：使用cover-view

将每个图表使用cover-view来解决层级问题。

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

示例说明

示例一

在一个销售数据的小程序中，我们希望在首页展现一个折线图，来展示系统的销售情况。同时，我们还希望用户可以通过日期选择器选择日期，并实时刷新折线图。这时，我们需要使用动态使用Echarts的方式来实现展示数据，同时需要注意图表层级问题。

示例二

在一个电商的小程序中，我们希望在商品详情页面展示图表来显示该类商品的销售情况。由于可能存在多个图表，我们需要使用图表层级问题的解决方案来防止图表之间的层级冲突。