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的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- Qt开发问答
Qt开发问答 1, Difference between Dialog and widget and QMainWindow http://www.qtcentre.org/threads/3465- ...
- 2.初步认识Angular2
简述:一个完整的Angular应用主要由六个重要部分构成,分别是:组件,模板,指令,服务,依赖注入,和路由.这些组成部分各司其职,而又紧密协作. 其中,与用户直接打交互的是模板视图,它是构成组件的要素 ...
- Git-.gitignore配置
.gitignore文件配置:keil工程文件类型模板 # reference to Keil->help->µVision User's Guide->Appendix->B ...
- [转] openwrt关闭调试串口
转自: http://wiki.wrtnode.com/index.php?title=Release_UART/zh-cn 由于mt7620n只有一个UART lite接口,在原生的OpenWrt中 ...
- jquery.nicescroll.min.js滚动条使用方法
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...
- 使用influxQL进行数据检索(说明)
非官方:InfluxDB 基本命令操作文档 原地址:https://docs.influxdata.com/influxdb/v1.6/query_language/data_exploration/ ...
- sql Find_IN_SET 用法
字段以 1,2,3,4 格式存储的SELECT * from test where FIND_IN_SET('15',btype) GROUP_CONCAT + group_by
- 【web】之获取服务器tomcat下webapps目录路径
String realPath = req.getServletContext().getRealPath("/"); String realPathParent=(new Fil ...
- Netty Tutorial Part 1: Introduction to Netty [z]
Netty Tutorial, Part 1: Introduction to Netty Update: Part 1.5 Has Been Published: Netty Tutorial P ...
- 陷入了一个NGUI自适应的一个坑
自己对anchor的乱用.造成自己深陷anchor来搞自适应 耽误了太多的精力,最终也是回到正轨的途径 这期间浪费的太多精力了. 沉迷一件错误的事情过久 就 要果断的跳出 调整 . 但凡让自己觉得别扭 ...