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的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- “更新时间”字段的：ON UPDATE CURRENT_TIMESTAMP 含义
"更新时间"字段的:ON UPDATE CURRENT_TIMESTAMP 含义: 表示在数据库数据有更新的时候UPDATE_TIME的时间会自动更新(如果数据库数据值没有变化的话 ...
- java-jdbc数据库连接
web.xml:(web.xml) <!-- 加载spring容器 --> <context-param> <param-name>contextConfigLoc ...
- 记录一次linux删除mysql
service mysqld status service mysqld stop ps –ef | grep mysql perl-DBD-MySQL-4.013-3.el6.x86_64 //删除 ...
- java rsa 公钥加密
注意JAVA 的STRING .getBytes() 默认取的是操作系统的编码,最好统一UTF-8. -- /* * To change this license header, choose Lic ...
- Flask--路由备忘
路由: 路由传参route("/index/<userid>") def index(userid),参数数据类型的指定route("user/<int ...
- PHP 获取url里文件的扩展名
PHP 获取url地址中文件的扩展名 $url = 'http://www.abc.com/ab/cd/e.php?id=1&data=2#laowen';echo pathinfo( par ...
- [蓝桥杯]ALGO-84.算法训练_大小写转换
题目描述: 问题描述 编写一个程序,输入一个字符串(长度不超过20),然后把这个字符串内的每一个字符进行大小写变换,即将大写字母变成小写,小写字母变成大写,然后把这个新的字符串输出. 输入格式:输入一 ...
- C/C++基础----重载运算与类型转换
非成员版本 data1 + data2: operator+(data1, data2); 成员版本 data1 += data2: data1.operator+=(data2); 不建议的重载 逻 ...
- 1119.（重、错）Pre- and Post-order Traversals
题目大意: 给定一棵树的结点个数n,以及它的前序遍历和后序遍历,输出它的中序遍历: 如果中序遍历不唯一就输出No,且输出其中一个中序即可,如果中序遍历唯一就输出Yes,并输出它的中序 思路:(转载) ...
- PyQt—QTableWidget实现翻页功能
主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...