|
@@ -42,20 +42,34 @@ export default {
|
|
|
...this.pagination,
|
|
|
};
|
|
|
listScatterPlot(params).then((res) => {
|
|
|
- const chartData = res.data.records || [];
|
|
|
- const seriesData = chartData.map(({ flowsum, waterlevel }) => [flowsum, waterlevel]);
|
|
|
+ const chartData = res.data || [];
|
|
|
+ const flows = chartData.map(({flowsum}) => flowsum)
|
|
|
+ const max = Math.max(...flows);
|
|
|
+ const min = Math.min(...flows);
|
|
|
+ const seriesData = chartData.map(({ flowsum, waterlevel }) => [waterlevel, flowsum]);
|
|
|
+
|
|
|
this.chart.setOption({
|
|
|
xAxis: {
|
|
|
- name: '流量(m³/h)',
|
|
|
- scale: true
|
|
|
+ name: '水位(m)',
|
|
|
+ scale: true,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#54606C'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
- name: '水位(m)',
|
|
|
- scale: true
|
|
|
+ name: '流量(m³/h)',
|
|
|
+ scale: true,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#54606C'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
grid: {
|
|
|
- left: 50,
|
|
|
- right: 50,
|
|
|
+ left: 30,
|
|
|
+ right: 70,
|
|
|
bottom: 40,
|
|
|
top: 40,
|
|
|
containLabel: true
|
|
@@ -65,12 +79,23 @@ export default {
|
|
|
axisPointer: {
|
|
|
type: 'cross'
|
|
|
},
|
|
|
+ formatter: (params) => {
|
|
|
+ const { data } = params[0];
|
|
|
+ return `水位:${data[1]} m<br />流量:${data[0]} m³/h`;
|
|
|
+ },
|
|
|
padding: [5, 10]
|
|
|
},
|
|
|
series: [{
|
|
|
name: '水位',
|
|
|
type: 'scatter',
|
|
|
data: seriesData,
|
|
|
+ symbolSize: (value) => {
|
|
|
+ const per = (value[1] - min) / (max - min);
|
|
|
+ return 10 + 10 * per;
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#54D192'
|
|
|
+ }
|
|
|
}]
|
|
|
})
|
|
|
})
|