mpvue，微信小程序引入echarts图表组件

最新推荐文章于 2025-07-10 12:48:26 发布

原创

最新推荐文章于 2025-07-10 12:48:26 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mpvue #微信小程序 #echarts

本文介绍了如何在mpvue项目中引入并使用echarts图表组件，包括初始化mpvue项目，安装mpvue-echarts，以及在index.vue文件中绘制折线图。在手机微信上预览时需要注意vendor.js大小限制，可以通过npm run build压缩或者引入压缩后的echarts.min.js来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序引入echarts图表组件，折线图柱状图啥的

八月份微信小程序支持了npm，所以就可以直接用npm的方式引入图表组件。
参考的github链接为：https://github.com/lert707/mpvue-echarts

第一步，初始化一个mpvue项目

第二步，引入mpvue-echarts

npm install mpvue-echarts echarts --save

第三步，就可以直接在index.vue文件中使用了，就不一一举例了，下面是折线图的代码

<template>
  <div class="container">
    <div class="wrap">
      <mpvue-echarts :echarts="echarts" :onInit="initChart" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

export default {
  data () {
    return {
      echarts,
      resdata： []  //定义一个数组，用来动态传递图表数据
    }
  },
  components: {
    mpvueEcharts
  },
  methods: {
   // 这里只是做一个测试，方法里可以调用接口，获取到的数据赋值给resdata
    test() {
      const res = [8000, 12000, 10000, 16000, 14