ajax echart mysql饼图_Echarts通过Ajax动态获取后端数据（饼状图，柱状图）

ajax动态赋值echarts饼图

Document

.html {

width: 100%;

height: 100%;

overflow: hidden;

}

.box {

width: 100%;

height: 100%;

}

#main1 {

width: 600px;

height: 500px;

float: left;

}

#main2 {

width: 50%;

height: 50%;

float: left;

}

var main1 = echarts.init(document.getElementById('main1'));

var names = [];

var mydate = [];

$.ajax({

method: 'get',

url: './list.json',

dataType: 'json',

success: function (result) {

for (var i = 0; i < result.date.length; i++) {

// console.log(result.date.length)

// console.log(result.date[i].name)

names.push(result.date[i].name);

console.log(names)

mydate[i] = { value: result.date[i].num, name: result.date[i].name };

console.log(mydate)

}

main1.setOption({

title: {

text: '城市人数分布图',

left: 'left'

},

tooltip: {

trigger: 'item',

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

},

legend: {

icon: "rect",//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none

itemWidth: 10, // 设置宽度

itemHeight: 10, // 设置高度

itemGap: 10, // 设置间距

align: "left",

show: true,

left: 'right', //位置

data: names,

textStyle: {

//文字样式

color: "#9b9fae",

fontSize: "12"

}

},

series: [

{

name: '所占比例',

type: 'pie',

radius: '55%',

center: ['50%', '60%'],

data:mydate,

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

},

}

}

]

});

}

});

其中的关键代码是：

mydate[i] = { value: result.date[i].num, name: result.date[i].name };

定义一个数组为names，在 legend中通过 data: names传入图例名称；

创建一个数组mydata[]，用for循环把后台传来的List整个放进去(注意格式为“{value:xxx, name:xxx}”)，在option里的series中通过“data: mydata”传入即可；

ajax动态赋值echarts饼图

Document

.html {

width: 100%;

height: 100%;

overflow: hidden;

}

.box {

width: 100%;

height: 100%;

}

#main1 {

width: 600px;

height: 500px;

float: left;

}

#main2 {

width: 600px;

height: 500px;

float: left;

}

var main2 = echarts.init(document.getElementById('main2'));

var names = [];

var nums = [];

$.ajax({

method:'get',

url:'./list.json',

dataType:'json',

success:function(res){

for (var i = 0; i < res.date.length; i++) {

names.push(res.date[i].name);

nums.push(res.date[i].num);

}

console.log(names)

console.log(nums)

main2.setOption({

title: {

text: '案件处理分析图',

left: 'left'

},

legend: {

icon: "rect",//形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none

itemWidth: 10, // 设置宽度

itemHeight: 10, // 设置高度

itemGap: 10, // 设置间距

align: "left",

show: true,

left: 'right', //位置

textStyle: {

//文字样式

color: "#9b9fae",

fontSize: "12"

}

},

color: ['#3398DB'],

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [

{

type: 'category',

data: names,

axisTick: {

alignWithLabel: true

}

}

],

yAxis: [

{

type: 'value'

}

],

series: [

{

name: '人数统计',

type: 'bar',

barWidth: '30%',

data: nums

}

]

});

}

})