This article implements an example of a WeChat applet that obtains data from the backend and renders it to an echarts line chart.
1. Introduce echarts
First, how to download and import developer tools from echarts, you can read this guy’s blog: Blog
2. Code
Without further ado, let’s get straight to the code.
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
Slightly (hehe)
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],
}]
});
}Notice:
let chart = null; //注意这里，一定要设置为let变量The chart in the above code must be set to a let type variable; if it is set to const, it will cause the chart to no longer be changed after initChart initializes the chart. After the data is obtained from the backend later, the new data cannot be rendered to The chart is on; set to let, you can assign values multiple times.
3. Summary
Through the above example, we have achieved the effect of obtaining points data from the backend in real time and displaying it through the echarts line chart.
Rendering:
