小程序mpvue图片绘制水印_基于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:

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);

}

},

}

};

最终效果