echarts异步数据加载(在下拉框选择事件中异步更新数据)

接触echarts 大半年了,从不会到熟练也做过不少的图表，隔了一段时间没使用这玩意，好多东西真心容易忘了。在接触echarts这期间也没有总结什么东西，今天我就来总结一下如何在echart中异步加载数据，在实际的工作的中对数据的刷选非常常见，比如在下拉框中选择，时间选择等的一些事件中异步加载数据。一个很常见的筛选如图：

下面我就直接用代码来实现怎样在事件刷选中异步刷新数据

 //路径配置require.config({paths: {echarts: "/Scripts/echarts-2.2.7/build/dist"}});var MYCHART;  //声明一个大写的全局变量，能不用全局的尽量就不要用全局变量//使用require(['echarts',      'echarts/chart/bar'],  //按需加载function (ec){//实例domMYCHART = ec.init(document.getElementById("main"));var option = {tooltip: {show: true},legend: {data: ['得分']},xAxis: [{type: "category",data:['']//  data:["科比", "欧文", "詹姆斯", "库里", '杜兰特', '威少', '韦德']}],yAxis: [{type: "value"}],series: [{"name": "得分","type": "bar",data:['']//data:[20102, 2000, 1200, 1002, 1204, 4545, 7878]}]}console.info(MYCHART);//位echart对象加载数据MYCHART.setOption(option,true);loadOption(2011);//使用ajax同步加载数据})

其实我也很纳闷了,这个xAxis中data属性是一个数组,series中data也是一个数组,如果直接不写任何数据,在loadOption方法中，再获取MACHAT.option中会找不到series,xAxis ，option倒是能获取到，但是这个对象是空的。这让我很奇怪，所以只能先写一个空字符串了。

    //ajax 异步加载配置数据项function loadOption(year){$.ajax({url: '/Home/GetJson?year='+year,type: 'get',dataType: 'json',async: false,success: function (result) {if (result){var option = MYCHART._option;  //e2中感觉这个命名十分奇怪，居然要这样获取，必须先设置才有这个属性debuggerif (result.seriesData == null) {option.series[0].data = [''];option.xAxis[0].data = ['']}else {option.series[0].data = result.seriesData;option.xAxis[0].data = result.xAxisData;}MYCHART.setOption(option,true);}},error: function (){alert("不好意思请求失败了");}})}

要注意这两点

1.刚开始的时候我也很奇怪，获取option 属性居然有这样获取MYCHART._option 。在e3直接MYCHART.getOption()就可以获取到。

2.echarts图表动态刷新数据不能清空数据，这是因为多次调用option默认是合并的Merge ,文档里说设置第二个参数为true就ok ，如上MYCHART.setOption(option,true)

下拉框选择年份事件：

    function yearChange(selectObj){var year = $(selectObj).val();loadOption(year);}

实际运行的效果图如下：

echarts图表中值得注意两点上面已经说了，一个数据动态加载数据没有清除数据，一个获取option必须先setOption才能获取到。但是我郁闷的是如果不给series 中data属性设值，xAxis中data属性设值获取到的option是一个空的object。虽然实现整个下拉选择事件动态加载数据的功能，但是代码还是得优化一下。

整个思路就是同步执行ajax加载数据，设置option中的属性。还是要注意方法调用的循序。经常会underfined地报错，debugger的时候看的很清楚。

下载地址：http://download.csdn.net/detail/kebi007/9742894

作者：张林

标题: echarts异步数据加载(在下拉框选择事件中异步更新数据)原文地址:http://blog.csdn.net/kebi007/article/details/54663620

转载随意注明出处

有兴趣的可以关注一下我的公众号，每天分享一篇it技术、面试技巧、技术感想的文章

echarts异步数据加载(在下拉框选择事件中异步更新数据)相关推荐

Ext JS - Combobox 加载下拉框数据级联下拉框
Combobox 加载下拉框数据点击下拉框,数据从后台加载,是很常见的需求.如下图: View 中下拉框 dockedItems : [ {dock : 'top',xtype : 'toolbar ...
element 动态加载下拉框_记一次很坑的需求：给element-cascader添加一个重置和确定按钮...
这帖子是不用多高超技术或者是什么歪门邪道,只是做的过程中遇到很多的坑,我感觉我做的这个没人能遇到比我还多 [因为使用场景而产生] 的坑...想记录一下,原本是产品叫我找别的级联的插件,我真的觉得不想在 ...
Android开发之异步任务加载网络图片并存储在sdcard中（源代码分享）
在MainActivity中的代码 package com.example.f02_sdcard02;import android.os.AsyncTask; import android.os.Bu ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
HTML下拉框选择事件
项目需求下拉框改变时,直接传值,不要查询点击按钮. 项目代码 HTML <select name="years" id="years"></ ...
element 动态加载下拉框_动态增加select框(elementUI 框架)
演示动态增加select框(elementUI 框架) @import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
detectron2使用自定义数据集及数据加载
1.使用自定义数据集数据集中列出了detectron2中内置支持的数据集.如果要使用自定义数据集,同时还重复使用detectron2的数据加载器,则需要: 1)注册您的数据集(即,告诉detectr ...
pytorch基础知识整理(二）数据加载
pytorch数据加载组件位于torch.utils.data中. from torch.utils.data import DataLoader, Dataset, Sampler 1, torch ...

echarts异步数据加载(在下拉框选择事件中异步更新数据)

echarts异步数据加载(在下拉框选择事件中异步更新数据)相关推荐

最新文章

热门文章