微信小程序Echars获取动态数据

一、背景

下载了weixin小程序echars项目，可以正确显示图表，参考这个文档 https://blog.youkuaiyun.com/nmyangmo/article/details/79413030

但怎么在画echars时候option的值使用接口返回的数据呢？

二、先看看我的echars是怎么画的

1. 在page的index.js中定义一个画echars的函数project->pages->index->index.js

2. function initChartThreeT(canvas,width,height,option){
   
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height,
       option:option,
       // devicePixelRatio: dpr // new
     });
     console.log("开始画柱状图========",app.globalData.area)
    
     var option = {
       title: {
               text: '异步数据加载示例'
           },
           tooltip: {},
           legend: {
               data: ['发布排行']
           },
           xAxis: {
               data: ["和平区","河西区"]
           },
           yAxis: {
               splitLine: { show: true },//去除网格线
               name: ''
           },
           grid: {
             x:5,
             y:70,
             x2:300,
             y2:60,
             containLabel: true},
           series: [{
               barWidth: "30px",
               name: '发布排行',
               type: 'bar',
               itemStyle: {
                   normal: {
                       label: {
                           show: true,
                           position: 'top',
                           textStyle: {
                               color: '#333'
                           }
                       }
                   }
               },
               data: [210,380]
           }]
   };
    
   }

    

3. 在page的data里面定义这个echars并初始化这个函数

4. data: {
       ec: {
         onInit: initChart
       },
       ts:{
         onInit:initChartT
       },
       ecthree:{
         onInit:initChartThreeT
       },
       imageSrc:'../../pages/image/sun.png',
       liu:'../../pages/image/sun.png'
       
     },

    

5. 在page的wxml里面输出data中的echars：project->pages->index->index.wxml

<view id="main" style="width: 600px;height:400px;">
  <ec-canvas id="mychart-dom-piee" canvas-id="mychart-dom-piee" ec="{{ ts }}"></ec-canvas>
</view>

 

看下效果图

三、怎么通过接口修改echars里面的option

 

因为不知道画图表的函数入参怎么给，因为调用的时候是用的这个方法onInit:initChartThreeT 实在不知道哪里可以传递参数进去，尝试使用onInit:initChartThreeT(xx,yy)不行

解决办法是使用app.js的globalData，这里面的数据各个页面都可以调用。

1. 定义要传递的参数

我这里要传递area和nums数组。

project->app.js文件

globalData: {
    userInfo: "llll",
    charData:null,
    area:[],
    nums:[],
  // charData:null,
  }

2、修改globalData，赋值globaldata

wx.request({
      url: 'https://timeload.com?userName=mantianxing',
      dataType: 'json',
      success : res => {
        for(var name in res.data){
          this.globalData.area.push(res.data[name].department)
          this.globalData.nums.push(res.data[name].num)
        }
        if (this.checkRequestTwoCallback) {
          this.checkRequestTwoCallback(res)
        }
      }
    })

这里的name其实是数组的角标数字。

给大家看下我接口返回的真实的json数据

{
  "data": [
        {
            "department":"和平区",
            "num":210
        },
        {
            "department":"河西区",
            "num":380
        }
    ],
  "statusCode": "",
  "header": ""
}

这里说一个坑，为什么会写callback回调函数，因为可能globaldata值还没赋成功，page页面就把初始化的globaldata值就是空值取走了，所以定义个callback，请求完之后，就是在app.js里面赋值成功后再取globaldata的值。

再说一个微信开发小程序工具的imock的一个坑，最好使用数据模板，如果不用的话很可能取不到你配数据，并不是你正则配置错了

3、在page的js中使用globaldata project->pages->index->index.js

function initChartThreeT(canvas,width,height,option){

  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    option:option,
    // devicePixelRatio: dpr // new
  });
  console.log("开始画柱状图========",app.globalData.area)
 
  var option = {
    title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data: ['发布排行']
        },
        xAxis: {
            data: []
        },
        yAxis: {
            splitLine: { show: true },//去除网格线
            name: ''
        },
        grid: {
          x:5,
          y:70,
          x2:300,
          y2:60,
          containLabel: true},
        series: [{
            barWidth: "30px",
            name: '发布排行',
            type: 'bar',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#333'
                        }
                    }
                }
            },
            data: []
        }]
};

  if(app.globalData.area.length!=0){
    option.xAxis.data=app.globalData.area,
  option.series[0].data=app.globalData.nums;
  console.log("if option.aree====",option.xAxis.data)
  console.log("if option.nums====",option.series[0].data)
  
  chart.setOption(option);
  return chart;
  }else{
      app.checkRequestTwoCallback = res =>{
      option.xAxis.data=app.globalData.area,
      option.series[0].data=app.globalData.nums;
      console.log("else option.aree====",option.xAxis.data)
      console.log("else option.nums====",option.series[0].data)   
  chart.setOption(option);
  return chart;
  }
  }
  
}

 

与写死的图标相比，这里在画图表的函数里面使用了globaldata，多了如下代码，把原来option里面的data置成空数组就好

if(app.globalData.area.length!=0){
    option.xAxis.data=app.globalData.area,
  option.series[0].data=app.globalData.nums;
  
  chart.setOption(option);
  return chart;
  }else{
      app.checkRequestTwoCallback = res =>{
      option.xAxis.data=app.globalData.area,
      option.series[0].data=app.globalData.nums; 
  chart.setOption(option);
  return chart;
  }
  }

 

这里再说一个坑：

chart.setOption(option);
return chart;

这两行代码要放到if else里面，不能放外面，不然图表一直画出来是空的，因为取不到值，因为他会直接画表，在if else执行获得数据之前就画图表了。