update
This commit is contained in:
parent
4fc0cf19e9
commit
903a576cdc
@ -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 {
|
||||||
|
@ -1,98 +1,103 @@
|
|||||||
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,
|
||||||
itemWidth: 8,
|
itemWidth: 8,
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
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: ''
|
||||||
|
},
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
@ -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: [
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user