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

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

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

2、wx-charts,一个个人开发的微信小程序图表插件，体积只有30K,可用于mpvue项目和原生小程序项目,支持大部分图表绘制，缺点是可配置化不强，对于UI没有太大要求的可使用此组件，比较适合于个人项目开发。（相关文章：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）；

mpvue-echarts的github地址

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>

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