微信小程序 echarts 请求里画图

import * as echarts from '../../ec-canvas/echarts';

var url = "http://xxxx?page=10&pageSize=15";
var page = 0;
var page_size = 15;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
 
// 请求数据
var loadMore = function (that) {
  that.setData({
    hidden: false
  });
  wx.request({
    url: url,
    data: {
      page: page,
      page_size: page_size,
      sort: sort,
      is_easy: is_easy,
      lange_id: lange_id,
      pos_id: pos_id,
      unlearn: unlearn
    },
    success: function (res) {
      console.log(res.data.op_info.rows)
      var list = that.data.list;
      console.info("list数据长度：" + list.length);
      for (var i = 0; i < res.data.op_info.rows.length; i++) {
        list.push(res.data.op_info.rows[i]);
      }
      console.log(list)
      that.setData({
        list: list
      });
      console.info("之前page==：" + page);
      page++;
      console.info("目前page==：" + page);
      that.setData({
        hidden: true
      });
    }
  });
}


let chart = null;

function initChart(canvas, width, height, dpr) {
 
  wx.request({
    url: url,
    success: function (res) {
      console.log(res.data.op_info.rows)
     let o1= res.data.op_info.rows[0]
     let o2=res.data.op_info.rows[1]
     let o3= res.data.op_info.rows[2]
     console.log( o1)
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      var option = {
        color: ['#37a2da', '#67e0e3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          // confine: true
        },
        legend: {
          data: ['户数降幅', '近x日涨跌幅']
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 15,
          top: 25,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data:[o1.secuabbr, o2.secuabbr ,o2.secuabbr],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            show: true,
            interval: 0,
            lineStyle: {
              color: "#666",
              type: "dashed"
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            show: false,
          }, 
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
            name: '户数降幅',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'outside'
              }
            },
            data:[o1.p,o2.p,o3.p],
            itemStyle: {
              emphasis: {
                color: '#ffb900'
              }
            }
          },
          {
            name: '近x日涨跌幅',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data:[o1.turnoverraterw,o2.turnoverraterw,o3.turnoverraterw],
            itemStyle: {
              emphasis: {
                color: '#ff0000'
              }
            }
          }
    
        ]
      };
      chart.setOption(option);
      return chart;
    }
  });

  
 
 
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    isRuleTrue: false,
    searchVal:'',
    hidden: true,
    list: [],
    scrollTop: 0,
    scrollHeight: 0,
    ec: {
      onInit: initChart
    }
  },
  //input的搜索事件
 searchContent:function(e){
  let keyWord = e.detail.value ? e.detail.value : null ;
  let that = this;
  if(timer){
      clearTimeout(timer)
  }
  timer = setTimeout(()=>{
      if(keyWord==null){
         //这里表示  如果搜索框中没有数据的话，做的一些处理
      }else{
        //这里是搜索框中有值的情况，可以直接请求搜索接口即可
      }  
  })
  that.setData({
     searchVal:keyWord,
     timer:null 
  })
},
//请求搜索接口
requestSearchApi:function(data){
 //例如:方法照例简单封装了一下
 Utils.get('api/xxx',data).then(res=>{}).catch(err=>{})
},
showInput: function () {
  this.setData({
  inputShowed: true
  });
  },
  hideInput: function () {
  this.setData({
  inputVal: "",
  inputShowed: false
  });
  // getList(this);
  },
  clearInput: function () {
  this.setData({
  inputVal: ""
  });
  // getList(this);
  },
  inputTyping: function (e) {
  //搜索数据
  // getList(this, e.detail.value);
  this.setData({
  inputVal: e.detail.value
  });
  },
  asdn: function () {
console.log("1234")
    },
  //打开规则提示
  // showRule: function () {
  //   this.setData({
  //     isRuleTrue: true
  //   })
  // },
  //关闭规则提示
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 //   这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
 var that = this; 
 wx.getSystemInfo({
   success: function (res) {
     that.setData({
       scrollHeight: res.windowHeight
     });
     console.log("设备高度scrollHeight==" + res.windowHeight ); 
   }
 });
 loadMore(that);

  },
 //页面滑动到底部
 bindDownLoad: function () {
  var that = this;
  loadMore(that);
  console.log("lower");
},
scroll: function (event) {
  //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
  this.setData({
    scrollTop: event.detail.scrollTop
  });
  // console.log("滚动时触发scrollTop==" + event.detail.scrollTop);
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      isRuleTrue: true
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  // 下拉刷新  

    // 显示导航栏loading  

    wx.showNavigationBarLoading();  

    // 调用接口加载数据  

    // this.loadData();  

    // 隐藏导航栏loading  

    wx.hideNavigationBarLoading();  

    // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新  

    wx.stopPullDownRefresh();  

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{
  "navigationBarTitleText": "A股外资动向",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "enablePullDownRefresh": true
}


<!--搜索框 -->
<view class="weui-search-bar">
 <view class="weui-search-bar__form">
 <!--点击之后，出现input框 -->
 <view class="weui-search-bar__box">
 <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
 <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
 <!--输入款字数大于0，则显示清除按钮 -->
 <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
 <icon type="clear" size="14"></icon>
 </view>
 </view>
 <!--没点击之前，只是一些文字和图标 -->
 <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
 <icon class="weui-icon-search" type="search" size="14"></icon>
 <view class="weui-search-bar__text">搜索</view>
 </label>
 </view>
 <!--动态出现的“取消”键 -->
 <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<view class="container" style="padding-top:0rpx">
 
  <view class="tr bg-w">
 <view class="th" >名称</view>
 <view class="th">股东户数</view>
 <view class="th ">比上期</view>
 <view class="th ">近十日换手率</view>
 <view class="th ">近十日涨跌幅</view>
  </view>
  <!--垂直滚动，这里必须设置高度-->
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view class="item" wx:for="{{list}}">
      <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
 <view class="td"  bindtap="asdf">{{item.secuabbr}} 
   <text class="tradingcode">{{item.tradingcode}}</text></view>
 <view class="td">{{item.totalsh}}</view>
 <view class="td" wx:if="{{item.p > 0}}" style="color:#f00">{{item.p}}%</view>
 <view class="td" wx:if="{{item.p == 0}}" style="color:#000">{{item.p}}%</view>
 <view class="td" wx:if="{{item.p < 0}}" style="color:#008200">{{item.p}}%</view>
 <view class="td" >{{item.turnoverraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw > 0}}" style="color:#f00">{{item.changeraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw == 0}}" style="color:#000">{{item.changeraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw < 0}}" style="color:#008200">{{item.changeraterw}}%</view>
 </view>
 <view class="tr" wx:else>
  <view class="td">{{item.secuabbr}}
    <text class="tradingcode">{{item.tradingcode}}</text>
  </view>
 <view class="td">{{item.totalsh}}</view>
 <view class="td" wx:if="{{item.p > 0}}" style="color:#f00">{{item.p}}%</view>
 <view class="td" wx:if="{{item.p == 0}}" style="color:#000">{{item.p}}%</view>
 <view class="td" wx:if="{{item.p < 0}}" style="color:#008200">{{item.p}}%</view>
 <view class="td" >{{item.turnoverraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw > 0}}" style="color:#f00">{{item.changeraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw == 0}}" style="color:#000">{{item.changeraterw}}%</view>
 <view class="td" wx:if="{{item.changeraterw < 0}}" style="color:#008200">{{item.changeraterw}}%</view>
 </view>
    
    </view>
  </scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
      加载中...
    </loading>
  </view>
</view>

<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
    <view class='ruleZhezhaoContent'>

        <text  class="title">最新筹码动向</text>
       <!--index.wxml-->

  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" data-record="{{recordData}}"></ec-canvas>


        <view class='ruleHide' bindtap='hideRule'>知道了</view>
     
    </view>
  </view>


.isRuleShow{
  display: block;
}
.isRuleHide{
  display: none;
}
.ruleZhezhao{
  height: 100%;
  width: 100%;
  position: fixed;
  background-color:rgba(0, 0, 0, .5); 
  top: 0;
  left: 0;
  z-index: 999;
}
.ruleZhezhaoContent{
  padding: 15px 0;
  width: 90%;
  background: #fff;
  margin: 15% auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.ruleHide{
  height: 20px!important;
  width: 120px!important;
  /* position: absolute; */
  border-radius: 10px;
  background-color: #ffb900;
  color: #585858;
  margin: 10px auto 10px auto;
  text-align: center;
  font-size: 15px;
  /* line-height: 60rpx; */
  /* top: 0rpx; */
  /* right: 0rpx; */
  /* z-index: 10000; */
}
.rule{
  display: block;
  border: 1px solid #fff;
  width: 100rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  height: 60rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  position: absolute;
  top: 10%;
  right: 5%;
}
.title{
  width: 520rpx;
  height: 110rpx;
  margin-top: 30rpx;
  margin-bottom: 30rxp;
}

ec-canvas {
  width: 88vw;
  height: 40vh;
}
/* ----------- */
/* pages/page3/page3.wxss */.table {
  border: 0px solid darkgray;
}
.list{
  margin-top: 0em;
}
.tr {
 display: flex;
 width: 100%;
 justify-content: center;
 height: 3rem;
 align-items: center;
}
.td {
 font-size: 15px;
 width:20%;
 justify-content: center;
 text-align: center;
}
.bg-w{
 background: #eeeeee;
}
.bg-g{
 background: #fffade;
}
.th {
  font-size: 15px;
 width: 20%;
 text-align: center;
 justify-content: center;
 background: #ffd30e;
 color: rgb(0, 0, 0);
 display: flex;
 height: 3rem;
 align-items: center;
}
.tradingcode{
  font-size: 13px;
  color: #494949;
}
/* ------- */

.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #ffb900;

 }
 
 .weui-icon-search {
  margin-right: 8px;
  font-size: inherit;
 }
 .weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
 }
 .weui-search-bar__text {
  display: inline-block;
  font-size:15px;
  vertical-align: middle;
 }
 .weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
   flex: auto;
  border-radius: 15px;
  background: #FFFFFF;
 }
 .weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
 }
 .weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
 }
 .weui-icon-clear {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 8px;
  font-size: 0;
 }
 .weui-search-bar__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 15px;
  text-align: center;
  color: #9B9B9B;
  background: #FFFFFF;
  line-height: 28px;
 }
 .weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #4e4e4e;
  white-space: nowrap;
  font-size: 30rpx;
  z-index: 10;
 }