共计 3377 个字符，预计需要花费 9 分钟才能阅读完成。
第一次使用 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);
}
},
}
};
最终效果
正文完
