效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>卓越智能运营平台-集团</title>
<link rel="stylesheet" href="/resources/catl3/css/style.css">
<script src="/resources/catl3/js/lib/jquery-3.3.1.min.js"></script>
<script src="/resources/catl3/js/lib/echarts.min.js"></script>
<script src="/resources/catl3/js/lib/moment.js"></script>
<script src="/resources/catl3/js/lib/vue.js"></script>
<script>
function buildModularOne_1() {
$("#modularOne_1").css("background-color", "")
var rows = main.modularOne_1.rows
var bar1Data = []
var arr1 = []
var arr2 = []
var arr3 = []
for (var key in rows) {
var cache = []
for (var i = 0; i < rows[key].length; i++) {
cache.push(rows[key][i].bar * 10)
}
if (key == "2016") {
arr1 = cache
}
if (key == "2018") {
arr2 = cache
}
if (key == "2019") {
arr3 = cache
}
}
var modularOne_1 = echarts.init(document.getElementById('modularOne_1'));
var lineStyle = {
normal: {
width: 1,
opacity: 10
}
};
var option = {
radar: {
nameGap: 0,
indicator: [
{name: 'HD', max: 100},
{name: 'YB', max: 100},
{name: 'GZ', max: 100},
{name: 'XP', max: 100},
{name: 'QH', max: 100},
{name: 'SD', max: 100},
{name: 'LY', max: 100},
{name: 'HX', max: 100}
],
shape: 'polygon',
radius: 70,
splitNumber: 6,
name: {
textStyle: {
color: '#73A7CD'
}
},
splitLine: {
show: true,
lineStyle: {
color: [
'#ffff', '#ffff',
'#ffff', '#ffff',
'#ffff', '#09447A'
].reverse()
}
},
splitArea: {
show: false,
areaStyle: {
color: '#73A7CD',
},
},
axisLine: {
lineStyle: {
color: '#09447A'
}
}
},
series: [
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr1
],
symbol: 'none',
itemStyle: {
normal: {
color: '#f1ff31'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr2
],
symbol: 'none',
itemStyle: {
normal: {
color: '#00E8FE'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr3
],
symbol: 'none',
itemStyle: {
normal: {
color: '#02E26F'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
]
};
modularOne_1.setOption(option);
}
function buildModularOne_2() {
$("#modularOne_2").css("background-color", "")
var rows = main.modularOne_2.rows
var bar1Data = []
var arr1 = []
var arr2 = []
var arr3 = []
for (var key in rows) {
var cache = []
for (var i = 0; i < rows[key].length; i++) {
cache.push(rows[key][i].bar * 10)
}
if (key == "2016") {
arr1 = cache
}
if (key == "2018") {
arr2 = cache
}
if (key == "2019") {
arr3 = cache
}
}
var modularOne_2 = echarts.init(document.getElementById('modularOne_2'));
var lineStyle = {
normal: {
width: 1,
opacity: 10
}
};
var option = {
radar: {
nameGap: 0,
indicator: [
{name: 'HD', max: 100},
{name: 'YB', max: 100},
{name: 'GZ', max: 100},
{name: 'XP', max: 100},
{name: 'QH', max: 100},
{name: 'SD', max: 100},
{name: 'LY', max: 100},
{name: 'HX', max: 100}
],
shape: 'polygon',
radius: 70,
splitNumber: 6,
name: {
textStyle: {
color: '#73A7CD'
}
},
splitLine: {
show: true,
lineStyle: {
color: [
'#ffff', '#ffff',
'#ffff', '#ffff',
'#ffff', '#09447A'
].reverse()
}
},
splitArea: {
show: false,
areaStyle: {
color: '#73A7CD',
},
},
axisLine: {
lineStyle: {
color: '#09447A'
}
}
},
series: [
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr1
],
symbol: 'none',
itemStyle: {
normal: {
color: '#f1ff31'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr2
],
symbol: 'none',
itemStyle: {
normal: {
color: '#00E8FE'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
{
type: 'radar',
lineStyle: lineStyle,
data: [
arr3
],
symbol: 'none',
itemStyle: {
normal: {
color: '#02E26F'
}
},
areaStyle: {
normal: {
opacity: 0.4
}
}
},
]
};
modularOne_2.setOption(option);
}
function buildModularTwo() {
$("#modularTwo").css("background-color", "")
var modularTwo = echarts.init(document.getElementById('modularTwo'));
var rows = main.modularTwo.rows
var chartData = main.modularTwo.chartData
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
left: 45,
top: 25,
right: 25,
bottom: 25
},
legend: {
show: true,
top: '0%',
left: '18%',
itemWidth: 20,
itemHeight: 5,
itemGap: 10,
data: ['数据1', '数据2', '数据3', '数据4'],
textStyle: { // 图例的公用文本样式。
fontSize: 13,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 100,
min: 0,
maxInterval: 100 / 10,
minInterval: 100 / 10,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = (parseInt(params / (18000 / 10)) % 2 == 0 ? params : "")
return data + "%"
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
max: 5,
min: 0,
maxInterval: 5 / 5,
minInterval: 5 / 5,
splitNumber: 5,
axisLabel: {
formatter: '{value}',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
}
],
series: [
{
name: '数据1',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
},
{
name: '数据2',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#E6CA90'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#D9776B'}, //柱图渐变色
]
)
}
},
data: bar1Data
},
{
name: '数据3',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#2DB194'
}
},
data: lineData
},
{
name: '数据4',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#cfd034'
}
},
data: line1Data
}
]
}
modularTwo.setOption(option);
}
function buildModularThree_1() {
$("#modularThree_1").css("background-color", "")
var row = main.modularThree_1.rows[0]
var v = row.pie
var v1 = 100 - v
var modularThree_1 = echarts.init(document.getElementById('modularThree_1'));
var option = {
series: [{
type: 'pie',
startAngle: 210, // 环图起始位置：正下发
radius: ['85%', '115%'],
center: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: '产品故障率',
value: v,
label: {
normal: {
fontSize: 12,
color: '#ffff',
fontWeight: 'bolder'
}
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24a6de'
},
{
offset: 1,
color: '#2DF2FE'
}
]
},
shadowColor: 'rgba(34,192,245,0.1)',
shadowBlur: 10
}
}
}, {
name: '未满足率',
value: v1,
label: {
normal: {
show: false,
fontSize: 0
}
},
itemStyle: {
normal: {
color: 'rgba(47,47,47,0.91)'
},
emphasis: {
color: 'rgba(47,47,47,0.91)'
}
},
hoverAnimation: false
}, {
name: '占框',
value: 50,
label: {
normal: {
show: false,
fontSize: 0
}
},
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, 0)'
},
emphasis: {
color: 'rgba(255, 255, 255, 0)'
}
},
hoverAnimation: false
}
]
}]
};
modularThree_1.setOption(option)
}
function buildModularThree_2() {
$("#modularThree_2").css("background-color", "")
var modularThree_2 = echarts.init(document.getElementById('modularThree_2'));
var row = main.modularThree_2.rows[0]
var v = row.pie
var v1 = 100 - v
var option = {
series: [{
type: 'pie',
startAngle: 210, // 环图起始位置：正下发
radius: ['85%', '115%'],
center: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
name: '客诉次数',
value: v,
label: {
normal: {
fontSize: 12,
color: '#ffff',
fontWeight: 'bolder'
}
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#A262F7'
},
{
offset: 1,
color: '#DC89D7'
}
]
},
shadowColor: 'rgba(34,192,245,0.1)',
shadowBlur: 10
}
}
}, {
name: '未满足率',
value: v1,
label: {
normal: {
show: false,
fontSize: 0
}
},
itemStyle: {
normal: {
color: 'rgba(47,47,47,0.91)'
},
emphasis: {
color: 'rgba(47,47,47,0.91)'
}
},
hoverAnimation: false
}, {
name: '占框',
value: 50,
label: {
normal: {
show: false,
fontSize: 0
}
},
itemStyle: {
normal: {
color: 'rgba(255, 255, 255, 0)'
},
emphasis: {
color: 'rgba(255, 255, 255, 0)'
}
},
hoverAnimation: false
}
]
}]
};
modularThree_2.setOption(option)
}
function buildModularThree_3() {
$("#modularThree_3").css("background-color", "")
var modularThree_3 = echarts.init(document.getElementById('modularThree_3'));
var rows = main.modularThree_3.rows
var chartData = main.modularThree_3.chartData
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; ++i) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
x: 45,
y: 20,
x2: 25,
y2: 25
},
legend: {
show: true,
top: '-3%',
left: '15%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1', 'item2', 'item3'],
textStyle: { // 图例的公用文本样式。
fontSize: 15,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 10,
min: 0,
maxInterval: 10 / 5,
minInterval: 10 / 5,
splitNumber: 5,
axisLabel: {
formatter: '{value}.0%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
max: 20,
min: 0,
maxInterval: 20 / 5,
minInterval: 20 / 5,
splitNumber: 5,
axisLabel: {
formatter: '{value}',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
],
series: [
{
name: 'item1',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#E6CA90'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#D9776B'}, //柱图渐变色
]
)
}
},
data: bar1Data
},
{
name: 'item2',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
},
{
name: 'item3',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#2DB194'
}
},
data: lineData
},
]
};
modularThree_3.setOption(option);
}
function buildModularFour() {
$("#modularFour").css("background-color", "")
var rows = main.modularFour.rows
var chartData = main.modularFour.chartData
var barData = []
var lineData = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
lineData.push(null)
barData.push(row.bar)
lineData.push(row.line)
} else {
barData.push(row.bar)
lineData.push(row.line)
}
}
var modularFour = echarts.init(document.getElementById('modularFour'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
left: 50,
right: 40,
top: 20,
bottom: 45
},
legend: {
show: true,
top: '0%',
left: '22%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['耗电量', '耗气量'],
textStyle: { // 图例的公用文本样式。
fontSize: 13,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 18000,
min: 10,
maxInterval: 18000 / 10,
minInterval: 18000 / 10,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = (parseInt(params / (18000 / 10)) % 2 == 0 ? params : "")
return data
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 13,
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
max: 15,
min: 0,
splitNumber: 5,
maxInterval: 3,
minInterval: 3,
axisLabel: {
formatter: '{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF',
fontSize: '13'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
// type:'solid',
// type:'dashed',
color: '#fff',
width: 1,
type: 'dotted',
},
},
}
],
series: [
{
name: '耗电量',
type: 'bar',
barWidth: '15',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#11DCEA'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#1BD5F4'}, //柱图渐变色
]
)
}
},
data: barData,
},
{
name: '耗气量',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#98BA36'
}
},
data: lineData
}
]
}
modularFour.setOption(option);
}
function buildModularFive() {
$("#modularFive").css("background-color", "")
var modularFive = echarts.init(document.getElementById('modularFive'));
var rows = main.modularFive.rows
var chartData = main.modularFive.chartData
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
left: 55,
right: 40,
top: 20,
bottom: 45
},
legend: {
show: true,
top: '0%',
left: '22%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1', 'item2', 'item3'],
textStyle: { // 图例的公用文本样式。
fontSize: 13,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 100000,
min: 10,
maxInterval: 100000 / 10,
minInterval: 100000 / 10,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = (parseInt(params / (100000 / 10)) % 2 == 0 ? params : "")
return data
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 13,
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
max: 15,
min: 0,
splitNumber: 5,
maxInterval: 3,
minInterval: 3,
axisLabel: {
formatter: '{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF',
fontSize: '13'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
// type:'solid',
// type:'dashed',
color: '#fff',
width: 1,
type: 'dotted',
},
},
}
],
series: [
{
name: 'item1',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
},
{
name: 'item2',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#E6CA90'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#D9776B'}, //柱图渐变色
]
)
}
},
data: bar1Data
},
{
name: 'item3',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#2DB194'
}
},
data: line1Data
}
]
}
modularFive.setOption(option);
}
function buildModularSix() {
$("#modularSix").css("background-color", "")
var modularSix = echarts.init(document.getElementById('modularSix'));
var rows = main.modularSix.rows
var chartData = main.modularSix.chartData
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
left: 50,
right: 40,
top: 20,
bottom: 45
},
legend: {
show: true,
top: '0%',
left: '22%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1', 'item2', 'item3'],
textStyle: { // 图例的公用文本样式。
fontSize: 13,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
interval: 0,
show: true,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 18000,
min: 0,
maxInterval: 18000 / 10,
minInterval: 18000 / 10,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = (parseInt(params / (18000 / 10)) % 2 == 0 ? params : "")
return data
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 13,
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
max: 15,
min: 0,
splitNumber: 5,
maxInterval: 3,
minInterval: 3,
axisLabel: {
formatter: '{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF',
fontSize: '13'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
// type:'solid',
// type:'dashed',
color: '#fff',
width: 1,
type: 'dotted',
},
},
}
],
series: [
{
name: 'item1',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
},
{
name: 'item2',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#E6CA90'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#D9776B'}, //柱图渐变色
]
)
}
},
data: bar1Data
},
{
name: 'item3',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#2DB194'
}
},
data: line1Data
}
]
}
modularSix.setOption(option);
}
function buildModularSeven_1() {
$("#modularSeven_1").css("background-color", "")
var modularSeven_1 = echarts.init(document.getElementById('modularSeven_1'));
var rows = main.modularSeven_1.rows
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
x: 35,
y: 20,
x2: 25,
y2: 25
},
legend: {
show: true,
top: '-3%',
left: '15%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1'],
textStyle: { // 图例的公用文本样式。
fontSize: 15,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 5,
min: 0,
maxInterval: 1,
minInterval: 1,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = ((params) % 2 != 0 ? params : "")
return (params == 0 ? params : data)
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
}
],
series: [
{
name: 'item1',
type: 'bar',
barWidth: '15',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
}
]
};
modularSeven_1.setOption(option);
}
function buildModularSeven_2() {
$("#modularSeven_2").css("background-color", "")
var modularSeven_2 = echarts.init(document.getElementById('modularSeven_2'));
var rows = main.modularSeven_2.rows
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
grid: {
x: 35,
y: 20,
x2: 25,
y2: 25
},
legend: {
show: true,
top: '-3%',
left: '15%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1'],
textStyle: { // 图例的公用文本样式。
fontSize: 15,
color: '#fff'
}
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: '#FFFFFF',
},
fontSize: 13,//字体大小
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '1'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 10,
min: 0,
maxInterval: 2,
minInterval: 2,
splitNumber: 5,
axisLabel: {
formatter: function (params) {
var data = ((params) % 2 == 0 ? Math.ceil(params) : "")
return data
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
}
],
series: [
{
name: 'item1',
type: 'bar',
barWidth: '15',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#04D5B8'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData,
}
]
};
modularSeven_2.setOption(option);
}
function buildModularEight_1() {
$("#modularEight_1").css("background-color", "rgba(255, 255, 255, 0) ")
var rows = main.modularEight_1.rows
var chartData = main.modularEight_1.chartData
var barData = []
var lineData = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
lineData.push(null)
barData.push(row.bar)
lineData.push(row.line)
} else {
barData.push(row.bar)
lineData.push(row.line)
}
}
barData = barData.reverse()
var ModularEight_1 = echarts.init(document.getElementById('modularEight_1'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '40',
right: '30',
top: '0',
bottom: '25',
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.010],
axisLine: { //y轴
show: false,
lineStyle: {
color: '#fff',//左边线的颜色
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
type: 'category',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '2'//坐标线的宽度
}
},
data: ['XP', 'GZ', 'YB', 'QH', 'SD', 'LY', 'HX', 'HD', '', '2018', '2019']
},
series: [
{
name: '2012年',
type: 'bar',
barWidth: '10',
barCategoryGap: '10%',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#93C4EF', '#01BDFE', '#03ADE3'],
['#E4963F', '#D86F67', '#CE4C89'],
['#E4963F', '#D86F67', '#CE4C89']
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: colorList[index][0]},
{offset: 0.5, color: colorList[index][1]},
{offset: 1, color: colorList[index][2]}
]);
},
}
},
data: barData
}
]
};
ModularEight_1.setOption(option);
}
function buildModularEight_2() {
$("#modularEight_2").css("background-color", "rgba(255, 255, 255, 0) ")
var rows = main.modularEight_2.rows
var chartData = main.modularEight_2.chartData
var barData = []
var lineData = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
lineData.push(null)
barData.push(row.bar)
lineData.push(row.line)
} else {
barData.push(row.bar)
lineData.push(row.line)
}
}
barData = barData.reverse()
var ModularEight_2 = echarts.init(document.getElementById('modularEight_2'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '40',
right: '30',
top: '0',
bottom: '25',
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.010],
axisLine: { //y轴
show: false,
lineStyle: {
color: '#fff',//左边线的颜色
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
type: 'category',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '2'//坐标线的宽度
}
},
data: ['XP', 'GZ', 'YB', 'QH', 'SD', 'LY', 'HX', 'HD', '', '2018', '2019']
},
series: [
{
name: '2012年',
type: 'bar',
barWidth: '10',
barCategoryGap: '10%',
itemStyle: {
normal: {
color: function (params) {
var colorList = [
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#4F60E5', '#01BDFE', '#03ADE3'],
['#E4963F', '#D86F67', '#CE4C89'],
['#E4963F', '#D86F67', '#CE4C89']
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{offset: 0, color: colorList[index][0]},
{offset: 0.5, color: colorList[index][1]},
{offset: 1, color: colorList[index][2]}
]);
},
}
},
data: barData
}
]
};
ModularEight_2.setOption(option);
}
function buildModularNine() {
$("#modularNine").css("background-color", "")
var modularNine = echarts.init(document.getElementById('modularNine'));
var rows = main.modularNine.rows
var chartData = main.modularNine.chartData
var bar1Data = []
var barData = []
var lineData = []
var line1Data = []
for (var i = 0; i < rows.length; i++) {
var row = rows[i]
if (i == 2) {
barData.push(null)
bar1Data.push(null)
lineData.push(null)
line1Data.push(null)
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
} else {
bar1Data.push(row.bar1)
barData.push(row.bar)
line1Data.push(row.line1)
lineData.push(row.line)
}
}
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#FFFF'
}
}
},
legend: {
show: true,
top: '30',
left: '30%',
itemWidth: 40,
itemHeight: 5,
itemGap: 10,
data: ['item1', 'item2', 'item3', 'item4'],
textStyle: { // 图例的公用文本样式。
fontSize: 15,
color: '#fff'
}
},
grid: {
x: 40,
y: 80,
x2: 45,
y2: 40
},
xAxis: [
{
type: 'category',
data: ['2018', '2019', '', 'HD', 'YB', 'GZ', 'XP', 'QH', 'SD', 'LY', 'HX'],
axisPointer: {
type: 'line'
},
axisLine: {
lineStyle: {
color: '#fff',//左边线的颜色
width: '2'//坐标线的宽度
}
},
}
],
yAxis: [
{
type: 'value',
max: 18000,
min: 0,
maxInterval: 18000 / 10,
minInterval: 18000 / 10,
axisLabel: {
formatter: function (params) {
var data = (parseInt(params / (18000 / 10)) % 2 == 0 ? params : "")
return data
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
},
{
type: 'value',
min: 0,
axisLabel: {
formatter: '{value} %',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#FFFF'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff' //更改坐标轴颜色
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#fff',
width: 1,
},
},
}
],
series: [
{
name: 'item1',
type: 'bar',
barCategoryGap: '10%',
barWidth: '30',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#01E3FF'}, //柱图渐变色
{offset: 0.5, color: '#01BDFE'}, //柱图渐变色
{offset: 1, color: '#0374FF'}, //柱图渐变色
]
)
}
},
data: barData
},
{
name: 'item2',
type: 'bar',
barWidth: '30',
barCategoryGap: '10%',
barGap: '20%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{offset: 0, color: '#7EF4B0'}, //柱图渐变色
{offset: 0.5, color: '#4FE9C6'}, //柱图渐变色
{offset: 1, color: '#25E3DF'}, //柱图渐变色
]
)
}
},
data: bar1Data
},
{
name: 'item3',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#e4ff54',
}
},
data: lineData
},
{
name: 'item4',
type: 'line',
yAxisIndex: 1,
itemStyle: {
normal: {
color: '#4dff46',
}
},
data: line1Data
}
]
};
modularNine.setOption(option);
}
</script>
</head>
<body>
<div class="cont" id="app123">
<div class="title">
<h1>卓越智能运营平台-集团</h1>
<img src="/resources/catl3/images/logo.png" alt="">
<span>2019-12-05<br>14:14:14</span>
<div class="breath">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="breath breath2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<!-- 内容 Start -->
<table class="cont-table">
<tr>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度PR排名</h3>
<h4>PR（%）&PR达成率（%）</h4>
<div class="pr-cont">
<p>2018 PR：61.6%<br>2018 PR达成率：97.8%</p>
<div id="modularOne_1" style="background-color:rgba(255,255,255,0.2)">{{ modularOne_1.title }}</div>
</div>
<div class="pr-cont">
<p>2018 PR：61.6%<br>2018 PR达成率：97.8%</p>
<div id="modularOne_2" style="background-color:rgba(255,255,255,0.2)">{{ modularOne_2.title }}</div>
</div>
</td>
<td colspan="2" rowspan="2">
<div id="modularNine" class="echart-large" style="background-color:rgba(255,255,255,0.2)">{{
modularNine.title }}
</div>
</td>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度安全排名</h3>
<h4>二级工伤数（次）&一级火警数（次）</h4>
<div id="modularEight_1" class="echart-half-l" style="background-color:rgba(255,255,255,0.2)">{{
modularEight_1.title }}
</div>
<div id="modularEight_2" class="echart-half-r" style="background-color:rgba(255,255,255,0.2)">{{
modularEight_2.title }}
</div>
</td>
</tr>
<tr>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度效率排名</h3>
<h4>产能利用率（%）&设备故障率（%）</h4>
<div id="modularTwo" class="echart-all"
style="width: 455px;height: 250px;left: 6px;background-color:rgba(255,255,255,0.2)">{{
modularTwo.title }}
</div>
</td>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度CPS排名</h3>
<h4>CPSA检查（分）&CPS扫描（分）</h4>
<div id="modularSeven_1" class="echart-half-t"
style="width: 450px;height: 127px;bottom: 0px;right: 12px;background-color:rgba(255,255,255,0.2)">
{{ modularSeven_1.title }}
</div>
<div id="modularSeven_2" class="echart-half-b"
style="width: 450px;height: 127px;bottom: 10px;right: 12px;background-color:rgba(255,255,255,0.2)">
{{ modularSeven_2.title }}
</div>
</td>
</tr>
<tr>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度质量排名</h3>
<h4>产品故障率（%）&客诉次数（次）</h4>
<div class="echart-half-t">
<div id="modularThree_1" style="height:95px;background-color:rgba(255,255,255,0.2)">{{
modularThree_1.title }}
</div>
<div id="modularThree_2" style="height:95px;background-color:rgba(255,255,255,0.2)">{{
modularThree_2.title }}
</div>
</div>
<div id="modularThree_3" class="echart-half-b"
style="background: aqua;width: 450px;height: 145px;right: 15px;bottom:20px;background-color:rgba(255,255,255,0.2)">
{{ modularThree_3.title }}
</div>
</td>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度能耗排名</h3>
<h4>耗电量（MKwh）&耗气量（Mm³）</h4>
<div id="modularFour" class="echart-all"
style="width:455px;height:270px;left: 8px;background-color:rgba(255,255,255,0.0)">{{
modularFour.title }}
</div>
</td>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度交付排名</h3>
<h4>计划达成率（%）&下仓数（EA）</h4>
<div id="modularFive" class="echart-all"
style="width:455px;height:270px;left: 8px;background-color:rgba(255,255,255,0.0)">{{
modularFive.title }}
</div>
</td>
<td>
<embed src="/resources/catl3/images/cont-bg.svg" style="display:block;"/>
<h3>集团月度人力排名</h3>
<h4>总人数（人）&流失率（%）</h4>
<div id="modularSix" class="echart-all"
style="width:455px;height:270px;left: 8px;background-color:rgba(255,255,255,0.0)">{{
modularSix.title }}
</div>
</td>
</tr>
</table>
<!-- 内容 End -->
</div>
<!-- 数据VUE -->
<script>
var main = new Vue({
el: '#app123',
data: {
modularOne_1: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularOne_1",
build: "buildModularOne_1()",
title: "modularOne_1"
},
modularOne_2: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularOne_2",
build: "buildModularOne_1()",
title: "modularOne_2"
},
modularTwo: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularTwo",
build: "buildModularTwo()",
title: "modularTwo"
},
modularThree_1: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularThree_1",
build: "buildModularThree_1()",
title: "modularThree_1"
},
modularThree_2: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularThree_2",
build: "buildModularThree_2()",
title: "modularThree_2"
},
modularThree_3: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularThree_3",
build: "buildModularThree_3()",
title: "modularThree_3"
},
modularFour: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularFour",
build: "buildModularFour()",
title: "modularFour"
},
modularFive: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularFive",
build: "buildModularFive()",
title: "modularFive"
},
modularSix: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularSix",
build: "buildModularSix()",
title: "modularSix"
},
modularSeven_1: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularSeven_1",
build: "buildModularSeven_1()",
title: "modularSeven_1"
},
modularSeven_2: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularSeven_2",
build: "buildModularSeven_2()",
title: "modularSeven_2"
},
modularEight_1: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularEight_1",
build: "buildModularEight_1()",
title: "modularEight_1"
},
modularEight_2: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularEight_2",
build: "buildModularEight_2()",
title: "modularEight_2"
},
modularNine: {
rows: [],
chartData: [],
url: "../eiomp/dashboard/modularNine",
build: "buildModularNine()",
title: "modularNine"
},
},
methods: {
getDataOne_1: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularOne_1",
dataType: "json",
success: function (data) {
main.modularOne_1.rows = data.rows;
buildModularOne_1()
}
});
},
getDataOne_2: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularOne_2",
dataType: "json",
success: function (data) {
main.modularOne_2.rows = data.rows;
buildModularOne_2()
}
});
},
getDataTwo: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularTwo",
dataType: "json",
success: function (data) {
main.modularTwo.rows = data.rows;
buildModularTwo()
}
});
},
getDataThree_1: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularThree_1",
dataType: "json",
success: function (data) {
main.modularThree_1.rows = data.rows;
buildModularThree_1()
}
});
},
getDataThree_2: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularThree_2",
dataType: "json",
success: function (data) {
main.modularThree_2.rows = data.rows;
buildModularThree_2()
}
});
},
getDataThree_3: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularThree_3",
dataType: "json",
success: function (data) {
main.modularThree_3.rows = data.rows;
buildModularThree_3()
}
});
},
getDataFour: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularFour",
dataType: "json",
success: function (data) {
main.modularFour.rows = data.rows;
buildModularFour()
}
});
},
getDataFive: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularFive",
dataType: "json",
success: function (data) {
main.modularFive.rows = data.rows;
buildModularFive()
}
});
},
getDataSix: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularSix",
dataType: "json",
success: function (data) {
main.modularSix.rows = data.rows;
buildModularSix()
}
});
},
getDataSeven_1: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularSeven_1",
dataType: "json",
success: function (data) {
main.modularSeven_1.rows = data.rows;
buildModularSeven_1()
}
});
},
getDataSeven_2: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularSeven_2",
dataType: "json",
success: function (data) {
main.modularSeven_2.rows = data.rows;
buildModularSeven_2()
}
});
},
getDataEight_1: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularEight_1",
dataType: "json",
success: function (data) {
main.modularEight_1.rows = data.rows;
buildModularEight_1()
}
});
},
getDataEight_2: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularEight_2",
dataType: "json",
success: function (data) {
main.modularEight_2.rows = data.rows;
buildModularEight_2()
}
});
},
getDataNine: function () {
$.ajax({
type: "GET",
url: "../eiomp/dashboard/modularNine",
dataType: "json",
success: function (data) {
main.modularNine.rows = data.rows;
buildModularNine()
}
});
}
}
});
setInterval(function () {
main.getDataOne_1()
main.getDataOne_2()
main.getDataTwo()
main.getDataThree_1()
main.getDataThree_2()
main.getDataThree_3()
main.getDataFour()
main.getDataFive()
main.getDataSix()
main.getDataSeven_1()
main.getDataSeven_2()
main.getDataEight_1()
main.getDataEight_2()
main.getDataNine()
}, 3000)
</script>
</body>
</html>
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
