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

最新推荐文章于 2025-04-29 16:59:08 发布

lert707

最新推荐文章于 2025-04-29 16:59:08 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序 mpvue 文章标签： mpvue 微信小程序 echarts

本文链接：https://blog.csdn.net/lert707/article/details/82862755

本文介绍了如何在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: {