Integrating Echarts into UniApp Mini‑Programs: Vue2 and Vue3 Implementation Guide

Many developers encounter contradictions when trying to use Echarts in UniApp mini‑programs—choosing between Vue2 or Vue3, dealing with frequent installation errors, and handling disappearing views. This article gathers scattered solutions into a single, comprehensive guide.

Vue 2 + UniApp solution : the recommended library is echarts-for-wx , which was created specifically for mini‑program compatibility. The most reliable installation method is to download the ZIP source from https://github.com/yah0130/echarts-wx-uniapp , copy the uni-ec-canvas folder into a newly created components directory, and reference it in the project.

Template example:

<view>
  <uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec" ref="canvas"></uni-ec-canvas>
</view>

Component registration and imports:

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas';
import * as echarts from '@/components/uni-ec-canvas/echarts.js';
export default {
  components: { uniEcCanvas },
  ...
}

Core chart initialization (placed in methods )

initChart(canvas, width, height, canvasDpr) {
  let chart = echarts.init(canvas, null, { width, height, devicePixelRatio: canvasDpr });
  canvas.setChart(chart);
  const option = { /* full option object as shown in the source */ };
  chart.setOption(option);
  const dataAxis = chart.getOption().xAxis[0].data;
  const zoomSize = 6;
  chart.on('click', function (params) {
    chart.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, dataAxis.length - 1)]
    });
  });
  return chart;
},
mounted() {
  this.$refs.canvas.init(this.initChart);
}

The article enumerates four essential steps: (1) initialize the chart instance and bind it to the canvas, (2) define the option object (avoid naming it options ), (3) apply setOption , and (4) perform chart‑specific customizations such as event handling.

Common pitfalls are discussed, including missing option in the ec data object, container reference errors, and discrepancies between HBuilder preview and real‑device rendering, each accompanied by troubleshooting tips.

Vue 3 + UniApp solution : the article recommends the lime‑echart package (a PC‑style Echarts wrapper). After downloading the source from https://gitee.com/liangei/lime-echart , place the components folder into the project and copy the static assets into the project’s static directory.

Vue 3 template snippet:

<view>
  <LEchart class="echart" ref="chart" @finished="init"></LEchart>
</view>

Script‑setup example (key parts only):

import LEchart from '@/components/l-echart/l-echart.vue';
import { onMounted, reactive, ref } from 'vue';
const echarts = require('../../static/echarts.min');
let chart = ref();
const state = reactive({ option: {/* option object similar to Vue2 example */} });
onMounted(() => {
  chart.value.init(echarts, (c) => { c.setOption(state.option); });
});
const init = () => { console.log('render finished'); };

The guide concludes with a reminder that both approaches, when followed step‑by‑step, allow developers to render Echarts smoothly in UniApp mini‑programs without the usual headaches.