mpvue框架做微信小程序，在小程序页面做折线图

系统管理员 2023-06-17 10:54 81阅读 0赞

使用mpvue做微信小程序项目时，需要做折线图，可以使用：

1.echarts-for-weixin,官方echarts的小程序版本。使用参考：[echarts-for-weixin介绍][echarts-for-weixin]，如果你是原生开发小程序版本，这个组件非常适合你，开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。

2、wx-charts,一个个人开发的微信小程序图表插件，体积只有30K,可用于mpvue项目和原生小程序项目,支持大部分图表绘制，缺点是可配置化不强，对于UI没有太大要求的可使用此组件，比较适合于个人项目开发。（相关文章：[https://www.cnblogs.com/mmykdbc/p/8927329.html][https_www.cnblogs.com_mmykdbc_p_8927329.html]）

3、mpvue-echarts与echarts结合。特别适合mpvue项目,mpvue-echarts是一个基于mpvue开发的echarts组件，echarts的加入可完全使用官方所有的图表绘制功能，让echarts在小程序当中得到全部应用。

搜索了一下，也就找到了以上三种方法；

第一种方法，我没有尝试；

--------------------

第三种方法可以实现效果；只是从后台请求的数据，我不知道怎么放到初始化方法里面；在初始化方法里面的数据都是写死的（相关文章地址：[https://www.cnblogs.com/wangyang0210/p/10671465.html][https_www.cnblogs.com_wangyang0210_p_10671465.html]）；

mpvue-echarts的github地址

[https://github.com/F-loat/mpvue-echarts][https_github.com_F-loat_mpvue-echarts]

需要安装两个插件：
     cnpm install mpvue-echarts                          
     cnpm install echarts

<template>
      <div class="container">
        <div class="wrap">
          <mpvue-echarts :echarts="echarts" :onInit="onInit" />
        </div>
      </div>
    </template>
    
    <script>
    import * as echarts from 'echarts/dist/echarts.simple.min'
    import mpvueEcharts from 'mpvue-echarts'
    function initChart (canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      var option = {
        backgroundColor: '#fff',
        color: ['#37A2DA', '#67E0E3'],
       
        legend: {
          data: ['A', 'B']
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          name: 'A',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 78, 40, 33]
        }, {
          name: 'B',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
        }]
      }
      chart.setOption(option)
      return chart
    }
    export default {
      data () {
        return {
          echarts,
          onInit: initChart
        }
      },
      components: {
        mpvueEcharts
      },
      onShareAppMessage () {}
    }
    </script>
    
    <style scoped>
    .wrap {
      width: 100%;
      height: 300px;
    }
    </style>

## 第三种方法写死数据倒是能显示了，关键是怎么向initChart 方法里面传递从后台请求的数据，能显示从后台请求的数据；有待解决！！！！！ ##

--------------------

目前我使用的是第二种：需要使用wxcharts.js文件；（百度一下自己下载吧；）

<template>
      <div class="bott">
          <div class="wrap">
              <span style="padding-left:15px;display:block;">使用量</span>
              <canvas v-if="!showImg" canvas-id="lineCanvas" disable-scroll="true" 
              class="canvas" bindtouchstart="touchHandler"></canvas> 
          </div>
        </div>
    </template>
    <script>
     var wxCharts = require('./wxcharts.js');
    
    export default {
      data () {
        return {
          coupon: null,
          times: [],
          serie: [] 
        }
      }, 
      onShow () { 
        this.couponLine() 
      },
      methods: { 
        // 优惠券折线图
        couponLine () {
          var _this = this
          var shop_ids = wx.getStorageSync('userInfo').shopId
          this.$couponLine({shopId: shop_ids}).then(res => {
            console.log(res)
            console.log(res.data)
            this.$nextTick(() => {
              if (res.data[0]) {
                res.data[0].data.forEach(element => {
                  _this.times.push(element.name)
                })
                res.data.forEach(item => {
                  let obj = {
                    type: 'line',
                    name: '',
                    smooth: true,
                    showSymbol: false,
                    data: []
                  }
                  obj.name = item.name
                  item.data.forEach(ite => {
                    obj.data.push(ite.num)
                  })
                  _this.serie.push(obj)
                })
                this.showImg = false
                this.initLine ()
              } else {
                this.showImg = true
              }
            })
          })
        },
        initLine () {
          var windowWidth = '', windowHeight='';    //定义宽高
        try {
          var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据
          windowWidth = res.windowWidth / 375 * 320;   //以设计图750为主进行比例算换
          windowHeight = res.windowWidth / 375 * 240    //以设计图750为主进行比例算换
        } catch (e) {
          console.error('getSystemInfoSync failed!');   //如果获取失败
        }
        var _this = this
        var lineChart = new wxCharts({     //定义一个wxCharts图表实例
          canvasId: 'lineCanvas',     //输入wxml中canvas的id
          type: 'line',       //图标展示的类型有:'line','pie','column','area','ring','radar'
          categories: _this.times,    //模拟的x轴横坐标参数   // categories: ['2018-6', '2018-6', '2018-6', '2018-6', '2018-6', '2018-6', '2018-6'],    //模拟的x轴横坐标参数
          animation: true,  //是否开启动画
          series: _this.serie,
          xAxis: {   //是否隐藏x轴分割线
            disableGrid: true,
          },
          yAxis: {      //y轴数据
            // title: '使用量',  //标题
            nameLocation: 'start',
            format: function (val) {  //返回数值
              return val.toFixed(2);
            },
            gridColor: '#D8D8D8',
          },
          width: windowWidth,  //图表展示内容宽度
          height: windowHeight,  //图表展示内容高度
          dataLabel: false,  //是否在图表上直接显示数据
          dataPointShape: false, //是否在图标上显示数据点标志
          extra: {
            lineStyle: 'curve'  //曲线
          },
        });
        } 
      }
    }
    </script>

没有太多花里胡哨的设置的话，可以使用第二种；

[echarts-for-weixin]: https://www.jianshu.com/p/b95f2d8eb107
[https_www.cnblogs.com_mmykdbc_p_8927329.html]: https://www.cnblogs.com/mmykdbc/p/8927329.html
[https_www.cnblogs.com_wangyang0210_p_10671465.html]: https://www.cnblogs.com/wangyang0210/p/10671465.html
[https_github.com_F-loat_mpvue-echarts]: https://github.com/F-loat/mpvue-echarts