getIndexDate()
/* ajax请求数据 */
// setInterval(getIndexDate(), 1000)
// ajax请求
function getIndexDate(queryParam = {}) {
ajaxRequest(INDEX_LIST, "POST", queryParam, function(result) {
/* 饼图 */
(function() {
//饼图数据赋值
var pie = result.pie;
$("#loading").empty()
var totalNum = 0;
pie.forEach(function(value) {
totalNum += value.value;
})
/* 饼图初始化 */
var myChartPie = echarts.init(document.querySelector(".pie-bar .chart"));
optionPie = {
grid: {
// width:'20%'
},
title: [{
//text: '{name|3800}\n{val|设备总数}',
text: '{name|' + totalNum + '}\n{val|设备总数}',
top: 'center',
left: 'center',
textStyle: {
rich: {
name: {
fontSize: 25,
fontWeight: 'normal',
color: '#37FF01',
},
val: {
fontSize: 14,
fontWeight: 'bold',
color: '#02DDF2',
}
}
}
}],
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name + ':' + params.value + '
占比:' + params.percent.toFixed(2) + '%'
}
},
series: [{
label: {
"normal": {
"show": true,
"formatter": ' {b}:{c} '
},
"emphasis": {
"show": true
}
},
name: '访问来源',
radius: ['45%', '60%'],
type: 'pie', // 设置图表类型为饼图
// data: []
data: pie,
}],
color: ['#EAF665', '#FF5801', '#6F99FA']
};
myChartPie.setOption(optionPie);
window.addEventListener("resize", function() {
myChartPie.resize();
});
})();
/* 柱状图 */
(function() {
//bar柱状图 赋值
var bar = result.bar
var barName = []
var barValue = []
for (var key in bar) {
barName.push(key)
barValue.push(bar[key])
}
/* 柱状图初始化*/
var myChartBar = echarts.init(document.querySelector(".pie.chart"));
var optionBar = {
grid: {
left: '4%',
bottom: '16%',
top: '15',
// height: "70%",
// right: '4%',
containLabel: true
},
tooltip: {
trigger: 'axis',
formatter: "{b}
{c}",
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
textStyle: {
"color": "red",
"fontSize": 14 //20 14 15字体大小
},
//"color": ["#63caff", "#49beff", "#03387a"],
color: ["rgba(0,212,233,.2)", "rgba(0,212,233,.2)"],
xAxis: {
"nameTextStyle": {
"color": "#c0c3cd",
"padding": [0, 0, -10, 0],
"fontSize": 100
},
"axisLabel": {
"color": "#c0c3cd",
"fontSize": 14,
"interval": 0
},
"axisLine": {
"show": false
},
// "data": [],
"data": barName,
"type": "category"
},
yAxis: {
show: false
},
series: [{
// "data": [20, 40, 15],
"data": barValue,
"type": "bar",
"barMaxWidth": "auto",
"barWidth": 20,
"itemStyle": {
"color": '#00D4E9',
'barBorderRadius': [30, 30, 0, 0],
},
"label": { //aa标签数值
"show": true,
"position": "top",
"distance": 10, //标签数值的距离 20 40 15
"color": "#fff"
}
}, {
"data": [100, 100, 100],
"type": "bar",
"barMaxWidth": "auto",
"barWidth": 20,
"barGap": "-100%",
"zlevel": -1
}, ],
};
myChartBar.setOption(optionBar);
window.addEventListener("resize", function() {
myChartBar.resize();
});
})();
/* 折线图 */
(function() {
//折线图数据赋值
var line = result.line;
var lineData = [];
for (var key in line) {
for (const key2 in line[key]) {
lineData.indexOf
}
}
var lineDate = []
var seriesData = []
for (var key in line) {
var lineKey = [];
for (var date in line[key]) {
if ($.inArray(date, lineDate) == -1) {
lineDate.push(date)
}
lineKey.push(line[key][date])
}
seriesData.push({ 'name': key, 'data': lineKey });
}
// console.log(seriesData)
/* 折线图初始化 */
var myChart = echarts.init(document.querySelector(".line .chart"));
var option = {
legend: {
itemGap: 20, // 图例每项之间的间隔。
icon: 'stack',
padding: 0, // 图例内边距
textStyle: {
color: '#fff',
align: 'center',
},
},
color: ['#6F99FA', '#FF5801', '#EAF665'],
grid: {
bottom: '0',
right: '10',
left: '10',
top: '35',
containLabel: true,
},
tooltip: {
trigger: 'axis',
confine: true,
textStyle: {
fontSize: 12
}
},
xAxis: {
type: "category",
boundaryGap: false,
// data: ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
data: lineDate,
"axisLabel": {
"color": "#c0c3cd",
},
"axisLine": {
lineStyle: {
color: 'rgba(0,130,255,.2)'
}
},
axisTick: {
show: false
},
},
yAxis: {
type: "value",
"axisLabel": {
"color": "#c0c3cd",
},
axisTick: {
show: false
},
"axisLine": {
lineStyle: {
color: 'rgba(0,130,255,.2)'
}
},
"splitLine": {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
},
series: [{
// name: "火灾",
name: seriesData[0].name,
type: "line",
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(111,153,250,0.3)'
},
{
offset: 1,
color: 'rgba(111,153,250,0)'
}
], false),
shadowColor: 'rgba(111,153,250, 0.9)',
shadowBlur: 20
}
},
data: seriesData[0].data
//data: [1, 5, 8, 3, 3, 5]
}, {
// name: "水系统",
name: seriesData[1].name,
type: "line",
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,88,1,0.3)'
},
{
offset: 1,
color: 'rgba(255,88,1,0)'
}
], false),
shadowColor: 'rgba(255,88,1, 0.9)',
shadowBlur: 20
}
},
//data: [9, 5, 3, 7, 6, 3]
data: seriesData[1].data
}, {
//name: "烟雾",
name: seriesData[2].name,
type: "line",
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(234,246,101,0.3)'
},
{
offset: 1,
color: 'rgba(234,246,101,0)'
}
], false),
shadowColor: 'rgba(234,246,101, 0.9)',
shadowBlur: 20
}
},
data: seriesData[1].data
//data: [4, 6, 3, 9, 7, 3]
}]
};
myChart.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
/* 横向柱状图 */
(function() {
var pie = result.warning;
var totalNum = pie.wait_handle + pie.is_handled;
var data = [totalNum, pie.is_handled, pie.wait_handle]
var myChartWaring = echarts.init(document.querySelector(".right-top .chart"));
option = {
grid: {
// width: '100%',
top: '15%',
right: '10%',
bottom: '0%',
left: '10%'
},
color: ['#6F99FA', '#EAF665', '#FF5801'],
xAxis: [{
show: false,
max: totalNum ? totalNum : 100,
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
axisLabel: {
verticalAlign: 'bottom',
align: 'left',
padding: [0, 0, 15, 5],
textStyle: {
color: '#FFFFFF',
}
},
data: ['总报警数', '已处置数', '待处置数'],
},
{
//左侧柱状图的Y轴
axisTick: 'none',
axisLine: 'none',
// data: [1357, 1260, 36],
data: data,
axisLabel: {
show: true,
verticalAlign: 'bottom',
align: 'right',
padding: [0, 15, 15, 0],
textStyle: {
color: '#fff',
},
formatter: function(value) {
return value + '个'
}
}
},
],
series: [{
type: 'bar',
// data: [1357, , ],
data: [totalNum, , ],
barWidth: 10,
itemStyle: {},
z: 2
}, {
type: 'bar',
// data: [, 1260, ],
data: [, pie.is_handled, ],
barWidth: 10,
itemStyle: {},
z: 2
}, {
type: 'bar',
// data: [, , 36],
data: [, , pie.wait_handle],
barWidth: 10,
itemStyle: {},
z: 2
},
{
type: 'bar',
barGap: '-100%',
// data: [1054, 1054, 1054],
// data: [totalNum, totalNum, totalNum],
data: totalNum ? [totalNum, totalNum, totalNum] : [100, 100, 100],
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, 0.15)',
// barBorderRadius: 6,
}
},
z: 0
},
]
};
myChartWaring.setOption(option);
window.addEventListener("resize", function() {
myChartWaring.resize();
});
})();
// 设备隐患
(function() {
var colorGroup = ['color-green', 'color-red', 'color-yellow', 'color-blue'];
var handle = result.handle
var items = '';
handle.forEach(function(item, key) {
items += '
' + item.value + '
' + item.name + '