加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

小程序中使用ECharts 异步加载数据

发布时间:2020-12-14 19:01:59 所属栏目:资源 来源:网络整理
导读:官网例子都是同步的,怎么引入及同步demo请移步官网 view class ="container" ec-canvas id ="mychart-dom-multi-bar" canvas-id ="mychart-multi-bar" ec ="{{ ecBar }}" / ec-canvas ="mychart-dom-multi-scatter" ="mychart-multi-scatter" ="{{ ecScatte

官网例子都是同步的,怎么引入及同步demo请移步官网

<view class="container">
  ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas="mychart-dom-multi-scatter"="mychart-multi-scatter"="{{ ecScatter }}">
</view>
import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    ecBar: {
      lazyLoad: true // 延迟加载
    },ecScatter: {
      lazyLoad: true 
    }
  },onLoad(){
    this.barComponent = this.selectComponent('#mychart-dom-multi-bar');
    this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter'this.init_bar();
    .init_sca();
  },init_bar: function (){
    this.barComponent.init((canvas,width,height) => {
       初始化图表
      const barChart = echarts.init(canvas,null,{
        width: width,height: height
      });
      barChart.setOption(.getBarOption());
       注意这里一定要返回 chart 实例,否则会影响事件处理等
      return barChart;
    });
  },init_sca:  () {
    this.scaComponnet.init((canvas,1)"> 初始化图表
      const scaChart = echarts.init(canvas,height: height
      });
      scaChart.setOption(.getScaOption());
       scaChart;
    });
  },getBarOption:(){
    return 请求数据
     {
      color: ['#37a2da','#32c5e9','#67e0e3'],tooltip: {
        trigger: 'axis' 坐标轴指示器,坐标轴触发有效
          type: 'shadow'         默认为直线,可选为:'line' | 'shadow'
        }
      },legend: {
        data: ['热度','正面','负面']
      },grid: {
        left: 2015
      },xAxis: [
        {
          type: 'value'
            }
          },axisLabel: {
            color: '#666'
          }
        }
      ],yAxis: [
        {
          type: 'category'false },data: ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎''bar''inside']
        },{
          name: '正面'120,102,141,174,190,250,220'left']
        }
      ]
    };
  },getScaOption:请求数据 
    var data = [];
    var data2 = [];

    for (var i = 0; i < 10; i++) {
      data.push(
        [
          Math.round(Math.random() * 100),Math.round(Math.random() * 100)
        ]
      );
      data2.push(
        [
          Math.round(Math.random() * 100)
        ]
      );
    }

    var axisCommon = {
      axisLabel: {
        textStyle: {
          color: '#C8C8C8'
        }
      },axisTick: {
        lineStyle: {
          color: '#fff''#C8C8C8'
        }
      }
    };

     {
      color: ["#FF7070","#60B6E3"'aaaa','bbbb'100]
        }
      },series: [{
        type: 'scatter''bbbb' (idx) {
        return idx * 50;
      },animationEasing: 'elasticOut'
    };
  },});

注意:异步加载时,ec-canvas标签加载显示要先于this.scaComponnet.init,否则会报错。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读