// 折线图定制 (数据离散率挖掘1)
(function() {
var sortData = [{
sortName: "三相电压",
data: [
// 两个数组是因为有两条线
[30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".divergence .chart1"));
// 2.指定配置
var option = {
color: [{
colorStops: [{
offset: 0,
color: '#F9860C' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#07E1F1' // 0% 处的颜色
}, {
offset: 1,
color: '#0456CB' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#11F90C' // 0% 处的颜色
}, {
offset: 1,
color: '#3FC713' // 100% 处的颜色
}],
}
],
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitNumber: 8,
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
}
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "方差",
type: "line",
data: sortData[0].data[0]
},
{
symbol: "none",
name: "标准差",
type: "line",
data: sortData[0].data[1]
}, {
symbol: "none",
name: "平均值",
type: "line",
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 数据离散率挖掘2
(function() {
var sortData = [{
sortName: "三相电流",
data: [
// 两个数组是因为有两条线
[143, 19, 34, 40, 64, 191, 324, 290, 330, 310, 131, 165, 123, 178, 21, 82, 64, 43, 60, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".divergence .chart2"));
// 2.指定配置
var option = {
color: [{
colorStops: [{
offset: 0,
color: '#F9860C' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#07E1F1' // 0% 处的颜色
}, {
offset: 1,
color: '#0456CB' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#11F90C' // 0% 处的颜色
}, {
offset: 1,
color: '#3FC713' // 100% 处的颜色
}],
}
],
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitNumber: 8,
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
}
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "方差",
type: "line",
data: sortData[0].data[0]
},
{
symbol: "none",
name: "标准差",
type: "line",
data: sortData[0].data[1]
}, {
symbol: "none",
name: "平均值",
type: "line",
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 数据离散率挖掘3
(function() {
var sortData = [{
sortName: "三相电流",
data: [
// 两个数组是因为有两条线
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[131, 165, 123, 178, 21, 82, 64, 43, 60, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".divergence .chart3"));
// 2.指定配置
var option = {
color: [{
colorStops: [{
offset: 0,
color: '#F9860C' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#07E1F1' // 0% 处的颜色
}, {
offset: 1,
color: '#0456CB' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#11F90C' // 0% 处的颜色
}, {
offset: 1,
color: '#3FC713' // 100% 处的颜色
}],
}
],
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitNumber: 8,
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
}
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "方差",
type: "line",
data: sortData[0].data[0]
},
{
symbol: "none",
name: "标准差",
type: "line",
data: sortData[0].data[1]
}, {
symbol: "none",
name: "平均值",
type: "line",
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 数据离散率挖掘4
(function() {
var sortData = [{
sortName: "三相电流",
data: [
// 两个数组是因为有两条线
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ],
[120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".divergence .chart4"));
// 2.指定配置
var option = {
color: [{
colorStops: [{
offset: 0,
color: '#F9860C' // 0% 处的颜色
}, {
offset: 1,
color: '#fff' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#07E1F1' // 0% 处的颜色
}, {
offset: 1,
color: '#0456CB' // 100% 处的颜色
}],
},
{
colorStops: [{
offset: 0,
color: '#11F90C' // 0% 处的颜色
}, {
offset: 1,
color: '#3FC713' // 100% 处的颜色
}],
}
],
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
{a2}: {c2}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitNumber: 8,
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
}
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "方差",
type: "line",
data: sortData[0].data[0]
},
{
symbol: "none",
name: "标准差",
type: "line",
data: sortData[0].data[1]
}, {
symbol: "none",
name: "平均值",
type: "line",
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 折线图定制 (电老化分析1)
(function() {
var sortData = [{
sortName: "异常设备",
data: [
// 两个数组是因为有两条线
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
},
];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".oldAnalysis .chart1"));
// 2.指定配置
var option = {
color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "电流",
type: "line",
smooth: true, // true 可以让我们的折线显示带有弧度
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(255,156,0, 0.4)"
},
{
offset: 0.8,
color: "rgba(255,156,0, 0.3)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[0]
},
{
symbol: "none",
name: "电压",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(0,150,255,0.5)"
},
{
offset: 0.8,
color: "rgba(0,150,255, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[1]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 折线图定制 (电老化分析2)
(function() {
var sortData = [{
sortName: "漏电告警",
data: [
// 两个数组是因为有两条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
]
}];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".oldAnalysis .chart2"));
// 2.指定配置
var option = {
color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}
{a1}: {c1}
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "电流",
type: "line",
smooth: true, // true 可以让我们的折线显示带有弧度
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(255,156,0, 0.4)"
},
{
offset: 0.8,
color: "rgba(255,156,0, 0.3)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[0]
},
{
symbol: "none",
name: "电压",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(0,150,255,0.5)"
},
{
offset: 0.8,
color: "rgba(0,150,255, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
data: sortData[0].data[1]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();
// 折线图定制 (热老化分析)
(function() {
var sortData = [{
data: [
// 三个数组是因为有3条线
[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
[24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
]
}];
var xData = function() {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i);
}
return data;
}();
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".hotAnalysis .chart1"));
// 2.指定配置
var option = {
color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
tooltip: {
trigger: "axis",
textStyle: {
align: 'left' //图例左对齐
},
backgroundColor: '#12DFE0',
formatter: '{a0}: {c0}°C
{a1}: {c1}°C
{a2}: {c2}°C
时间:2021年3月{b}日'
},
legend: {
// 如果series 对象有name 值,则 legend可以不用写data
itemGap: 20,
itemHeight: 2,
itemWidth: 15,
icon: 'rect',
textStyle: {
color: "#fff"
},
top: "bottom",
},
grid: {
top: "0%",
left: "1%",
right: "1%",
bottom: "15%",
show: true, // 显示边框
borderWidth: '0', //去除边框
containLabel: true // 包含刻度文字在内
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: "#AADDFF" // 文本颜色
},
axisLine: {
show: false // 去除轴线
}
},
yAxis: {
type: "value",
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
show: false // 去除文本
},
axisLine: {
show: false // 去除轴线
},
splitLine: {
lineStyle: {
color: "#012f4a" // 分割线颜色
}
}
},
series: [{
symbol: "none",
name: "线缆产生的温度",
type: "line",
smooth: true, // true 可以让我们的折线显示带有弧度
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(5,238,231,.6)"
},
{
offset: 0.8,
color: "rgba(5,238,231, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[0]
},
{
symbol: "none",
name: "环境温度",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(153,153,255,.6)"
},
{
offset: 0.8,
color: "rgba(153,153,255, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[1]
},
{
symbol: "none",
name: "线缆温度",
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1, [{
offset: 0,
color: "rgba(255,147,180,.6)"
},
{
offset: 0.8,
color: "rgba(255,147,180, 0.4)"
}
],
false
),
}
},
data: sortData[0].data[2]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
})();