导读 | ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行。 |
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('http://www.51sjk.com/Upload/Articles/1/0/325/325548_20220920134812704.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('http://www.51sjk.com/Upload/Articles/1/0/325/325548_20220920134812704.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 < 100;="" i++)="" {="" adddata();="" }="" option="{" xaxis:="" {="" 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="" }]="" });="" },="">
尝试一下 ?