echarts使用ajax接收数据并展示 |
您所在的位置：网站首页 › ajax数据渲染到页面怎么设置 › echarts使用ajax接收数据并展示 |
echarts使用ajax接收数据并展示
|
首先找一个echarts实例 然后自己搭建环境运行 var lineChart = echarts.init(document.getElementById('event_pandect'),'macarons');（添加） option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} {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} {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", //返回数据形式为json success : function(data) { for(var i=0;i |
【本文地址】
今日新闻 |
推荐新闻 |