Skip to content

D
DC-TOM
Commit 2839247d authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

仪表盘优化

parent 6ef612ec
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 84 deletions
src/utils/chart.js
View file @ 2839247d
import * as echarts from "echarts";
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
color: '#fff'
}
},
grid: {
left: "3%",
right: "4%",
......@@ -252,11 +252,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
symbol: 'circle',
symbolSize: 0,
lineStyle: {
width: 2,
color: chartColors.teal
width: 2,
color: chartColors.teal
},
itemStyle: {
color: chartColors.teal
color: chartColors.teal
},
areaStyle: {
color: {
......@@ -290,7 +290,7 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 2,
textStyle: {
color: '#fff'
color: '#fff'
}
},
grid: {
......@@ -364,9 +364,68 @@ export const getGaugeOption = (option) => {
lineStyle: {
width: 30,
color: [
[0.2, "#fd666d"],
[0.8, "#48cd4d"],
[1, "#fd666d"],
[
0,
new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 1,
color: "#13d2a9", // 0% 处的颜色
},
{
offset: 0,
color: "#13d2a9", // 100% 处的颜色
},
],
false
),
],
[
0.4,
new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 1,
color: "#13d2a9", // 0% 处的颜色
},
{
offset: 0,
color: "#9ad8c9", // 100% 处的颜色
},
],
false
),
],
[
1,
new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 1,
color: "#9ad8c9", // 0% 处的颜色
},
{
offset: 0,
color: "#dadb1b", // 100% 处的颜色
},
],
false
),
],
],
},
},
......@@ -390,7 +449,7 @@ export const getGaugeOption = (option) => {
color: '#909399',
width: 2
},
},
axisLabel: {
color: '#909399',
......
src/views/dustMonitoring/index.vue
View file @ 2839247d
......@@ -586,7 +586,7 @@ const getDustDetail = () => {
"indicatorOne",
getGaugeOption({
value: dustInfo[0].value.toFixed(2),
chartName: "压差",
chartName: "压差" + '(' +dustInfo[0].unit + ')',
min: parseInt(res.data.pressureDiffLow),
max: parseInt(res.data.pressureDiffHigh),
formatter:
......@@ -601,10 +601,10 @@ const getDustDetail = () => {
indicatorTwoInstance,
"indicatorTwo",
getGaugeOption({
value: parseInt(dustInfo[1].value),
chartName: "粉尘浓度",
value: parseFloat(dustInfo[1].value),
chartName: "粉尘浓度" + '(' +dustInfo[1].unit + ')',
min: 5,
max: 50,
max: parseInt(dustInfo[1].value) > 50 ? Math.ceil(parseFloat(dustInfo[1].value) / 10) * 10 : 50,
formatter: function (value) {
return parseInt(value);
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment