zoukankan      html  css  js  c++  java
  • 小程序 引入 es-canvas wx:for 单页面渲染多个for不同数据

    <block wx:for="{{list}}" wx:key="sbh">
      <view style="height: 400px; 100%;">
        <ec-canvas id="charts-{{item.sbh}}" canvas-id="charts-{{item.sbh}}" ec="{{ ec }}"></ec-canvas>
      </view>
    </block>
    

      

    // pages/device/index.js
    import * as echarts from '../components/ec-canvas/echarts';
    
    var clearCharts = true;
    //图表容器
    let data=[
      {
        "type": "identifier",
        "list": [
          {
            "date": "2020/8/1",
            "num": 10
          },
          {
            "date": "2020/8/2",
            "num": 20
          },
          {
            "date": "2020/8/3",
            "num": 30
          }
        ]
      },
      {
        "type": "Overpressure",
        "list": [
          {
            "date": "2020/8/2",
            "num": 10
          },
          {
            "date": "2020/8/2",
            "num": 20
          },
          {
            "date": "2020/8/3",
            "num": 30
          }
        ]
      }
    ]
    /**
     * 初始化图表
     * @param {*} canvas 
     * @param {*} width 
     * @param {*} height 
     * @param {*} dpr 
     */
    
    
    
    Page({
      data: {
        list: [],
        data:data,
      }, 
      onLoad: function () {
        this.loadData();
      },
      loadData: function(){
        var that = this;
        var list = [];
        for(var i=0;i<6;i++){
          var num = uuid();
          list.push({'sbh':num});
        }
        that.setData({
          list: list
        })
        var arr=[]
        let xData=[]
        for(var i=0;i<list.length;i++){
          arr.push(this.selectComponent('#charts-'+list[i].sbh+''))
        }
        let datas=this.data.data;
        datas.forEach((aa,index)=>{
            xData.push(aa.list.map(item=>[item.date,item.num]))
          })
          console.log(xData)
        
        arr.forEach((item,index)=>{
            console.log(item,index)
            item.init((canvas, width, height, dpr) => {
              // 获取组件的 canvas、width、height 后的回调函数
              // 在这里初始化图表
              const chart = echarts.init(canvas, null, {
                 width,
                height: height,
                devicePixelRatio: dpr // new
              });
              chart.setOption(getOption('111',xData[index]))
              // setOption(chart);
              // 将图表实例绑定到 this 上,可以在其他成员函数(如 dispose)中访问
              this.chart = chart;
              // 注意这里一定要返回 chart 实例,否则会影响事件处理等
              return chart;
            });
        })
      },
    
    
    })
    
    //图表配置项
    
    function getOption(title,xData) {
      var option = {
        title: {
          text: '属性:'+title,
          left: 'center'
        },
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel:{
            interval:0,
            rotate:40
          }
      },
      yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
      },
      series: [
          {
              type: 'line',
              data:xData
          }
      ]
      };
      return option
    }
    function uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
     
      var uuid = s.join("");
      return uuid
    }
    

      

    .canvas{
       100%;
      height: 100%;
    }
    .mychart{
       100%;
      height: 800rpx;
      box-sizing: border-box;
    
    }
    

      

  • 相关阅读:
    使用 ES2015 编写 Gulp 构建
    ES6 Promise 接口
    Git 文件比较
    JavaScript 属性描述符
    Vim 插件之 NERDTree
    Raspberry Pi 3 Model B 安装 OSMC
    How ADB works
    [Linux] zip 与 unzip 命令
    在 Ubuntu 配置 PPTP Server
    [Linux] 查看系统启动时间
  • 原文地址:https://www.cnblogs.com/alone2015/p/13696948.html
Copyright © 2011-2022 走看看