良许Linux教程网 干货合集 详解ECharts 异步加载数据

详解ECharts 异步加载数据

ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。

详解ECharts 异步加载数据
学习下ECharts 异步加载数据学习下ECharts 异步加载数据

ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。 json 数据:

echarts_test_data.json 数据:
{
   "data_pie" : [
   {"value":235, "name":"视频广告"},
   {"value":274, "name":"联盟广告"},
   {"value":310, "name":"邮件营销"},
   {"value":335, "name":"直接访问"},
   {"value":400, "name":"搜索引擎"}
   ]
}

实例

var myChart = echarts.init(document.getElementById('main'));
$.get('https://www.runoob.com/static/js/echarts_test_data.json'function (data) {
   myChart.setOption({
       series : [
           {
               name: '访问来源',
               type'pie',    // 设置图表类型为饼图
               radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
               data:data.data_pie
           }
       ]
   })
}, 'json')

尝试一下 » 如果异步加载需要一段时间,我们可以添加 loading 效果,ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画:

实例

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 开启 loading 效果
$.get('https://www.runoob.com/static/js/echarts_test_data.json'function (data) {
   myChart.hideLoading();  // 隐藏 loading 效果
   myChart.setOption({
       series : [
           {
               name: '访问来源',
               type'pie',    // 设置图表类型为饼图
               radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
               data:data.data_pie
           }
       ]
   })
}, 'json')

尝试一下 »

数据的动态更新

ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption 实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

实例

var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 150];
var now = new Date(base);

function addData(shift) {
   now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
   date.push(now);
   data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

   if (shift) {
       date.shift();
       data.shift();
   }

   now = new Date(+new Date(now) + oneDay);
}

for (var i = 1; i type: 'category',
       boundaryGap: false,
       data: date
   },
   yAxis: {
       boundaryGap: [0, '50%'],
       type'value'
   },
   series: [
       {
           name:'成交',
           type:'line',
           smooth:true,
           symbol: 'none',
           stack: 'a',
           areaStyle: {
               normal: {}
           },
           data: data
       }
   ]
};

setInterval(function () {
   addData(true);
   myChart.setOption({
       xAxis: {
           data: date
       },
       series: [{
           name:'成交',
           data: data
       }]
   });
}, 500);

尝试一下 »

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部