本文介绍如何在mpvue框架下使用mpvue-echarts组件集成echarts绘制折线图。通过按需下载echarts核心库，结合mpvue-echarts封装组件，在Vue文件中配置canvas及数据初始化逻辑，实现小程序端的数据可视化展示。
mpvue小程序开发背景与组件选型
首次尝试使用mpvue框架开发小程序时，可以直接复用mpvue-shop项目（一个仿网易严选风格的小程序）。该项目结构清晰且覆盖了大部分常用功能，对于刚开始接触mpvue的开发者而言，是一个极佳的参考模板。
在图表组件的选择上，主要有以下几种方案：
第一种是echarts-for-weixin，这是官方推出的小程序版echarts。参考其官方介绍文档可知，该组件非常适合原生小程序开发，因为它支持echarts官方提供的所有配置项和API。然而，由于架构差异，它并不适用于mpvue项目。
第二种是wx-charts，这是一款由个人开发者编写的微信小程序图表插件。其优势在于体积小巧，仅30K，既可用于mpvue项目，也可用于原生小程序。它支持大多数图表类型的绘制，但配置灵活性较差。如果对UI定制要求不高，或者属于个人项目，这是一个不错的选择。
第三种方案是将mpvue-echarts与echarts结合使用。这是针对mpvue项目的最佳实践。mpvue-echarts是一个专门基于mpvue开发的echarts封装组件，配合echarts核心库，可以完整调用官方所有的图表绘制功能，从而在小程序中充分发挥echarts的能力。
mpvue-echarts集成与实现步骤
接下来详细介绍如何在mpvue项目中配合使用mpvue-echarts与echarts。
首先需要下载并安装相关依赖包。
npm install mpvue-echarts --saveecharts库可以从官网获取。鉴于小程序对代码包大小有严格限制，建议采用按需下载的方式，仅包含项目所需的图表功能模块，以减小体积。
在Vue文件中引入并使用该组件。
在模板部分，需要添加如下代码：
<mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="demo-canvas" />
在JavaScript逻辑部分，需要进行如下配置：
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);
}
},
}
};完成上述配置后，即可看到最终的图表渲染效果。
以上就是在mpvue中使用echarts绘制折线图的完整内容，希望能为各位的学习提供便利，也欢迎大家继续支持本站。