ECharts学习二 --- 异步加载

最新推荐文章于 2023-11-01 13:23:13 发布

紫冰Nan

最新推荐文章于 2023-11-01 13:23:13 发布

阅读量405

点赞数

分类专栏： ECharts

本文链接：https://blog.csdn.net/NN_nan/article/details/83012584

版权

ECharts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

	var myChart = echarts.init(document.getElementById('main'));
	
	// 初始 option   //显示标题，图例和空的坐标轴
	myChart.setOption({
	    title: {
	        text: '异步数据加载示例'
	    },
	    tooltip: {},
	    legend: {
	        data:['销量']
	    },
	    xAxis: {
	        data: []
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'bar',
	        data: []
	    }]
	});
	
	function fetchData(cb) {
	    // 通过 setTimeout 模拟异步加载
	    setTimeout(function () {
	        cb({
	            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
	            data: [5, 20, 36, 10, 10, 20]
	        });
	    }, 1000);
	}
	
        //如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了
	//调用 showLoading 方法显示一个简单的加载动画
	myChart.showLoading();

	fetchData(function (data) {
            //数据加载完成后再调用 hideLoading 方法隐藏加载动画
	    myChart.hideLoading();
	    myChart.setOption({
	        xAxis: {
	            data: data.categories
	        },
	        series: [{
	            // 根据名字对应到相应的系列
	            name: '销量',
	            data: data.data
	        }]
	    });
	});
	
	//setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 就会执行一个指定的  method 或 function
	//setTimeout("alert('对不起, 要你久候')", 3000 ) 设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( )

</script>
</body>
</html>

ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据

效果图：

异步加载json文件详见：

http://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0

紫冰Nan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts学习二 --- 异步加载

ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;ECharts&lt;/title&gt;
复制链接

扫一扫

专栏目录