echarts异步数据加载和更新
来源:互联网 发布:大数据app 编辑:程序博客网 时间:2024/06/07 11:37
echarts中的数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过setOption
填入数据和配置项就行。
var myChart = echarts.init(document.getElementById('main'));$.get('data.json').done(function (data) { myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });});
或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。
var myChart = echarts.init(document.getElementById('main'));// 显示标题,图例和空的坐标轴myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }]});异步加载
$('#submit').click(function(){ var startTime = $("#start").val(); var endTime = $("#end").val(); var type = $('input:radio[name="type"]:checked').val(); $.post('/management/index.php?g=screen&m=index&a=proAjax', { start:startTime, end:endTime, type:type },function(data){ myChart.setOption({ xAxis: { data: data.category }, series: [{ // 根据名字对应到相应的系列 name: '日新增项目量', data: data.data }] }); }); })
对应/management/index.php?g=screen&m=index&a=proAjax的方法---基于thinkphp
public function proAjax(){ $chart = $this->selectPro();//获取数据 $this->ajaxReturn($chart,'JSON'); }
注:异步加载中data的数据是数组,不是字符串
2 3
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- ECharts官方教程(五)【异步数据加载和更新】
- echarts异步数据加载(在下拉框选择事件中异步更新数据)
- Echarts使用心得总结——异步数据加载与更新(二)
- Echarts使用心得总结——异步数据加载与更新(二)
- echarts 条形图异步加载数据
- echarts关系图异步加载数据
- echarts中饼图的异步数据加载绘制
- echarts模拟从数据库异步加载数据
- echarts异步加载多组数据
- echarts异步加载柱状图数据叠加
- echarts异步数据加载使用总结
- Echarts折柱图异步加载
- Echarts扩展之ajax异步加载tooltip数据
- Echarts使用心得总结——异步数据加载
- CodeForces 685A 686C Robbers' watch
- springMVC+mybatils+maven问题备忘
- jqGrid 跨页选择
- shiro 内置过滤器 标签 注解
- html表格样式
- echarts异步数据加载和更新
- log4.xml控制台输入,文件不写入问题解决
- 提高PHP代码质量36计
- CentOS网络配置
- javascript实现css主题样式切换;动态改变引入的css文件;
- UITableView优化
- QT实现软件重启
- 机器学习常用模型概览
- 关于Spring的69个面试问答