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的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- 转JMeter ----数据库 not allowed to connect to this MySQL
测试的时候遇到报错: Cannot create PoolableConnectionFactory (null, message from server: "Host 'ceshiP ...
- Sqoop 介绍、安装及环境配置
一.Sqoop Sqoop介绍 Sqoop是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.oracle...)间进行数据的传递,可以将一个关系型数据库中的数据导进到Ha ...
- hadoop发行版本之间的区别
Hadoop是一个能够对大量数据进行分布式处理的软件框架. Hadoop 以一种可靠.高效.可伸缩的方式进行数据处理.Hadoop的发行版除了有Apache hadoop外cloudera,horto ...
- 写了一个hiero中添加自定义Token的脚本
Hiero自带Token往往不够用,shotname中自带版本号的情况下要升级版本会很麻烦,比如Shot_0001_v001这样一个序列名,要升级为Shot_0001_v002就必须把_v001之前的 ...
- apache配置https协议
安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...
- 前端之js-echarts组件介绍
Echarts.init: 全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('echarts') 获得. < ...
- js跨域调用mvc ActionResult扩展
背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...
- git clone 指定分支 拉代码
1.git clone 不指定分支 git clone http://10.1.1.11/service/tmall-service.git 2.git clone 指定分支 git clone -b ...
- [翻译]Restful Web服务模型
最近我一直在阅读“Rest实践”的草稿:一本几位同事一直在努力编写的书. 他们的目的是解释如何使用Restful Web服务来处理企业面临的许多集成问题. 这本书的核心在于这样一种观点,Web以一个有 ...
- 利用itext导出PDF的小例子
我这边使用的jar包: itext-2.1.7.jar itextasian-1.5.2.jar 代码,简单的小例子,导出pdf: PdfService.java: package com.cy.se ...