This commit is contained in:
lb 2023-12-19 15:49:24 +08:00
parent 4fc0cf19e9
commit 903a576cdc
3 changed files with 120 additions and 95 deletions

View File

@ -144,6 +144,12 @@ function getOptions(showChart, hisState, runState) {
data: v, data: v,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
// label: {
// show: true,
// position: "top",
// distance: 10,
// color: "#fffc",
// },
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[i % colors.length] + "40" }, { offset: 0, color: colors[i % colors.length] + "40" },
@ -154,6 +160,11 @@ function getOptions(showChart, hisState, runState) {
})), })),
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} else { } else {

View File

@ -1,23 +1,23 @@
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { randomInt } from '../../../../utils'; import { randomInt } from "../../../../utils";
export default function getOptions(seriesData, name) { export default function getOptions(seriesData, name) {
const colors = [ const colors = [
'#12FFF5', "#12FFF5",
'#2760FF', "#2760FF",
'#FFD160', "#FFD160",
'#E80091', "#E80091",
'#8064ff', "#8064ff",
'#ff8a3b', "#ff8a3b",
'#8cd26d', "#8cd26d",
'#2aa1ff', "#2aa1ff",
]; ];
return { return {
color: colors, color: colors,
grid: { top: 38, right: 12, bottom: 20, left: 48 }, grid: { top: 38, right: 12, bottom: 20, left: 48 },
legend: { legend: {
show: true, show: true,
icon: 'roundRect', icon: "roundRect",
top: 10, top: 10,
right: 10, right: 10,
padding: 0, padding: 0,
@ -26,73 +26,78 @@ export default function getOptions(seriesData, name) {
itemGap: 3, itemGap: 3,
height: 8, height: 8,
textStyle: { textStyle: {
color: '#DFF1FE', color: "#DFF1FE",
fontSize: 10, fontSize: 10,
}, },
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: Array(7) data: Array(7)
.fill(1) .fill(1)
.map((_, index) => { .map((_, index) => {
const today = new Date(); const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000; const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp, dtimestamp
).getDate()}`; ).getDate()}`;
}) })
.reverse(), .reverse(),
axisLabel: { axisLabel: {
color: '#fff', color: "#fff",
fontSize: 12, fontSize: 12,
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#213259', color: "#213259",
}, },
}, },
}, },
yAxis: { yAxis: {
name: '单位m³/h', name: "单位m³/h",
nameTextStyle: { nameTextStyle: {
color: '#fff', color: "#fff",
fontSize: 10, fontSize: 10,
align: 'right', align: "right",
}, },
type: 'value', type: "value",
axisLabel: { axisLabel: {
color: '#fff', color: "#fff",
fontSize: 12, fontSize: 12,
formatter: '{value}', formatter: "{value}",
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#213259', color: "#213259",
}, },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: '#213259a0', color: "#213259a0",
}, },
}, },
}, },
series: seriesData.map((arr, index) => ({ series: seriesData.map((arr, index) => ({
name: index + 1 + '#' + name, name: index + 1 + "#" + name,
data: arr, data: arr,
type: 'line', type: "line",
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[index] + '40' }, { offset: 0, color: colors[index] + "40" },
{ offset: 0.5, color: colors[index] + '20' }, { offset: 0.5, color: colors[index] + "20" },
{ offset: 1, color: colors[index] + '00' }, { offset: 1, color: colors[index] + "00" },
]), ]),
}, },
})), })),
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
}; };
} }

View File

@ -167,7 +167,16 @@ function getOptions(dataList, showMore) {
yAxis, yAxis,
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
color: '#fff',
formatter: "{b} {c}%", formatter: "{b} {c}%",
axisPointer: {
type: "shadow",
},
textStyle: {
color: '#fffc'
},
className: "xc-chart-tooltip",
// backgroundColor: ''
}, },
series: [ series: [
{ {