echarts使用ajax接收数据并展示

首先找一个echarts实例

然后自己搭建环境运行

var lineChart = echarts.init(document.getElementById('event_pandect'),'macarons');（添加）option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};lineChart.setOption(linechart,true);  （添加）

这时候需要ajax从后端获取数据填充到图标中，我最开始的想法是直接将ajax嵌入到echarts代码中，然后在success中再将返回值data写入到echarts需要填充数据处。实践证明这样是不行的，解决：

我先贴出正确运行源码，然后讲下修改的地方。

 var option = {title : {text: '二级类型故障',subtext: '第'+week_num+'周数据',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"}};var names=[];$.ajax({type : "post",async : true,url : "/statistic/getNowEvents",data :{dept_id:dept_id,cmp_id:cmp_id,week_num:week_num},dataType : "json",        //返回数据形式为jsonsuccess : function(data) {for(var i=0;i<data.length;i++){names.push(data[i].name);    //挨个取出类别并填入类别数组}pieChart.hideLoading();    //隐藏加载动画pieChart.setOption({        //加载数据图表legend: {orient: 'vertical',left: 'left',data:names},series : [{name: '访问来源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:data,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});},error : function(errorMsg) {}});pieChart.setOption(option);

下方是需要动态添加数据的地方，将其抽离option中，然后使用后面代码进行包裹

然后调整前面代码：

最后的代码结构为：标记处为重点

完整原文：http://blog.maptoface.com/post/107

echarts使用ajax接收数据并展示相关推荐

Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
一.目前网上常用的解决方案 //将ajax封装起来启用一个定时器达到三秒抓一次数据 window.function(){setInterval(ajaxNew(),3000); } 存在的问题是,首次 ...
echarts框架下大数据量展示的解决方案
echarts+大数据量.这是个无解的问题! 大数据量,什么样的数据才算大呢?在echart 4.5.0版本中,画折线图,数据线一共1001000条,每条数据5002200个数据点,即最小数据5000 ...
ajax 获取数据并展示到前台
最近一直在研究ajax,今天终于有点眉目了,记录一下,方便以后查看首先建一个空的标签,用于展示数据然后就是js代码了,我用的是ajax ,需要引入js文件 <script>windo ...
[TimLinux] JavaScript AJAX接收到的数据转换为JSON格式
1. 接收数据 AJAX接收数据是通过xhr.responseText属性,这是一个属性不是一个方法,这个属性得到的数据为字符串. 2. 字符串内容当服务器发送的是一个JsonResponse({' ...
Ajax接收并展示后台传来的list集合内的数据信息
后台是springMVC,将查询的集合replies放进map,返回到前台. @RequestMapping("manage/queryTime")@ResponseBodypub ...
echarts html ajax,ECharts+Ajax动态加载数据实例（.NET）
什么是ECharts ECharts 是一个数据可视化工具,提供了系列常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折 ...
基于Spring MVC的ECharts动态数据实时展示
为什么80%的码农都做不了架构师?>>> 基于SpringMVC进行ECharts动态实时数据展示,ECharts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由 ...
Java中的Listener监听器与Ajax技术和Axios异步框架以及JSON传递接收数据
Listener监听器与Ajax Listener 概念 Listener 表示监听器,是 JavaWeb 三大组件(Servlet.Filter.Listener)之一. 监听器可以监听就是在 ap ...
前端接收后端返回的集合数据并展示
前端通过AJAX接收后端返回的数据我们想要实现的功能是:通过ajax接收后端传过来的list集合,然后将数据转换并在前端页面的表格中展示.经过两天的修改,终于探索出了代码.表格展示用的是elemen ...

echarts使用ajax接收数据并展示

echarts使用ajax接收数据并展示相关推荐

最新文章

热门文章