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的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- mysql查询各个知识点
临时表 group by http://www.ywnds.com/?p=10174 https://blog.csdn.net/wuseyukui/article/details/72627667 ...
- apache HTML5 History 模式 配置
说明 使用的 Apache/2.4.6 版本. 文档这么写的: 但是 没说 IfModule 放在哪里 . httpd.conf 里面有大量的 IfModule . 这样的.但是实测 无效.无 ...
- spring boot 项目 热启动
第一需要 spring-boot-devtools 依赖 <dependency> <groupId>org.springframework.boot</groupId& ...
- irc使用教程
下面介绍几个IRC名词:NICKNAME (或nick) 昵称.在命令中可以表示你本人或者其他聊天客.#CHANNEL (或#chan) 频道.聊天室房间名字.房间名字前面一定要加 # 符号.服务器机 ...
- Request method 'POST' not supported
总是报错,原来是form表单的锅,赶紧删了.
- msp430学习笔记-TA
定时器,CCR2,CCR1三者共用一个中断向量 定时器A是一个16位的定时/计数器.它有3个捕获/比较寄存器:能支持多个时序控制.多个捕获/比较功能和多个PWM输出:有广泛的中断功能,中断可由计数器溢 ...
- STL基础--算法（已排序数据的算法，数值算法）
已排序数据的算法 Binary search, merge, set operations 每个已排序数据算法都有一个同名的更一般的形式 vector vec = {8,9,9,9,45,87,90} ...
- neo4j---删除关系和节点
本文转载自:https://blog.csdn.net/chenjf0221/article/details/70238695 删除节点和节点关系 MATCH (a:key)-[r:KEY_WORD] ...
- python之冒泡排序（一）
冒泡排序 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来. 遍历数列的工作是重复地进行直到没有再需要交换, ...
- Global配置接口访问日志以及测试日志记录
在客户端请求接口时,经常会出现接口相应慢,接口等待超时,接口错误,为了这事相信不少后台开发者为此背锅,记下请求日志,拿出有力证据这才是关键. 1.接口请求错误记录 很多时候接口请求出现的500,404 ...