基于mpvue小程序使用echarts画折线图

第一次使用mpvue框架来写小程序，项目开发直接搬用 mpvue-shop （一个仿网易严选的小程序开发项目）,项目结构清楚,实现了大部分功能，对于初次使用mpvue的小伙伴们来说，是一个很好的选择。

关于组件的选择：

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

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

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

mpvue-echarts配合echarts的使用

下载相关包

npm install mpvue-echarts --save

echarts的下载可到官网上下载，由于小程序中对文件大小有限制，建议通过勾选所需要的功能按需下载。

vue文件中使用

template:

<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" />

js:

import mpvueEcharts from 'mpvue-echarts';

let echarts = require("../../../static/lib/echarts.min.js"); //按需下载的压缩文件放在项目文件夹中
import charts from './charts'; //本地mixin文件,图表的所有配置

let chart = null;
export default {
  data() {
    return {
        echarts,
    };
  },
  async mounted() {
    let data = await post("/product/marketInfo",{
    });

    this.initCombineLineData(data.trendData);
    chart.setOption(this.trendChart);

  },
  mixins: [charts],
  methods: {
    initChart(canvas, width, height) {
      chart = echarts.init(canvas, null, {
          width: width,
          height: height
      });
      canvas.setChart(chart);
      chart.setOption(this.trendChart);
      return chart;

    }
  },
  components: {
    mpvueEcharts
  }
}

charts.js文件

export default {
  data() {
    return {
      //trend图
      trendChart: {
        grid: {
            left: 'left',
            top: 50,
            containLabel: true,
            tooltip: {
              triggerOn: 'none',
              showConent: true,
              position: function (pt) {
                return [pt[0], pt[1]-50];
              }
            }
        },
        tooltip: {
          trigger: "none",
          showContent: false,
        },
        textStyle: {
          color: "#999",
          fontSize: 24
        },
        label: {
          fontSize: 22
        },
        xAxis: {
          name: "年份",
          type: "category",
          nameGap:10, //坐标轴名称与轴线之间的距离。
          boundaryGap: true, //坐标轴两边留白策略
          nameTextStyle:{ //坐标轴名称样式
              color:"#999",
              fontSize: 12,
              align: 'left',
              verticalAlign: 'bottom'
          },
          axisLine: { //坐标轴轴线相关设置
            show: true, //是否显示坐标轴轴线。
            symbol: ['none','arrow'], //轴线两边的箭头默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
            symbolSize: [10,8],//轴线两边的箭头的大小
            symbolOffset: [0,5],//轴线两边的箭头的偏移
            lineStyle: {
              color: "#ece9e2",//线条颜色
            },
          },
          axisTick: { //坐标轴刻度相关设置
            show: false
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            interval: 10000,
            showMinLabel: true,
            showMaxLabel: true,
            fontSize: 12,
            padding: [6, 0, 0, 0]
          },
          axisPointer: {  //坐标轴指示器配置项
              value: '',
              snap: true,
              type: 'line', //指示器类型
              show: false, //竖线是否显示，作用于每一个点
              lineStyle: {
                  color: '#ece9e2',
                  width: 1
              },
              label: { //坐标轴指示器的文本标签
                  show: false,
              },
              handle: { //拖拽手柄，适用于触屏的环境
                  show: true,
                  color: 'none'
              }
          },
          data: []
        },
        yAxis: {
          type: "value",
          name: "价格(元)",
          nameGap: 0,
          nameTextStyle:{
              color:"#999",
              fontSize: 12,
              align: 'right',
              verticalAlign: 'top',
              padding: [0,0,10,60]
          },
          axisLine: {
            show: true,
            length: 100,
            symbol: ['none','arrow'],
            symbolSize: [10,8],
            symbolOffset: [0,5],
            lineStyle: {
              color: "#ece9e2",
            },

          },
          axisLabel: {
            fontSize: 12,
            formatter: value => {
              return value;
            }
          },
          axisTick: {
            show: false
          },
          splitLine:{
              lineStyle: {
                  //网络线设置（只作用于非类目铀）
                  show: true,
                  color: "#ece9e2",
                  width: 0.5,
                  type: "solid"
              },
          },
          splitNumber: 5,
          min: 0,
          max: 4000,
          interval: 1000
        },
        series: [
          {
            type: "line",
            smooth: false,
            color: "#ca3c2e",
            showSymbol: true,
            lineStyle: {
              width: 1.5,
              color: "#c5936e",
            },
            itemStyle: {
                normal:{
                    borderWidth: 0.5,
                    label:{
                        show: true, //显示值
                        borderWidth: 2,
                        color: '#c5936e',
                        fontSize: 12,
                    }
                }
            },
            data: []
          },
        ]
      },
    };
  },
  methods: {
      initCombineLineData(data) {
          this.trendChart.xAxis.axisPointer.value = data[data.length-1].date; //让指示器定位在最后一个折线点上
          for(let i=0;i<=data.length;i++){
              let yData = {
                  symbol: 'none'  //折线上不显示转折点
              };
              if(i== data.length-1){
                  yData.symbol = "emptyCircle", //最后一个显示转折点
                  yData.symbolSize = 6
              }
              yData.value = data[i].price;

              this.trendChart.xAxis.data.push(data[i].date);
              this.trendChart.series[0].data.push(yData);

          }
      },
  }
};

最终效果