微信小程序使用ECharts教程：按需打包、数据重绘及CoverView解决遮挡

ECharts在小程序中的引入与配置

在微信小程序中集成ECharts，首要步骤是获取库文件并引入项目。考虑到小程序上线时对包体积有严格限制，强烈建议通过官方提供的定制构建工具进行下载，仅包含所需模块以显著减小文件占比。若项目对体积要求不高，也可选择下载历史旧版本，其文件体积通常较小，可满足基础使用需求。

获取ECharts库的官方下载地址为：https://echarts.apache.org/zh/download.html

进行按需定制构建的官方地址为：https://echarts.apache.org/zh/builder.html

查看并下载历史旧版本的归档地址为：https://archive.apache.org/dist/echarts/

完成下载后，需在具体使用图表页面的JSON配置文件中，注册并引入对应的组件路径。

{
  "component": true,
  "usingComponents": {
    "ec-canvas": "../../../ec-canvas/ec-canvas"
  }
}

在对应的WXML和WXSS文件中，编写容器样式代码，确保图表渲染区域具备正确的尺寸与布局。

<view class="echarts1" >
     <view wx:if="{{canvasIsShow}}" class="container" style="width: 100%; height: 100%;">
           <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
     </view>
   </view>

最后在JS文件中引用ECharts模块，初始化图表实例并编写图例配置及数据绑定逻辑即可完成展示。

import * as echarts from '../../../ec-canvas/echarts'

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    barWidth: 20,
    grid:{
      x:40,    //图例左边距
      y:30,    //图例上边距
      x2:25,   //图例右边距
      y2:20,   //图例下边距
  },
    xAxis: {
      type: 'category',
      data: ['1','2','3','5','6','7','8'],  //x轴数据
      axisLabel: {
        interval: 0,
        textStyle: {
          show:true,
          fontSize: '9',
        },
    },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          show:true,
          fontSize: '10',
        },
    },
    },
    series: [
      //柱形图
      {
        data: [10,20,30,40,50,60,70],
        type: 'bar',
        color: 'rgb(0, 153, 255)',
      },
      //线型图
      {
        data: [15,25,35,45,55,65,75],
        type: 'line',
        color: 'rgb(255, 136, 0)',
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: 'black',
                fontSize: '9'
              }
            }
          }
        },
      }
    ]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    },
    canvasIsShow: true, //图表是否渲染
  },
})

图表数据动态刷新与重绘

关于图表图例的动态更新与重新渲染机制。

当数据发生变化需要刷新图表时，可直接利用wx:if="{{ }}"条件渲染指令。通过控制该属性的真假切换，强制销毁并重建图表组件，从而实现数据的重新渲染与刷新。

利用 wx:if="{{ }}" 进行条件渲染，即可实现重新刷新3、图例层级过高，可能导致部分样式被遮挡，如下图所示情况：

ECharts在小程序中的引入与配置

解决真机环境下的图层遮挡问题

尝试给被遮挡的标签添加position:fixed及z-index:9999样式后，在开发工具模拟器中显示正常，但在真机测试中该问题依然存在。将原本被遮挡的<view>标签替换为<cover-view>组件即可解决此层级遮挡问题，效果如下所示：

ECharts在小程序中的引入与配置

然而，在<cover-view>内部无法直接使用<input>或<picker>等交互型原生组件。此时可采用一种灵活变通的实现方式。

<picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
      <cover-view class="epidemic-header">
        <cover-view class="cover-input">
        {{casArray[casIndex]}}
        </cover-view>
      </cover-view>
    </picker>

通过上述方式，即可在<cover-view>中实现内容的动态修改与显示。

至此，关于微信小程序中ECharts的引入、数据刷新重绘及图层遮挡问题的解决方案介绍完毕。如需了解更多微信小程序ECharts相关内容，建议搜索本站往期文章或继续浏览后续教程，感谢支持。

微信小程序集成ECharts：定制引入、动态刷新与层级遮挡解决方案

ECharts在小程序中的引入与配置

图表数据动态刷新与重绘

解决真机环境下的图层遮挡问题

实用工具推荐