449 lines
12 KiB
JavaScript
449 lines
12 KiB
JavaScript
import * as echarts from "echarts";
|
||
import { h } from "vue";
|
||
|
||
export function realTimeLine(id, data) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChart = echarts.init(chartDom);
|
||
var Xdata = []
|
||
var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
|
||
'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
|
||
var colorList = [new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 187, 136, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(0, 187, 136, 0)",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(252, 125, 106, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(252, 125, 106, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(252, 223, 39, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(252, 223, 39, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(68, 214, 232, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(68, 214, 232, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(69, 224, 155, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(69, 224, 155, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(82, 188, 255, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(82, 188, 255, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(214, 162, 255, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(214, 162, 255, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 192, 111, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(255, 192, 111, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 156, 154, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(255, 156, 154, 0)",
|
||
},
|
||
],
|
||
false
|
||
), new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 156, 154, 0.50)",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(255, 156, 154, 0)",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
|
||
]
|
||
var list = []
|
||
var selList={}
|
||
var dataList = []
|
||
data.forEach((el, index) => {
|
||
Xdata.push(el.time)
|
||
|
||
el.value.forEach((el1, index1) => {
|
||
var containsIndex = dataList.findIndex(function (item) {
|
||
return item.name === el1.name;
|
||
});
|
||
if (containsIndex == -1) {
|
||
dataList.push({ name: el1.name, value: [] })
|
||
} else {
|
||
dataList[containsIndex].value.push(el1.value)
|
||
}
|
||
})
|
||
|
||
|
||
})
|
||
dataList.forEach((el, index) => {
|
||
list.push({
|
||
name: el.name,
|
||
data: el.value,
|
||
type: "line",
|
||
symbol: "circle",
|
||
smooth: true,
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: colorList[index],
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList1[index],
|
||
borderColor: colorList1[index],
|
||
borderWidth: 1,
|
||
},
|
||
},
|
||
})
|
||
selList[el.name]=(index==0?true:false)
|
||
})
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#57617B",
|
||
},
|
||
},
|
||
extraCssText: 'z-index: 9999;', // 设置 z-index
|
||
},
|
||
legend: {
|
||
icon: "circle",
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
type: 'scroll', // 启用翻页
|
||
data: list,
|
||
selected: selList,
|
||
right: "center",
|
||
top:10,
|
||
itemGap: 10,
|
||
width:'90%',
|
||
height:20,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff",
|
||
lineHeight: 30,
|
||
},
|
||
pageTextStyle: {
|
||
color: '#fff', // 设置翻页文字颜色
|
||
},
|
||
pageIconColor: '#fff', // 设置翻页按钮颜色
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
realtime: true,
|
||
start:0,
|
||
end: 100,
|
||
xAxisIndex: [0, 1],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
{
|
||
type: 'inside',
|
||
realtime: true,
|
||
start: 0,
|
||
height:20,
|
||
end:100,
|
||
xAxisIndex: [0, 1],
|
||
backgroundColor: 'rgba(11, 28, 42, 0.4)',
|
||
fillerColor: 'rgba(2, 148, 226, 1)',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
],
|
||
grid: {
|
||
left: "3%",
|
||
right: "10%",
|
||
bottom: "13%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
|
||
lineStyle: {
|
||
color: "#fff",
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
data: Xdata,
|
||
},
|
||
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#fff",
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(104, 168, 205, 1)",
|
||
type: 'dashed'
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: list,
|
||
};
|
||
option && myChart.setOption(option);
|
||
myChart.resize();
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
export function statusCharts(id, data) {
|
||
var chartDom = document.getElementById(id);
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
const pointerData = data; // 仪表指针数据
|
||
option = {
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius:75,
|
||
z: 1,
|
||
center:['50%','87%'],
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
splitNumber: 50,
|
||
splitLine: {
|
||
show: false,
|
||
length: 15,
|
||
distance: -10,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1,
|
||
},
|
||
},
|
||
detail: {
|
||
show: false,
|
||
offsetCenter: ['50%', '50%'],
|
||
fontSize: 22,
|
||
formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
|
||
rich: {
|
||
a: {
|
||
fontSize: 20,
|
||
color: "rgba(84, 108, 198, 0.65)",
|
||
},
|
||
b: {
|
||
fontSize: 24,
|
||
color: "rgba(84, 108, 198, 0.65)",
|
||
},
|
||
},
|
||
},
|
||
// 仪表盘的线，颜色值为一个数组
|
||
axisLine: {
|
||
show: true,
|
||
// 两端是否设置为圆角；在5.0之后的版本有效
|
||
roundCap: false,
|
||
lineStyle: {
|
||
width: 15,
|
||
shadowColor: "#0093ee", //默认透明
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
shadowBlur: 20,
|
||
opacity: 1,
|
||
color: [
|
||
[
|
||
pointerData / 100,
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
x1: 1,
|
||
y1: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(110, 224, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0, 200, 255, 1)",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
[1, "rgba(0,0,0,0.15)"],
|
||
],
|
||
},
|
||
},
|
||
// 仪表盘刻度标签
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
distance: -35,
|
||
formatter: (val) => {
|
||
const num = Math.floor(val);
|
||
return num % 20 === 0 ? num : "";
|
||
},
|
||
},
|
||
pointer:{
|
||
width :5,
|
||
itemStyle:{
|
||
color:'rgba(10, 243, 167, 1)'
|
||
}
|
||
},
|
||
// 刻度
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
// 指针，此设置仅对5.0以上的版本生效
|
||
|
||
data: [pointerData],
|
||
},
|
||
|
||
],
|
||
};
|
||
|
||
|
||
option && myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
} |