echarts如何用传入wx.request请求的数据?
发布于 6 年前 作者 kongjuan 7704 次浏览 来自 问答

微信小程序中使用echarts测试只能按照官方的这种顺序写,否则echarts图出不来,但这种如何传入wx.request请求的数据呢?

2 回复
样式必须否则不显示,echarts和wxcharts不能共存
/**index.wxss**/
ec-canvas {
  width: 100%;
  height: 200px;
}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box; 
} 
<!--index.wxml-->
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../ec-canvas/echarts';
Page({
  onLoad() {
    this.barComponent = this.selectComponent('#mychart-dom-bar');
    this.getToken();
  },
  init_bar: function () {
    this.barComponent.init((canvas, width, height) => {
      // 初始化图表
      const barChart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      barChart.setOption(this.getBarOption());
      // 注意这里一定要返回 chart 实例,否则会影响事件处理等
      return barChart;
    });
  },
  getBarOption: function () {
    var _this = this;
    //return 请求数据
var option = {}
    return option;
  },
  getToken() { 
    wx.showLoading({
      title: '加载中',
    })
   
    let _this = this;
    wx.request({
      url: url,
      method: "get",
      complete() {
        wx.hideLoading();
      },
      success(res) {
        _this.getData();
      },
      fail(err) {
        console.log(err);
      }
    })
  },
  getData() {
    var _this = this;
    wx.request({
      url: url,
      header: {
        'content-type': 'application/x-www-form-urlencoded', 
        "Authorization": "bearer " + _this.data.token 
      },
      method: "post",
    data:{}
      complete() { },
      success(res) {
        if (res.data.Code == 200) {
          var result = res.data.Result;
          _this.init_bar();
        } else {
        
          })
        }
      }
    })
  },
});

变通下。

回到顶部