本文实现了一个微信小程序从后端获取数据,并渲染到echarts折线图上展示的例子。
一、引入echarts
首先,echarts怎样下载和导入开发者工具,可以看这位大佬的博客:博客
二、代码
废话不多说,直接上代码
1、wxml
<view class="container">
<ec-canvas style="width: 100%; height: 300px;" id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ec}}"></ec-canvas>
</view>
2、wxss
略(嘿嘿)
3、js
import * as echarts from '../../components/echarts/echarts.min'
const app = getApp()
var myGrade = 0;
var gradeRank = 0;
let chart = null; //注意这里,一定要设置为let变量
Page({
data: {
ec: {
onInit: initChart
}
},
onLoad() {
let _this = this;
if (app.globalData.token == '') {
if (!wx.getStorageSync('token')) {
wx.showToast({
title: '前端token不存在',
icon: 'none',
duration: 2000
});
return false;
} else {
app.formGet('/getGradeRanking?token=' + wx.getStorageSync('token'))
.then(res => {
if (res.code == 0) {
myGrade = res.data.myGrade;
gradeRank = res.data.gradeRank;
updateEchartData(myGrade, 100-gradeRank);
} else {
wx.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
return false;
}
});
}
}
}
});
function initChart(canvas, width, height, dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
//标题
title: {
text: '您的积分已超过全国' + myGrade + '%的用户',
left: 'center'
},
grid: {
//与绝对定位相似,top,left,right,bottom 设定是根据上级盒子宽高来计算
containLabel: true,
top: "15%",
left: "20%",
right: "20%",
bottom: "15%"
},
xAxis: {
type: 'category',
data: ['我的积分', '平均积分']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 10],
type: 'bar',
barWidth: '30',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
chart.setOption(option);
return chart;
}
function updateEchartData(myGrade, gradeRank) {
chart.setOption({
title: {
text: '您的积分已超过全国' + gradeRank + '%的用户',
},
series: [{
data: [myGrade, 10],
}]
});
}
注意:
let chart = null; //注意这里,一定要设置为let变量
上面代码中的 chart 一定要设置为 let 类型变量;如果设置为 const,会导致 initChart 初始化图表后,图表就不能再改变了,后面再从后端获取数据后,就不能再将新的数据渲染到chart图表上了;设置为 let ,则可以多次赋值。
三、总结
通过上面的实例,我们实现了从后端实时获取积分数据,通过echarts折线图展示出来的效果。
效果图: