先去echarts官网上下载echartshttps://github.com/ecomfe/echarts-for-weixin
放到项目中和app.json同级目录下
在Pages外声明
可直接粘
option 我提到请求中了
var chartLine
function initChart(canvas, width, height) {
chartLine = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chartLine);
// var option = {
// title: {
// // text: '计算机科学与技术',
// left: 'center'
// },
// color: ["#37A2DA"],
// legend: {
// data: ['2019本段人数', '2019积累人数'],
// top: 10,
// left: 'center',
// backgroundColor: '#dbdbdb',
// z: 100
// },
// grid: {
// left: 0, //折线图距离左边距
// right: '14%', //折线图距离右边距
// top: '20%', //折线图距离上边距
// bottom: '20%',
// containLabel: true
// },
// tooltip: {
// show: true,
// trigger: 'axis'
// },
// xAxis: {
// name: '年份',
// type: 'category',
// boundaryGap: false,
// data: [],
// axisTick: {
// alignWithLabel: false
// },
// axisLine: {
// lineStyle: {
// color: '#666666'
// }
// },
// //设置x轴的样式
// axisLabel: {
// //横坐标最后的标注颜色变深
// // interval: 0,
// show: true,
// textStyle: {
// color: '#000',
// fontSize: '14',
// }
// },
// show: true
// },
// yAxis: {
// name: '分数',
// x: 'center',
// type: 'category',
// splitLine: {
// lineStyle: {
// type: 'solid'
// }
// },
// //设置y轴字体样式
// axisLabel: {
// show: true,
// textStyle: {
// color: '#000',
// fontSize: '14',
// }
// },
// // show: true
// },
// series: [{
// name: '2019本段人数',
// type: 'line',
// smooth: true,
// data: []
// }, {
// name: '2019积累人数',
// type: 'line',
// smooth: true,
// data: []
// }]
// };
return chartLine;
}
在Pages里使用
以下代码可以直接粘贴，根据自己的业务需求在进行修改
加粗部分是关键部分
// 请求开始
wx.request({
url: urlList.urlList.majorUrl,
data: {
level: '本科',
name: options.name,
openid: wx.getStorageSync('openid'),
limit: 999
},
success(res) {
let arr = res.data.data
let score = [];
let year = [];
let hart = [];
arr.forEach(function (item, index) {
year.push(item.year)
score.push(item.score)
hart = (item.heat)
})
that.setData({
arr: arr,
})
var option = {
title: {
text: '省控线及过线人数趋势图',
subtext: '0表示当年数据缺失',
left: 'center'
},
color: ["#37A2DA", "#67E0E3"],
legend: {
data: ['省控线', '过线人数'],
bottom: 0,
left: 'center',
z: 100,
},
//设置canvas内部表格的内距
grid: {
x: 70,
y: 100,
x2: 70,
y2: 60,
borderWidth: 10
},
tooltip: {
trigger: 'axis',
show: true,
formatter: '{b0}\n{a}:{c}\n{a1}:{c1}'
},
xAxis: [{
type: 'category',
data: res.data.year,
axisTick: {
alignWithLabel: true,
show: false
},
axisPointer: {
show: true
}
}],
yAxis: {
type: 'value',
name: '分数',
},
series: [{
name: '省控线',
type: 'line',
data: res.data.score,
itemStyle: {
normal: {
color: 'skyblue',
borderColor: 'white', //拐点边框颜色
label: {
show: true
}
}
}
},
{
name: '过线人数',
type: 'line',
data: res.data.nums,
itemStyle: {
normal: {
color: '#f6d864',
borderColor: 'white', //拐点边框颜色
label: {
show: true
}
}
},
},
]
};
chartLine.setOption(option);
return chartLine
},
fail(err) {}
})
// 请求结束
在Pages外面声明
const getPixelRatio = () => {
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
}
var dpr = getPixelRatio()
