6 changed files with 2074 additions and 181 deletions
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// so2浓度与小苏打用量
|
||||
export function fgdScrEnergy(data) { |
||||
return request({ |
||||
url: '/fgdScr/energy/sys/query', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
@ -0,0 +1,505 @@
|
||||
<template> |
||||
<div style="width: 100%; height: 100%"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
energyTypes: [], |
||||
sharedIndex: 0, |
||||
chartInstance: null, |
||||
option: {}, |
||||
colorList: [ |
||||
{ |
||||
color: "#00CED1", |
||||
offsetColor1: "rgba(0, 206, 209, 0.5)", |
||||
offsetColor2: "rgba(0, 206, 209, 0)", |
||||
}, |
||||
{ |
||||
color: "#ffe21e", |
||||
offsetColor1: "rgba(255,226,30, 0.5)", |
||||
offsetColor2: "rgba(255,226,30, 0)", |
||||
}, |
||||
{ |
||||
color: "#1a69f1", |
||||
offsetColor1: "rgba(26, 105, 241, 0.5)", |
||||
offsetColor2: "rgba(26, 105, 241, 0)", |
||||
}, |
||||
{ |
||||
color: "#2df499", |
||||
offsetColor1: "rgba(45,244,153, 0.5)", |
||||
offsetColor2: "rgba(45,244,153, 0)", |
||||
}, |
||||
{ |
||||
color: "#e87b4b", |
||||
offsetColor1: "rgba(232, 123, 75, 0.5)", |
||||
offsetColor2: "rgba(232, 123, 75, 0)", |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.echartsData(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 选择日月年 |
||||
handleEnter(index, event) { |
||||
console.log("index", index); |
||||
console.log("event", event); |
||||
this.chartInstance.dispose(); |
||||
this.initChart(); |
||||
this.sharedIndex = index; |
||||
// 使用 find 方法查找符合条件的对象 |
||||
const chartsObj = this.energyTypes.find((item) => item.name === event); |
||||
const colorObj = this.colorList.find( |
||||
(_, currentIndex) => currentIndex === index |
||||
); |
||||
console.log("当前要渲染的数据对象", chartsObj); |
||||
console.log("当前要渲染的颜色对象", colorObj); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 50; |
||||
let adapterOption = {}; |
||||
// 添加折线的配置 |
||||
adapterOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
// 根据不同德seriesName 返回不同的单位 |
||||
if (chartsObj.unit) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
chartsObj.unit + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
data: chartsObj.timeStr, |
||||
// axisLabel: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
}, |
||||
yAxis: { |
||||
name: chartsObj.unit, |
||||
// nameTextStyle: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
// axisLabel: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: chartsObj.data, |
||||
name: event, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: colorObj.color, //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: colorObj.color, //折线点的颜色 |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: colorObj.offsetColor1, // 渐变起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: colorObj.offsetColor2, // 渐变结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
}, |
||||
grid: { |
||||
top: "15%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "0%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
echartsData() { |
||||
const now = new Date(); |
||||
const endTime = now.toISOString().slice(0, 19).replace("T", " "); |
||||
const startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000) |
||||
.toISOString() |
||||
.slice(0, 19) |
||||
.replace("T", " "); |
||||
|
||||
const params = { |
||||
timeType: "min", |
||||
startTime: startTime, |
||||
endTime: endTime, |
||||
systemType: "8", |
||||
pageNum: 0, |
||||
pageSize: 10, |
||||
}; |
||||
|
||||
fgdScrEnergy(params).then((res) => { |
||||
console.log("折线图返回值", res); |
||||
if (res.code === 200 && res.data && res.data.length > 0) { |
||||
const dataMap = {}; |
||||
res.data.forEach((item) => { |
||||
const key = Object.keys(item)[0]; |
||||
dataMap[key] = item[key]; |
||||
}); |
||||
|
||||
const timeStrArr = dataMap.timeStrArr || []; |
||||
|
||||
const so1Data = dataMap.so1 || []; |
||||
const so2Data = dataMap.so2 || []; |
||||
const loadCellData = dataMap.loadCell || []; |
||||
|
||||
const allData = [...so1Data, ...so2Data, ...loadCellData].map(Number); |
||||
const maxValue = Math.max(...allData, 1); |
||||
const minValue = Math.min(...allData.filter(v => v > 0), 0); |
||||
|
||||
this.chartInstance.setOption({ |
||||
tooltip: { |
||||
trigger: "axis", |
||||
axisPointer: { |
||||
type: "cross", |
||||
}, |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
var unit = seriesName.includes("SO2") ? "mg/m³" : "mg"; |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
unit + |
||||
"</span><br>"; |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: true, |
||||
data: ["进SO2浓度", "出SO2浓度", "loadCell"], |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
top: "0%", |
||||
}, |
||||
grid: { |
||||
left: "8%", |
||||
right: "8%", |
||||
top: "15%", |
||||
bottom: "5%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: timeStrArr, |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
}, |
||||
yAxis: [ |
||||
{ |
||||
type: "value", |
||||
name: "mg/m³", |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
padding: [0, 0, 10, 0], |
||||
}, |
||||
min: minValue * 0.9 || 0, |
||||
max: maxValue * 1.1, |
||||
interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5, |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", |
||||
type: "dashed", |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "value", |
||||
name: "mg", |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
padding: [0, 10, 0, 0], |
||||
}, |
||||
min: minValue * 0.9 || 0, |
||||
max: maxValue * 1.1, |
||||
interval: (maxValue * 1.1 - (minValue * 0.9 || 0)) / 5, |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: "进SO2浓度", |
||||
type: "line", |
||||
yAxisIndex: 0, |
||||
data: so1Data, |
||||
symbolSize: 8, |
||||
itemStyle: { |
||||
color: "#00CED1", |
||||
}, |
||||
lineStyle: { |
||||
color: "#00CED1", |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(0, 206, 209, 0.5)", |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(0, 206, 209, 0)", |
||||
}, |
||||
], |
||||
global: false, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "出SO2浓度", |
||||
type: "line", |
||||
yAxisIndex: 0, |
||||
data: so2Data, |
||||
symbolSize: 8, |
||||
itemStyle: { |
||||
color: "#ffe21e", |
||||
}, |
||||
lineStyle: { |
||||
color: "#ffe21e", |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(255, 226, 30, 0.5)", |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(255, 226, 30, 0)", |
||||
}, |
||||
], |
||||
global: false, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "loadCell", |
||||
type: "bar", |
||||
yAxisIndex: 1, |
||||
data: loadCellData, |
||||
barWidth: "40%", |
||||
itemStyle: { |
||||
color: "#1a69f1", |
||||
borderRadius: [4, 4, 0, 0], |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,312 @@
|
||||
<template> |
||||
<div style="width: 100%; height: 100%"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { fgdScrEnergy } from "@/api/desulfurization/energyAnalysis"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
energyTypes: [], |
||||
sharedIndex: 0, |
||||
chartInstance: null, |
||||
option: {}, |
||||
colorList: [ |
||||
{ |
||||
color: "#00CED1", |
||||
offsetColor1: "rgba(0, 206, 209, 0.5)", |
||||
offsetColor2: "rgba(0, 206, 209, 0)", |
||||
}, |
||||
{ |
||||
color: "#ffe21e", |
||||
offsetColor1: "rgba(255,226,30, 0.5)", |
||||
offsetColor2: "rgba(255,226,30, 0)", |
||||
}, |
||||
{ |
||||
color: "#1a69f1", |
||||
offsetColor1: "rgba(26, 105, 241, 0.5)", |
||||
offsetColor2: "rgba(26, 105, 241, 0)", |
||||
}, |
||||
{ |
||||
color: "#2df499", |
||||
offsetColor1: "rgba(45,244,153, 0.5)", |
||||
offsetColor2: "rgba(45,244,153, 0)", |
||||
}, |
||||
{ |
||||
color: "#e87b4b", |
||||
offsetColor1: "rgba(232, 123, 75, 0.5)", |
||||
offsetColor2: "rgba(232, 123, 75, 0)", |
||||
}, |
||||
], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.echartsData(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 选择日月年 |
||||
handleEnter(index, event) { |
||||
console.log("index", index); |
||||
console.log("event", event); |
||||
this.chartInstance.dispose(); |
||||
this.initChart(); |
||||
this.sharedIndex = index; |
||||
// 使用 find 方法查找符合条件的对象 |
||||
const chartsObj = this.energyTypes.find((item) => item.name === event); |
||||
const colorObj = this.colorList.find( |
||||
(_, currentIndex) => currentIndex === index |
||||
); |
||||
console.log("当前要渲染的数据对象", chartsObj); |
||||
console.log("当前要渲染的颜色对象", colorObj); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 50; |
||||
let adapterOption = {}; |
||||
// 添加折线的配置 |
||||
adapterOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
// 根据不同德seriesName 返回不同的单位 |
||||
if (chartsObj.unit) { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
chartsObj.unit + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
data: chartsObj.timeStr, |
||||
// axisLabel: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
}, |
||||
yAxis: { |
||||
name: chartsObj.unit, |
||||
// nameTextStyle: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
// axisLabel: { |
||||
// fontSize: titleFontSize, |
||||
// }, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: chartsObj.data, |
||||
name: event, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: colorObj.color, //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: colorObj.color, //折线点的颜色 |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: colorObj.offsetColor1, // 渐变起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: colorObj.offsetColor2, // 渐变结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
}, |
||||
grid: { |
||||
top: "15%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "0%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
echartsData() { |
||||
const now = new Date(); |
||||
const endTime = now.toISOString().slice(0, 10); |
||||
const startTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000) |
||||
.toISOString() |
||||
.slice(0, 10); |
||||
|
||||
const params = { |
||||
timeType: "day", |
||||
startTime: startTime, |
||||
endTime: endTime, |
||||
systemType: "8", |
||||
pageNum: 0, |
||||
pageSize: 10, |
||||
}; |
||||
|
||||
fgdScrEnergy(params).then((res) => { |
||||
console.log("折线图返回值", res); |
||||
if (res.code === 200 && res.data && res.data.length > 0) { |
||||
const dataMap = {}; |
||||
res.data.forEach((item) => { |
||||
const key = Object.keys(item)[0]; |
||||
dataMap[key] = item[key]; |
||||
}); |
||||
|
||||
this.energyTypes = [ |
||||
{ |
||||
name: "小苏打日用量", |
||||
data: dataMap.loadCell || [], |
||||
timeStr: dataMap.timeStrArr || [], |
||||
unit: "mg", |
||||
}, |
||||
]; |
||||
|
||||
if (this.energyTypes.length > 0) { |
||||
this.handleEnter(0, this.energyTypes[0].name); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue