Ajax+Echarts动态添加成组柱状图
因公司项目原因，最近需要用到ECharts，按照官网的实例以及试验，完成了需求的报表效果图：首先先去官网下载要开发的组件，ECharts还是非常厉害的。话不多说，先上前端代码前端只要一个div做容器，其他都是相关参数。然后就是JS，在点击按钮时运行以下// 路径配置require.config({ paths: { ech
·
因公司项目原因，最近需要用到ECharts，按照官网的实例以及试验，完成了需求的报表
效果图：
首先先去官网下载要开发的组件，ECharts还是非常厉害的。话不多说，先上前端代码
<head>
<script src="echarts/echarts.js" type="text/javascript"></script>
<script src="echarts/echarts.min.js" type="text/javascript"></script>
<script src="echarts/jquery-3.2.1.min.js" type="text/javascript"></script>
</head><body>
<input id="Dt" name="Dt" value="2017-12-12" />
<button id="check" type="button">
<div id="main" style="height: 510px;">
</body>// 路径配置
require.config({
paths: {
echarts: 'echarts'
}
});
require(
[
'echarts',
'echarts/chart/bar' // bar/lin/tree
],
function(ec) {
var myChart1 = ec.init(document.getElementById('main'));
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
var avg = divWidth / 25;
var relVal = params[0].name + "<br/>";
for (var i = 1; i < params.length; i++) {这里是鼠标悬浮显示的内容
relVal += params[i].seriesName + ' : ' + (params[i].value / avg).toFixed(1) + "H<br/>";
}
return relVal;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
show: false,
min: 0,
max: divWidth
},
{
type: 'category',
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00",
"15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00"],
show: true
}
],
yAxis: {
type: 'category',
splitLine: { show: false },
data: ['OP10', 'OP20', '在线检测', '气密检测']
},
series: [
{
name: '辅助',辅助项其实是透明的，看起来第一段柱子从空中开始，其实是因为辅助顶起了第一段
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 0, 0, 0]如果都是0的话，那就从0处开始往右延长
},
{
name: '运行',
type: 'bar',
stack: '总量',
itemStyle: {
//通常情况下：
normal: {
color: 'green'
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'inside'
}
},
data: []
},
{
name: '故障',
type: 'bar',
stack: '总量',
itemStyle: {
//通常情况下：
normal: {
color: 'blue'//'rgb(164,205,238)'
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'inside'
}
},
data: []
},
{
name: '待机',
type: 'bar',
stack: '总量',
itemStyle: {
//通常情况下：
normal: {
color: 'yellow'//'rgb(195,229,235)'
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'inside'
}
},
data: []
},
{
name: '关机',
type: 'bar',
stack: '总量',
itemStyle: {
//通常情况下：
normal: {
color: 'red'//'rgb(195,229,135)'
},
//鼠标悬停时：
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
show: true,
position: 'inside'
}
},
data: []
}
]
};
$.ajax({Ajax读取后台数据库的数据
type: 'post',
url: 'EQStateHisHandler.ashx?action=QCBarChart&SelectDate=' + ddate + '&divWidth=' + divWidth,
data: {},
dataType: 'json',
async: false,
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {根据数据库的信息动态添加柱状图的柱子
var aa = result[i];
// 嵌套循环赋值
for (var j = 0; j < aa.ChectTimeList.length; j++) {
var seriesCount = option.series.length;
if (j < seriesCount) {
option.series[j].data[i] = aa.ChectTimeList[j];默认是四组数据，所以直接为ECharts赋值就行
} else {
var ckType = aa.ChectType[j];
var seriesName = '';
var itemStyle;
switch (ckType) {根据状态，选择要增加的柱子是什么颜色的，代表什么意思。
case 1:
seriesName = '运行';
itemStyle = {
normal: {
color: 'green'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
break;
case 2:
seriesName = '故障';
itemStyle = {
normal: {
color: 'blue'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
break;
case 3:
seriesName = '待机';
itemStyle = {
normal: {
color: 'yellow'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
break;
case 4:
seriesName = '关机';
itemStyle = {
normal: {
color: 'red'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
break;
}
var newSeries = {
data: [aa.ChectTimeList[j]],
name: seriesName,
type: 'bar',
stack: '总量',
itemStyle: itemStyle,
label: {
normal: {
show: true,
position: 'inside'
}
}
};
option.series.push(newSeries);将新的柱子项添加到报表中
}
}
}
myChart1.setOption(option);绑定并展示
}
},
error: function(errorMsg) {
alert("request data failed!!!");
}
});
}
);
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)