设为首页收藏本站

开启辅助访问

ECharts 异步加载数据详解

您所在的位置：网站首页 › 异步获取数据技术书籍推荐 › ECharts 异步加载数据详解

ECharts 异步加载数据详解

#ECharts 异步加载数据详解| 来源: 网络整理| 查看: 265

简单的数据初始化是在setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

简单来说，就是动态的往option里面添加数据因为要使用到jQuery和echarts，所以要引入

在这里插入图片描述

往坐标轴中动态添加数据

可以先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。先构建一个空的坐标轴：

var myChart = echarts.init(document.getElementById('main')); //初始化option，先显示一个空的坐标轴 option = { title: { text: '异步数据加载示例' }, tooltip: { }, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: { }, series: [{ name: '销量', type: 'bar', data: [] }] }; myChart.setOption(option);

在这里插入图片描述添加数据：

var myChart = echarts.init(document.getElementById('main')); //初始化option，先显示一个空的坐标轴 option = { title: { text: '异步数据加载示例' }, tooltip: { }, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: { }, series: [{ name: '销量', type: 'bar', data: [] }] }; //fetchData 中的参数是一个匿名方法，参数就是 fetchData(function (data) { myChart.setOption({ xAxis: { data: data.categories //设置x轴的值 }, series: [{ name: '销量',// 根据名字对应到相应的系列 data: data.data //第一个data是下面的cb，相当于cb.data }] }); }); //定义函数fetchData,传入参数cb function fetchData(cb) { // 通过 setTimeout 模拟异步加载 //function(){ ...} 是一个函数表达式（即匿名函数） setTimeout(function () { cb({ categories: ["衬衫","羊毛衫","雪纺衫",

【本文地址】

公司简介

联系我们

CopyRight 2018-2019 实验室设备网版权所有