ajax echart mysql饼图_【Echarts教程】Ajax实现动态加载环状饼图

一、GIF图

二、前台码// 调用方法

workOrderPie();

// 定时刷新

setInterval(function () {

workOrderPie();

},5000);

function workOrderPie(){

// 初始化图表元素

var workOrderPie = echarts.init(document.getElementById('workOrderPie_id'));

$.get('${pageContext.request.getContextPath()}/m/gongdan.do', function (res) {

// 工单数量

var total = 0;

// 超期数量计算

var chaoqi = parseInt(res[1].value) - parseInt(res[0].value);

$('#workOrderPie-overDate').html(chaoqi);

for(var i=0;i

total += parseInt(res[i].value);

}

var option = {

// 提示框组件，鼠标经过饼图时会出现提示框

tooltip : {

// 触发类型(数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用)

trigger: 'item',

// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

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

},

// 图例组件

legend: {

// 是否显示

show: true,

// 纵向显示

orient: 'vertical',

// 放在左边

left: 'left',

// 内容

data: ['户内','户外'],

// 样式

textStyle:{

color: '#66ffff'

}

},

// 系列列表

series : [

{

// 图表类型

type: 'pie',

// 饼图的半径，数组的第一项是内半径，第二项是外半径

radius : ['70%', '50%'],

// 饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标

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

// 回调数据

data: res,

// 图形样式

itemStyle: {

emphasis: {

// 图形阴影的模糊大小

shadowBlur: 10,

// 阴影水平方向上的偏移距离

shadowOffsetX: 0,

// 阴影颜色

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

}

},

// 饼图图形上的文本标签

label:{

// 是否显示

show:true,

// 字体大小

fontSize:12,

// 字体颜色

color: defaultColor,

// 格式化，如：户内 56.1%

formatter: '{b}\n {d}%'

}

}

],

// 是原生图形元素组件

graphic:{

// 类型

type:'text',

style:{

// 显示的文字

text:'工单数量\n'+total,

// 对齐方式

textAlign:'center',

// 横坐标偏移

x:110,

// 纵坐标偏移

y:75,

// 字号

fontSize:14,

// 颜色

fill: defaultColor

}

},

// 饼图各扇形块颜色

color: ['rgb(255,246,143)','rgb(72,118,255)']

};

workOrderPie.setOption(option);

});

}

工单

超 期

8

三、后台代码@RequestMapping("/m/gongdan.do")

@ResponseBody

public JSONArray gongdan() {

List list = new ArrayList();

int huwai = 10 + new Random().nextInt(10);

list.add(new ValueNameForm("户外", huwai));

int hunei = 20 + new Random().nextInt(10);

list.add(new ValueNameForm("户内", hunei));

return JSONArray.fromObject(list);

}

数据格式：[{"value":16, "name":"户外"},{"value":22, "name":"户内"}]public class ValueNameForm {

private String name;

private int value;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getValue() {

return value;

}

public void setValue(int value) {

this.value = value;

}

public ValueNameForm(String name, int value) {

super();

this.name = name;

this.value = value;

}

public ValueNameForm() {

super();

}

}

本文来源于网络：查看 >https://blog.csdn.net/alex_fung/article/details/79878883