基于mpvue小程序使用echarts画折线图的方法示例

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

关于组件的选择：

1.echarts-for-weixin,官方echarts的小程序版本。使用参考：，如果你是原生开发小程序版本，这个组件非常适合你，开发过程中可使用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);

   }
  },
 }
};

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。