微信小程序+echarts+后端交互

本文实现了一个微信小程序从后端获取数据，并渲染到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折线图展示出来的效果。

效果图：