微信小程序中使用 ECharts 实战指南:一步一个坑走过来的

原创于 2025-12-09 10:24:34 发布 · 730 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #echarts #小程序

本文详细写了微信小程序如何使用echarts，列处理几条常见问题，如：不显示、没填满容器、双指缩放、滚动等问题，一不小心就会犯错，而且还不好解决，希望此文对你有帮助。

一、核心难点解析

环境适配与依赖管理

下载ec-canvas，将资源中的ec-canvas文件件复制到小程序中，并在JSON文件中声明自定义组件，注意要使用echarts.min.js，目录结构如下。
- 设备像素比处理：初始化时需传入devicePixelRatio参数以适配高清屏，但开发者工具模拟效果可能失真，需真机验证。
组件化开发的特殊性
- 生命周期钩子调用时机：如何在onShow钩子中要加时间延迟，否则无法获取正确的画布尺寸。
- 跨页面复用成本高：若多页使用，可通过app.json全局注册组件减少重复代码。
样式与布局陷阱
- 外层容器必设宽高：包裹<ec-canvas>的<view>标签必须明确设置宽度和高度，否则图表不显示。
- CSS优先级冲突：内联样式优先于外部样式表，调试时建议直接采用行内样式定位问题。

二、关键注意事项

性能优化策略
- 按需定制图表类型：访问官网在线筛选所需图表类型生成精简版ECharts，替换默认库文件降低包体积，定制地址。
兼容性保障措施
- 微信基础库版本校验：初始化前检查微信SDK版本是否≥1.9.91，低于此版本会导致API不可用。
- 触摸事件：echarts最新版不支持双手缩放功能，我也是查了很多资料才找到v5.2.2以下版本支持小程序缩放，这个很重要很重要很重要。
数据更新规范
- 避免直接修改data字段：更新数据时应新建对象赋值，防止响应式系统丢失依赖关系。
- 销毁冗余实例：页面卸载时调用dispose()释放资源，防止内存泄漏。

三、版本选型建议

方案	适用场景	优势	缺陷
官方完整版	功能复杂的企业级应用	全量图表支持	包体积较大
在线定制精简版	特定单一类图表需求	超小体积	缺失冷门图表类型

四、标准接入流程

准备阶段
- 下载专用组件库：从GitHub下载echarts-for-weixin项目，提取其中的ec-canvas文件夹至项目目录，一可以从我上面的资源部中下载。
- 配置组件路径：在目标页面的.json文件中添加"usingComponents": { "ec-canvas": "path/to/ec-canvas"}。
WXML结构

<view style="height: 400rpx;width: 100%;">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

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

JavaScript初始化

import * as echarts from "../ec-canvas/echarts.min";
let chart = null;
let ls1 = [];
let ls2 = [];
for(let index = 0; index < 200; index++) {
  ls1.push("09:" + index);
  ls2.push({ value: Math.random().toFixed(1) * 20 });
}
const getOptions = () => {
  let chartOption = {
    grid: {
      left: 35,
      right: 20,
      bottom: 27,
      top: 45,
    },
    tooltip: {
      trigger: "axis",
      // 防止超出容器
      confine: true,
      formatter: (params) => {
        let itemTool = params[0];
        let str = `${itemTool.name}\n${itemTool.marker}数量：${itemTool.data.value}`;
        return `${str}`;
      },
    },
    dataZoom: [
      {
        xAxisIndex: 0,
        type: "inside",
        startValue: 100,
        end: 100,
      },
    ],
    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        color: "#231815",
        fontSize: 11,
        // 强制显示第一个标签
        showMinLabel: true,
        // 确保显示最后一个标签
        showMaxLabel: true,
      },
    },
    yAxis: {
      show: true,
      name: "demo",
      nameTextStyle: {
        color: "#3D3A39",
        fontSize: 12,
      },
      axisLabel: {
        color: "#231815",
        fontSize: 11,
      },
      axisLine: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "demo",
        data: [],
        smooth: true,
        type: "line",
        emphasis: {
          disabled: true,
        },
      },
    ],
  };
  return chartOption;
};
Page({
  data: {
    ec: {
      onInit: function (canvas, width, height, dpr) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // new
        });
        canvas.setChart(chart);
        chart.setOption(getOptions());
        return chart;
      },
    },
  },
  onShow() {
    setTimeout(() => {
      let option = getOptions();
      option.xAxis.data = ls1;
      option.series[0].data = ls2;
      chart && chart.setOption(option);
    }, 400);
  },
});

⚠️ 注意事项

grid：刚开始没有设置top，结果查看元素是100%高度，echarts就是没有渲染完整容器
tooltip：刚开始点击提示框组件超出容器边缘就被截断了，设置confine: true可解决这个问题
dataZoom：设置type: "inside"坐标系范围内滚轮滚动，v5.2.2版本支持双手缩放，最新版本不支持
series：emphasis: { disabled: true }关闭高亮状态，不然会出现意想不到的效果，如果是两条折线，点击一条，另一条会隐藏，v5.3.0开始支持，低于这个版本不用设置

五、典型问题解决方案

图表空白无显示
- ✅ 检查外层<view>是否设置明确宽高
- ✅ 确认ec-config数据对象已正确传递
- ✅ 验证基础库版本是否符合要求
- ✅ echarts版本是否正确
移动端显示模糊
- ✅ 开启devicePixelRatio参数并进行真机测试
多图联动失效
- ✅ 确保每个图表独立的canvas-id