Echarts饼状图数据动态获取

首先肯定是引入echarts的相关jar包，地址：https://www.echartsjs.com/zh/download.html

你可以引入在线定制生成的jar包，如下图所示：

然后接下来就自己在线定制吧。

划红线的一定要定义，没有定义饼状图的大小，是看不到图表的。

var AlarmEcharts = echarts.init(document.getElementById('ConcentratorAlarmEcharts'));AlarmEcharts.setOption({title: {text: '告警饼状图',subtext: '告警统计',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: [],},series: [{name: '全国集中器',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});

ajax动态获取：

var name = [];var value = [];//异步加载$.ajax({url : basePath + 'Alarm/getAlarmEcharts.action',async : false,cache : true,dataType : 'json',type : 'POST',data : {admin : admin},success : function(data) {/*var arrname = JSON.stringify(data.name);var arrvalue = JSON.stringify(data.value);var keyname = JSON.parse(arrname);var keyvalue = JSON.parse(arrvalue);console.log(keyname);*/for(var i = 0; i < data.name.length && i < data.value.length; i++){name.push(data.name[i]);value.push({value : data.value[i],name : data.name[i],});}console.log(data.name.length);AlarmEcharts.setOption({legend : {data : name,},series : [ {data : value,} ]});},error : function() {console.log("饼状图数据获取失败！");}});

注意：后台获取的数据一定要再定义数组来存放，不然就会出错。我就吃过这个亏，一直想，数据什么的都没问题啊。咋会出现legend没渲染，且显示的饼状图也不正确。

我的ssm方法：

// 获取饼状图显示数据@RequestMapping(value = "getAlarmEcharts.action")public @ResponseBody Map<String,Object> getAlarmEcharts(String admin) {Map<String,Object> map = new HashMap<String,Object>();List<Concentrator> list = concentratorService.getAllConcentratorData();String name[] = new String[list.size()];int data[] = new int[list.size()];for(int i = 0; i < list.size(); i++){name[i] = "集中器:" + list.get(i).getcId();data[i] = alarmService.countTimesByCID(Integer.valueOf(list.get(i).getcId()));}map.put("name", name);map.put("value", data);return map;}

这样就可以完美显示饼状图了。

Echarts饼状图数据动态获取相关推荐

echarts饼状图数据过多时，数据叠加(问题篇)
1.问题如下图所示 2.解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数selected: {}, // 决定图表中显示的个数处理后台取到的数据 // ...
【eCharts】echarts饼状图数据重叠导致指示线及显示文字重叠解决
1. 解决前 2.解决后 3.代码 function makePie(id, title, name, data, show) {if (!show) {show = false;}var myCha ...
FusionChart实现柱状图、饼状图的动态数据显示附Demo
最近做的项目中需要用饼状图显示--'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...

Echarts饼状图数据动态获取

Echarts饼状图数据动态获取相关推荐

最新文章

热门文章