echarts pie ajax赋值,echart-pie-ajax

最新推荐文章于 2023-12-21 11:55:42 发布

weixin_39787057

最新推荐文章于 2023-12-21 11:55:42 发布

阅读量252

点赞数

文章标签： echarts pie ajax赋值

本文详细讲述了作者一周内如何使用ECharts创建酷炫的饼图，并通过AJAX将JSON数据动态加载到图表中，展示了从数据获取到前端实现的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个星期学习echart的pie图，因为它比highchart的要酷炫。

整整一个星期时间，终于把数据放了进去。

首先贴上echart代码

var echarts = function(data){

var

a=data

var m= {value:335,

name:'直接访问'};

var n= {value:310,

name:'邮件营销'};

var l= {value:234,

name:'联盟广告'};

var p= {value:135,

name:'视频广告'};

var o= {value:1548,

name:'搜索引擎'};

var

g=[m,n,l,p,o];

option = {

title : {

text: 'SSID',

subtext: '在线情况',

x:'center'

tooltip :

{

trigger: 'item',

formatter: "{a}

{b} : {c} ({d}%)"

legend: {

orient : 'vertical',

x : 'left',

data:a

toolbox:

{

show : true,

feature : {

mark :

{show: true},

dataView :

{show: true, readOnly: false},

magicType

: {

show:

true,

type: ['pie',

'funnel'],

option: {

funnel: {

'25%',

width:

'50%',

funnelAlign: 'left',

max:

1548

}

restore :

{show: true},

saveAsImage : {show: true}

}

calculable :

true,

series :

[

{

name:'data',

type:'pie',

radius :

'55%',

center:

['50%', '60%'],

data :

data

}

]

};

require.config({

paths:

{

echarts:

'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/pie' //

使用柱状图就加载bar模块，按需加载

function

(ec) {

基于准备好的dom，初始化echarts图表

var myChart =

ec.init(document.getElementByIdx_x('main'));

为echarts对象加载数据

myChart.setOption(option);

}

);};

$.ajax({

url:'getstacntgroupbyssid.php',

type:'post',

dataType:'json',

success:function(data){

echarts(data);

}

});

这里是前端的代码。里面的ajax已经弄好了。

ajax主要就是把先从前端的data中吧值拿出来，然后定义abcd什么的赋上去。然后再用ajax传值过去即可

后台数据只要名字对就可以了。其中我用的是json类型的数据。贴上代码