本次的难点在于交叉传数据,又要把四组20个不同日期 显示上!

先看效果图:

数据传递方式:图

function func_echarts_2ba() {
var echarts_2bar = echarts.init(document.getElementById('id_echarts_2bar'));
echarts_2bar.option_2bar = {
title: { subtext: '单位:GJ', x: 'right', top: -12, subtextStyle: { "fontSize": 12, "fontFamily": "Microsoft YaHei", "color": "#444" } },
color: ['#FF0000', '#87cefa', '#61a0a8', '#d48265', '#91c7ae'],
//tooltip: {
// trigger: 'item',
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// }
//}, //legend: {
// data: ['最近第1天', '最近第2天', '最近第3天', '最近第4天', '最近第5天'],
// align: 'right',
// right: 10
//},
grid: {
height: 160,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLabel:{
interval:0//横轴信息全部显示
//rotate:-30,//-30度角倾斜显示
} ,
data: ['五官科医院', '虹桥能源站', '虹桥2号能源站', '浦东东方医院'],
}],
yAxis: [{
type: 'value',
name: '',
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '最近第1天',
type: 'bar', barWidth: 10, data:[]
// data: [3900, 12, 31, 34, 31]
}, {
name: '最近第2天',
type: 'bar', barWidth: 10,
data:[]
// data: [4230, 20, 5, 9, 3]
}, {
name: '最近第3天',
type: 'bar', barWidth: 10,
data:[]
// data: [5590, 1, 2, 3, 1]
},
{
name: '最近第4天',
type: 'bar', barWidth: 10,
data:[]
// data: [5590, 2, 3, 1, 0.5]
},
{
name: '最近第5天',
type: 'bar', barWidth: 10,
data:[]
// data: [3600, 2, 3, 1, 0.5]
}
]
};
echarts_2bar.setOption(echarts_2bar.option_2bar);
$.ajax({
type: "post",
url: ajaxurl,
data:
{
async: false,
operate: "echarts_2bar"
},
dataType: "json", //返回数据形式为json
success: function (result) {
echarts_2bar.setOption(
{
tooltip: {
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name;
//for (var i = 0, l = params.length; i < l; i++) {
if (params[0].name == "虹桥能源站") {
relVal += '<br/>' + formatMonth(result[5].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[6].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[7].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[8].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[9].stat_dayofmonth) + ' : ' + params[4].value;
} else if (params[0].name == "虹桥2号能源站") {
relVal += '<br/>' + formatMonth(result[10].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[11].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[12].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[13].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[14].stat_dayofmonth) + ' : ' + params[4].value;
} else if (params[0].name == "浦东东方医院") {
relVal += '<br/>' + formatMonth(result[15].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[16].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[17].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[18].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[19].stat_dayofmonth) + ' : ' + params[4].value;
} else {
relVal += '<br/>' + formatMonth(result[0].stat_dayofmonth) + ' : ' + params[0].value;
relVal += '<br/>' + formatMonth(result[1].stat_dayofmonth) + ' : ' + params[1].value;
relVal += '<br/>' + formatMonth(result[2].stat_dayofmonth) + ' : ' + params[2].value;
relVal += '<br/>' + formatMonth(result[3].stat_dayofmonth) + ' : ' + params[3].value;
relVal += '<br/>' + formatMonth(result[4].stat_dayofmonth) + ' : ' + params[4].value;
} return relVal;
}
},
series: [
{ data: [JSON.stringify(result[0].heat_supply), JSON.stringify(result[5].heat_supply),JSON.stringify(result[10].heat_supply),
JSON.stringify(result[15].heat_supply) ] }, { data: [JSON.stringify(result[1].heat_supply),
JSON.stringify(result[6].heat_supply),
JSON.stringify(result[11].heat_supply),
JSON.stringify(result[16].heat_supply)] },
{
data: [JSON.stringify(result[2].heat_supply),
JSON.stringify(result[7].heat_supply),
JSON.stringify(result[12].heat_supply),
JSON.stringify(result[17].heat_supply)] },
{ data: [JSON.stringify(result[3].heat_supply),
JSON.stringify(result[8].heat_supply),
JSON.stringify(result[13].heat_supply),
JSON.stringify(result[18].heat_supply)] },
{ data: [JSON.stringify(result[4].heat_supply),
JSON.stringify(result[9].heat_supply),
JSON.stringify(result[14].heat_supply),
JSON.stringify(result[19].heat_supply)] }
]
})
},
error: function (errorMsg) { }
});
}
function formatMonth(val) {
if (val.length == 8) {
return val.substr(4, 2) + "月" + val.substr(6,2) + "日";
} else {
return val;
}
}

Echarts 有点难度的柱状图的更多相关文章

  1. echarts 圆形图、柱状图

    首先引入echarts的js包 <script type="text/javascript" src="js/esl.js"></script ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

    今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...

  4. Echarts动态加载柱状图和折线图混合展示的实例

    一.引入echarts文件: <script type="text/javascript" src="echarts.js"></script ...

  5. Echarts动态加载柱状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  6. Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

  7. [echarts] 同指标对比柱状图

    需求:对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率 http://echarts.baidu.com/echarts2/doc/example/bar1.html option = ...

  8. echarts入门1【柱状图/饼图】

    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...

  9. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

随机推荐

  1. jquery点击页面其他位置隐藏div

    $("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...

  2. ADV拍卖

    #include <stdio.h> int ren,wuping; int qian[20]; int wu1[20],wu2[20],wu3[20]; int a[20],visit[ ...

  3. SQL Server 根据树状结构表生成以/号分割的路由字符串

    很多情况下,我们有必要把树形结构进行数据梳理.比如,要方便的过滤出一个父节点下的所有子节点等等... 这个时候,我们可以生成一个路径表字符串,在应用时只需要对该字符串进行索引即可达成目的. 目标:按图 ...

  4. [CSS3] 边栏导航动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  6. Myeclipse修改项目名称发布后web Context root名称无法修改

    选中项目,右键--->Properties--->在搜索框搜索:deployment as  然后点击显示出的搜索项.修改右侧视图的Web Context Root名称即可. 如图:

  7. Unicode字符串索引

    一.目标 在通讯录中,我们有很多联系人,需要把这些联系人进行索引.对于每一个索引项对应的若干字符串,需要对这些字符串进行排序. 需要解决两个问题: 如何确定某个汉字应该被哪个字符索引? 某个索引项对应 ...

  8. 浅析Postgres中的并发控制(Concurrency Control)与事务特性(下)

    上文我们讨论了PostgreSQL的MVCC相关的基础知识以及实现机制.关于PostgreSQL中的MVCC,我们只讲了元组可见性的问题,还剩下两个问题没讲.一个是"Lost Update& ...

  9. css中代码格式以及@import的语法结构

    CSS中代码格式 CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范分析一个典型CSS的语句: p ...

  10. 39.oracle高级篇

    标题说是高级篇,其实也就是相对于基础篇来说的,也不是很深奥,自己平时工作中也都会用到,这里回忆的并不是特别冷门的知识,不要掉以轻心,以为“高级”就觉得工作中不会用到了. 一.select into 和 ...