最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
ECharts data is usually set in the setOption , if we need to load data asynchronously, we can work with tools such as jQuery to get the data asynchronously through the setOption just fill in the data and configuration items.
ECharts data is usually set in the If asynchronous loading takes a while, we can add ECharts is data-driven, and the change of data drives the change of chart presentation, so the implementation of dynamic data becomes extremely simple. All data are updated through the setOption , if we need to load data asynchronously, we can work with tools such as jQuery to get the data asynchronously through the setOption , just fill in the data and configuration items json data: 9.6.1. Echarts_test_data.json data: ¶
{ "data_pie" : [ {"value":235, "name":"Video AD"}, {"value":274, "name":"Alliance advertising"}, {"value":310, "name":"EMAIL"}, {"value":335, "name":"Direct Access"}, {"value":400, "name":"Search Engines"} ] }
9.6.2. Example ¶
var myChart = echarts.init(document.getElementById('main')); $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.setOption({ series : [ { name: 'Referrer', type: 'pie', // Set chart type to pie chart radius: '55%', // The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width). data:data.data_pie } ] }) }, 'json') loading effect, ECharts provides a simple loading animation by default. You just need to call the showLoading method display. Call after the data has been loaded hideLoading method to hide the load animation: 9.6.3. Example ¶
var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // Enable loading effect $.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) { myChart.hideLoading(); // Hide loading effect myChart.setOption({ series : [ { name: 'Referrer', type: 'pie', // Set chart type to pie chart radius: '55%', // The radius of the pie chart, with the outer radius being 55% of the length of the visible area size (the smaller of the container height and width). data:data.data_pie } ] }) }, 'json') Dynamic updating of data ¶
setOption to achieve, you only need toget the data on a regular basis setOption fill in the data, regardlessof the changes in the data, ECharts will find the differences between the two sets of data and then use the appropriate animation to represent the changes in the data. 9.6.4. Example ¶
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:'deal', type:'line', smooth:true, symbol: 'none', stack: 'a', areaStyle: { normal: {} }, data: data } ] }; setInterval(function () { addData(true); myChart.setOption({ xAxis: { data: date }, series: [{ name:'deal', data: data }] }); }, 500);