diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
index b0724bf..de5b9c3 100644
--- a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -31,41 +31,15 @@
var option;
option = {
color: ['#3FFFC2', '#FFF21C', 'orange'],
-
tooltip: {
trigger: 'axis',
- // formatter: "{b}：{c}㎡",
- // feature: {
- // mark: { show: true },
- // dataView: { show: true, readOnly: false },
- // magicType: { show: true, type: ['line', 'bar'] },
- // restore: { show: true },
- // saveAsImage: { show: true }
- // },
- // axisPointer: {
- // type: "cross",
- // textStyle: {
- // color: "#fff"
- // }
- // },
- formatter: params => {
- // console.log(params);
- var relVal = '' + params[0].name;
- for (var i = 0, l = params.length; i < l; i++) {
- if (params[i].seriesName) {
- let unit = params[i].seriesName == '降雨量(cm)' ? 'mm' : 'mm';
- relVal += '
' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
- }
- }
- return relVal;
- },
},
grid: {
- top: 50,
+ top: 40,
bottom: 30,
},
legend: {
- data: ['降雨量(cm)', '流量(mm)', 'ss'],
+ data: ['降雨量(mm)', '流量(m³/h)', 'ss(mg/L)'],
textStyle: {
color: '#fff',
},
@@ -96,7 +70,7 @@
],
yAxis: [
{
- name: '流量(mm)',
+ name: '',
type: 'value',
axisLabel: {
color: '#fff',
@@ -111,18 +85,13 @@
color: '#60C2FF',
},
},
- alignTicks: true,
},
-
{
name: '',
type: 'value',
nameTextStyle: {
color: '#fff',
},
- min: 0,
- // max: 50,
- interval: 5,
axisLabel: {
show: true,
color: '#fff',
@@ -134,40 +103,11 @@
color: '#53D8FB',
},
},
- alignTicks: true,
- },
- ],
- dataZoom: [
- {
- // show: true,
- show: false,
- height: 4,
- bottom: 18,
- start: 0,
- end: 100,
- handleSize: '100%',
- fillerColor: '#94FA41',
- borderColor: 'transparent',
- backgroundColor: 'rgba(148, 250, 65, 0.2)',
- handleStyle: {
- color: '#94FA41',
- },
- moveHandleSize: 0,
- textStyle: {
- color: '#fff',
- },
- },
- {
- type: 'inside',
- show: true,
- height: 15,
- start: 1,
- end: 35,
},
],
series: [
{
- name: '降雨量(cm)',
+ name: '降雨量(mm)',
type: 'bar',
barWidth: barWidth,
barGap: '10%', // Make series be overlap
@@ -184,19 +124,20 @@
},
]),
},
+ yAxisIndex: 0,
data: props.data.yAxis,
},
{
// smooth: true, //变为曲线 默认false折线
- name: '流量(mm)',
+ name: '流量(m³/h)',
type: 'line',
data: props.data.yAxis2,
- yAxisIndex: 1,
+ yAxisIndex: 0,
color: '#FFF21C',
},
{
// smooth: true, //变为曲线 默认false折线
- name: 'ss',
+ name: 'ss(mg/L)',
type: 'line',
data: props.data.yAxis3,
yAxisIndex: 1,
@@ -206,7 +147,7 @@
};
option && chartDom.setOption(option, true);
allData.chart = chartDom;
- // animateChart();
+ animateChart();
};
watch(
() => props.refresh,
@@ -221,19 +162,19 @@
}
);
// echarts动画
- // function animateChart() {
- // let length = props.data.xAxis.length;
- // let i = 0;
- // allData.timer = setInterval(() => {
- // i++;
- // if (i == length) i = 0;
- // allData.chart.dispatchAction({
- // type: 'showTip',
- // seriesIndex: 0,
- // dataIndex: i,
- // });
- // }, 2000);
- // }
+ function animateChart() {
+ let length = props.data.xAxis.length;
+ let i = 0;
+ allData.timer = setInterval(() => {
+ i++;
+ if (i == length) i = 0;
+ allData.chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: i,
+ });
+ }, 2000);
+ }
onMounted(() => {
init();
window.addEventListener('resize', resizeTheChart);
diff --git a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
index b0724bf..de5b9c3 100644
--- a/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
+++ b/src/views/sponeScreen/Echarts/AssessmentEcharts.vue
@@ -31,41 +31,15 @@
var option;
option = {
color: ['#3FFFC2', '#FFF21C', 'orange'],
-
tooltip: {
trigger: 'axis',
- // formatter: "{b}：{c}㎡",
- // feature: {
- // mark: { show: true },
- // dataView: { show: true, readOnly: false },
- // magicType: { show: true, type: ['line', 'bar'] },
- // restore: { show: true },
- // saveAsImage: { show: true }
- // },
- // axisPointer: {
- // type: "cross",
- // textStyle: {
- // color: "#fff"
- // }
- // },
- formatter: params => {
- // console.log(params);
- var relVal = '' + params[0].name;
- for (var i = 0, l = params.length; i < l; i++) {
- if (params[i].seriesName) {
- let unit = params[i].seriesName == '降雨量(cm)' ? 'mm' : 'mm';
- relVal += '
' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
- }
- }
- return relVal;
- },
},
grid: {
- top: 50,
+ top: 40,
bottom: 30,
},
legend: {
- data: ['降雨量(cm)', '流量(mm)', 'ss'],
+ data: ['降雨量(mm)', '流量(m³/h)', 'ss(mg/L)'],
textStyle: {
color: '#fff',
},
@@ -96,7 +70,7 @@
],
yAxis: [
{
- name: '流量(mm)',
+ name: '',
type: 'value',
axisLabel: {
color: '#fff',
@@ -111,18 +85,13 @@
color: '#60C2FF',
},
},
- alignTicks: true,
},
-
{
name: '',
type: 'value',
nameTextStyle: {
color: '#fff',
},
- min: 0,
- // max: 50,
- interval: 5,
axisLabel: {
show: true,
color: '#fff',
@@ -134,40 +103,11 @@
color: '#53D8FB',
},
},
- alignTicks: true,
- },
- ],
- dataZoom: [
- {
- // show: true,
- show: false,
- height: 4,
- bottom: 18,
- start: 0,
- end: 100,
- handleSize: '100%',
- fillerColor: '#94FA41',
- borderColor: 'transparent',
- backgroundColor: 'rgba(148, 250, 65, 0.2)',
- handleStyle: {
- color: '#94FA41',
- },
- moveHandleSize: 0,
- textStyle: {
- color: '#fff',
- },
- },
- {
- type: 'inside',
- show: true,
- height: 15,
- start: 1,
- end: 35,
},
],
series: [
{
- name: '降雨量(cm)',
+ name: '降雨量(mm)',
type: 'bar',
barWidth: barWidth,
barGap: '10%', // Make series be overlap
@@ -184,19 +124,20 @@
},
]),
},
+ yAxisIndex: 0,
data: props.data.yAxis,
},
{
// smooth: true, //变为曲线 默认false折线
- name: '流量(mm)',
+ name: '流量(m³/h)',
type: 'line',
data: props.data.yAxis2,
- yAxisIndex: 1,
+ yAxisIndex: 0,
color: '#FFF21C',
},
{
// smooth: true, //变为曲线 默认false折线
- name: 'ss',
+ name: 'ss(mg/L)',
type: 'line',
data: props.data.yAxis3,
yAxisIndex: 1,
@@ -206,7 +147,7 @@
};
option && chartDom.setOption(option, true);
allData.chart = chartDom;
- // animateChart();
+ animateChart();
};
watch(
() => props.refresh,
@@ -221,19 +162,19 @@
}
);
// echarts动画
- // function animateChart() {
- // let length = props.data.xAxis.length;
- // let i = 0;
- // allData.timer = setInterval(() => {
- // i++;
- // if (i == length) i = 0;
- // allData.chart.dispatchAction({
- // type: 'showTip',
- // seriesIndex: 0,
- // dataIndex: i,
- // });
- // }, 2000);
- // }
+ function animateChart() {
+ let length = props.data.xAxis.length;
+ let i = 0;
+ allData.timer = setInterval(() => {
+ i++;
+ if (i == length) i = 0;
+ allData.chart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: i,
+ });
+ }, 2000);
+ }
onMounted(() => {
init();
window.addEventListener('resize', resizeTheChart);
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index dfc9ee7..ca1544f 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -84,9 +84,22 @@
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
const chartData2 = ref({
- xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
- yAxis: [2, 5, 10, 8, 15, 20, 25, 25, 17, 10, 5, 1],
- yAxis2: [7, 9, 10, 9, 11, 10, 12, 15, 18, 200, 200, 200, 200, 200],
+ xAxis: [
+ '06-12 08:00',
+ '06-12 09:00',
+ '06-12 10:00',
+ '06-12 11:00',
+ '06-12 12:00',
+ '06-12 13:00',
+ '06-12 14:00',
+ '06-12 15:00',
+ '06-12 16:00',
+ '06-12 17:00',
+ '06-12 18:00',
+ '06-12 19:00',
+ ],
+ yAxis: [2, 5, 10, 8, 2, 4, 5, 5, 7, 10, 5, 1],
+ yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.03, 0.6, 0.1, 0.2, 0.1, 0.3, 0.4],
yAxis3: [50, 50, 80, 230, 180, 240, 160, 200, 268, 198, 269, 260],
refresh: 1,
});
@@ -186,8 +199,7 @@
.assessment {
margin-top: 5px;
width: 100%;
- height: 230px;
- // background: red;
+ height: 260px;
}
}
.WaterList {