ECharts动态加载堆叠柱状图的实例
一、引入echarts.js文件（下载页:http://echarts.baidu.com/download.html）
二、HTML代码：
<div style="width: 100%; height: 400px;" id="main">
</div>
三、js代码（获取数据以及对数据的处理方法）：
function loadData(callback){
$.ajax({
url: 'test.json',
dataType: 'json',
success: function(data){
if(data == '' || data == null){
return;
}
var nameArr = [];
var totalGoalArr = [];
var totalRealArr = [];
var firstGoalArr = [];
var firstRealArr = [];
var secondGoalArr = [];
var secondRealArr = [];
var data = data.list;
for(var i = 0; i < data.length; i++){
var orgSn = data[i].orgSn; //获取列表的orgSn
var firstGoal = getTarget1(orgSn); //根据orgSn获取一类点规划量
var secondGoal = getTarget2(orgSn); //根据orgSn获取二类点规划量
var totalGoal = firstGoal + secondGoal; //总规划量 = 一类点规划量 + 二类点规划量
allData[data[i].orgName] = { //将得到的数据全部整合在allData对象中，在设置tooltip时方便使用
"totalGoal": totalGoal,
"totalReal":data[i].total,
"firstGoal ": firstGoal,
"firstReal": data[i].count1,
"secondGoal": secondGoal,
"secondReal": data[i].count2
}
nameArr.push(data[i].orgName); //将data列表中的orgName拼接在nameArr数组中，用于x轴数据的展示
//将通过orgSn获得的总规划量和data列表中的total值作比较，总规划量数组为totalGoal的集合。
//若前者大于后者，则未完成，未完成量为totalGoal - data[i].total,柱子颜色为白底红边；
//若后者大于前者，则超额完成，超额完成量为data[i].total - totalGoal，柱子颜色为蓝色
if(data[i].total < totalGoal){
totalGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(255, 0 , 0)'，
barBorderColor: 'rgb(255, 0, 0)'
}
},
value: totalGoal
});
totalRealArr.push({
itemStyle: {
normal: {
color: '#FFF'，
barBorderColor: 'rgb(254, 0 , 0)'
}
},
value: totalGoal - data[i].total
});
} else {
totalGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(86, 205 , 89)'，
barBorderColor: 'rgb(86, 205 , 89)'
}
},
value: totalGoal
});
totalRealArr.push({
itemStyle: {
normal: {
color: 'rgb(0, 135 , 237)'，
barBorderColor: 'rgb(0, 135 , 237)'
}
},
value: data[i].total - totalGoal
});
}
//将通过orgSn获得的一类点规划量和data列表中的count1值作比较，一类点规划量数组为firstGoal的集合。
//若前者大于后者，则未完成，未完成量为firstGoal - data[i].count1；
//若后者大于前者，则超额完成，超额完成量为data[i].count1 - firstGoal
if(data[i].count1 < fistGoal){
fistGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(255, 0 , 0)'，
barBorderColor: 'rgb(255, 0 , 0)'
}
},
value: data[i].count1
});
fistRealArr.push({
itemStyle: {
normal: {
color: '#FFF'，
barBorderColor: 'rgb(254, 0 , 0)'
}
},
value: fistGoal - data[i].count1
});
} else {
fistGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(86, 205 , 89)'，
barBorderColor: 'rgb(86, 205 , 89)'
}
},
value: fistGoal
});
fistRealArr.push({
itemStyle: {
normal: {
color: 'rgb(0, 135 , 237)'，
barBorderColor: 'rgb(0, 135 , 237)'
}
},
value: data[i].count1 - fistGoal
});
}
// 将通过orgSn获得的一类点规划量和data列表中的count1值作比较，一类点规划量数组为firstGoal的集合。
//若前者大于后者，则未完成，未完成量为firstGoal - data[i].count1；
//若后者大于前者，则超额完成，超额完成量为data[i].count1 - firstGoal
if(data[i].count2 < secondGoal){
secondGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(255, 0 , 0)'，
barBorderColor: 'rgb(255, 0 , 0)'
}
},
value: data[i].count2
});
secondRealArr.push({
itemStyle: {
normal: {
color: '#FFF'，
barBorderColor: 'rgb(254, 0 , 0)'
}
},
value: fistGoal - data[i].count2
});
} else {
fistGoalArr.push({
itemStyle: {
normal: {
color: 'rgb(86, 205 , 89)'，
barBorderColor: 'rgb(86, 205 , 89)'
}
},
value: secondGoal
});
secondRealArr.push({
itemStyle: {
normal: {
color: 'rgb(0, 135 , 237)'，
barBorderColor: 'rgb(0, 135 , 237)'
}
},
value: data[i].count2 - secondGoal
});
}
}
//回调函数，数据加载成功后再执行代表callback的函数
if(typeof callback == 'function'){
callback();
}
}
});
}
四、js方法（加载图表的方法）：
function initBarChart(){
var myChart = echarts.init(document.elementById('main'));
var option = {
title: {
text: '视频点位分类统计图',
x: 'center',
y: 'top'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' //默认为直线，可选'line | shadow'
},
position: 'top',
formatter: function(params){
return param[0].name
+"<br/>监控总指标量：" + allData[params[0].name]["totalGoal"]
+"<br/>监控总完成量：" + allData[params[0].name]["totalReal"]
+"<br/><br/>一类点规划量：" + allData[params[0].name]["firstGoal"]
+"<br/>一类点完成量：" + allData[params[0].name]["firstReal"]
+"<br/><br/>二类点规划量：" + allData[params[0].name]["secondGoal"]
+"<br/>二类点完成量：" + allData[params[0].name]["secondReal"]
}
},
legend: {
show: false
},
xAxis: [{
type: 'category',
top: 20,
axisTick: false, //
data: nameArr
}],
yAxis: [{
type: 'value',
axisTick: false, //不显示刻度
splitLine: false //不显示分割线
}],
series: [{
name: '监控总指标量',
type: 'bar',
barWidth: 10,
stack: 'total', //stack相同的柱子则堆叠在一起
data: totalGoalArr
}, {
name: '监控总完成量',
type: 'bar',
barWidth: 10,
stack: 'total',
data: totalRealArr
}, {
name: '一类点规划量',
type: 'bar',
barWidth: 10,
stack: 'first',
data: firstGoalArr
}, {
name: '一类点完成量',
type: 'bar',
barWidth: 10,
stack: 'first',
data: fiestRealArr
}, {
name: '二类点规划量',
type: 'bar',
barWidth: 10,
stack: 'second',
data: secondGoalArr
}, {
name: '二类点完成量',
type: 'bar',
barWidth: 10,
stack: 'second',
data: secondRealArr
}]
};
myChart.setOption(option);
}
五、js方法（调用这两个方法）：
loadData(initBarChart);
六、json文件：
{
list: [{
"orgName": "海曙",
"orgSn": "330203",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "青州",
"orgSn": "3302000",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "安徽",
"orgSn": "330205",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "贵州",
"orgSn": "330206",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "海曙",
"orgSn": "330207",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "杭州",
"orgSn": "330208",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "双基",
"orgSn": "330209",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "余姚",
"orgSn": "330201",
"total": 304,
"count1": 222,
"count2": 50
}, {
"orgName": "江干",
"orgSn": "330210",
"total": 304,
"count1": 222,
"count2": 50
}]
}
七、js方法（根据orgSn获取一类指标量的方法）：
function getTarget1(orgSn){
var target = 0;
switch(orgSn){
case "330203":
target = 100;
break;
case "3302000":
target = 139;
break;
case "330205":
target = 145;
break;
case "330206":
target = 56;
break;
case "330207":
target = 189;
break;
case "330208":
target = 166;
break;
case "330209":
target = 122;
break;
case "330201":
target = 339;
break;
case "330210":
target = 554;
break;
default:
break;
}
return target;
}
八、js方法（根据orgSn获取二类指标量的方法）：
function getTarget2(orgSn){
var target = 0;
switch(orgSn){
case "330203":
target = 300;
break;
case "3302000":
target = 239;
break;
case "330205":
target = 45;
break;
case "330206":
target = 156;
break;
case "330207":
target = 89;
break;
case "330208":
target = 66;
break;
case "330209":
target = 222;
break;
case "330201":
target = 239;
break;
case "330210":
target = 154;
break;
default:
break;
}
return target;
}
ECharts动态加载堆叠柱状图的实例的更多相关文章
- Echarts动态加载饼状图实例（二）
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
- js实现动态加载脚本的方法实例汇总
本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...
- Echarts动态加载柱状图和折线图混合展示的实例
一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...
- Echarts动态加载柱状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- Echarts动态加载饼状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- echarts动态加载数据无法更新series 无法更新图表
最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- webstorm版本2017.2开发stylus报错
style 部分声明的时候,要有lang和type属性. 前提是,已经npm安装了stylus,stylus-loader. <style lang='stylus' type='text/st ...
- Ionic 使用karma进行单元测试
1. 创建Ionic工程 ionic start projectname cd projectname 2.安装karma插件 npm install karma karma-jasmine karm ...
- 解决 Sublime text3 中文显示乱码问题【亲测可用】
一.安装包管理器 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码 import urllib.request,os; pf = 'Packag ...
- 阿里云香港B区通过IPV6规避Google验证码
最近买了阿里云香港B来FQ,然而被Google的验证码折磨的死去活来.四处查询,终于找到了一个合适的方案. 添加IPV6支持 阿里云香港是没有IPV6地址的,需要一个tunnel,这边使用HE.NET ...
- [转] openwrt关闭调试串口
转自: http://wiki.wrtnode.com/index.php?title=Release_UART/zh-cn 由于mt7620n只有一个UART lite接口,在原生的OpenWrt中 ...
- 【java】private关键字
private关键字(1)修饰成员:可以修饰成员变量和成员方法(2)特点:被private修饰的后的成员只能在本类中被访问 (3)private的应用:定义类的时候,当把成员变量给private修饰 ...
- IDE0022 使用方法的表达式主体
这错误提示意思应该是:推荐您将此方法改为用“表达式主体”形式实现 所谓表达式主体,是类似 public void DisplayName() => Console.WriteLine(ToStr ...
- JVM异常之：方法区溢出OutOfMemoryError: PermGen space
1.方法区溢出(Perm持久代溢出) 在jdk1.6及之前的版本中,常量池放在Perm区也即是方法区中,所以在jdk1.6版本中,常量池溢出可以说是方法区溢出. 示例一: 方法区溢出的示例见<J ...
- blog决定不用二级域名，改为二级目录
看了一篇文章,受益匪浅,到底是用二级域名还是二级目录?已转载到得闲佬设计. 分析了一下得闲佬设计的因素,因为得闲佬设计是小站,流量很小,而且更新文章频率也不大,没必要把流量分出去做一个独立的站点 所以 ...
- 用JavaScript来生成HTML
用JavaScript来生成HTML <style> table{ border-top: 1px #ff0000 solid; border-left: 1px #ff0000 soli ...