【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<res.length;i++){total += parseInt(res[i].value);}var option = {// 提示框组件，鼠标经过饼图时会出现提示框tooltip : {// 触发类型（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）trigger: 'item',// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。formatter: "{a} <br/>{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);});
}

<div class="cont cont01 box-border"><div class="con-gongdan">工单</div><div class="sub-tab" id="workOrderPie_id"></div><div class="sub-footer"><div class="tag">超 期</div><div class="tag-num" id="workOrderPie-overDate">8</div></div>
</div>

三、后台代码

@RequestMapping("/m/gongdan.do")
@ResponseBody
public JSONArray gongdan() {List<ValueNameForm> list = new ArrayList<ValueNameForm>();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();}
}

【Echarts教程】Ajax实现动态加载环状饼图相关推荐

java加载js_[Java教程]javascript如何动态加载js文件
[Java教程]javascript如何动态加载js文件 0 2016-01-01 00:00:52 javascript如何动态加载js文件: 有时候我们需要根据需要动态加载js文件,本章节就简单介 ...
Flask+jQuery：AJAX技术动态加载网页
hello,大家好,我是wangzirui32,今天我们来学习如何使用jQuery实现AJAX动态加载网页. 学习目录 1. 准备工作 1.1 搭建测试网站 1.2 数据文件 1.3 网页模板 1.4 ...
ajax 技术动态加载数据,jQuery结合Ajax实现动态加载数据【原创】
原先的页面如下: 要实现的效果图: 要实现的效果,就是点击"查看更多"按钮,动态加载五条数据.而点击"查看所有"时数据全部加载. 主要的思路: 1.点击按钮,发 ...
微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
ajax滚动条动态加载,下拉滚动条，动态加载ajax加载数据
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. var cur_page = 1; var page_size = 5; $(functi ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...
Echarts动态加载地图数据(Dynamic load Echarts map data)
本篇就是Echarts制作地图终篇啦,前面我们已经制作好自定义区域的地图,如何结合'数据'让地图根据我们的业务逻辑变得有"活力",这才是最重要的.Echarts官网中给的demo大 ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...

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

【Echarts教程】Ajax实现动态加载环状饼图相关推荐

最新文章

热门文章