收藏
回答

echarts如何用传入wx.request请求的数据?

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

回答关注问题邀请回答
收藏

2 个回答

  • 兵
    2020-03-20
    样式必须否则不显示,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 {
            
              })
            }
          }
        })
      },
    });
    
    2020-03-20
    有用
    回复
  • 🌞
    🌞
    2020-03-20

    变通下。

    2020-03-20
    有用
    回复
登录 后发表内容
问题标签