|
|
@@ -5,77 +5,138 @@
|
|
|
:color="item.color"></gw-statistic>
|
|
|
</div>
|
|
|
<div class="gw-statistic-row" style="height: 30vh;">
|
|
|
- <gw-card style="width: 40%;">
|
|
|
+ <gw-card style="width: 60%;">
|
|
|
<template v-slot:title>
|
|
|
- <span>今日模型服务调度次数</span>
|
|
|
- <span style="color: #79bbff;margin-left: 1%;">{{ todayModelCallCount }}</span>
|
|
|
- <span style="margin-left: 1%;"> 次</span>
|
|
|
- </template>
|
|
|
- <div id="top1" class="chart_container"></div>
|
|
|
- </gw-card>
|
|
|
- <gw-card style="width: 30%;">
|
|
|
- <template v-slot:title>
|
|
|
- <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
|
|
|
- <div style="">模型服务调用次数</div>
|
|
|
- <div style="width: 50%;margin-left: 20%;">
|
|
|
- <el-select v-model="userId" class="m-2" placeholder="选则用户" style="width: 100%;">
|
|
|
- <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value"
|
|
|
- @change="initChartTop2"/>
|
|
|
- </el-select>
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div>
|
|
|
+ <span>模型服务调度次数</span>
|
|
|
+ <span style="color: #79bbff;"> {{ todayModelCallCount }} </span>
|
|
|
+ <span>次</span>
|
|
|
</div>
|
|
|
+ <el-segmented v-model="dateType" :options="dateTypeOptions" @change="initChartTop1"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <gw-echart ref="top2Ref"></gw-echart>
|
|
|
+ <gw-echart ref="top1Ref"></gw-echart>
|
|
|
</gw-card>
|
|
|
- <gw-card style="width: 30%;">
|
|
|
+ <!-- <gw-card style="width: 30%;">-->
|
|
|
+ <!-- <template v-slot:title>-->
|
|
|
+ <!-- <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">-->
|
|
|
+ <!-- <div style="">模型服务调用次数</div>-->
|
|
|
+ <!-- <div style="width: 50%;margin-left: 20%;">-->
|
|
|
+ <!-- <el-select v-model="userId" class="m-2" placeholder="选则用户" style="width: 100%;"-->
|
|
|
+ <!-- @change="initChartTop2">-->
|
|
|
+ <!-- <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value"/>-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- <gw-echart ref="top2Ref"></gw-echart>-->
|
|
|
+ <!-- </gw-card>-->
|
|
|
+ <gw-card style="width: 40%;">
|
|
|
<template v-slot:title>
|
|
|
- <span style="">模型服务类型总数</span>
|
|
|
- <span style="color: #79bbff;margin-left: 1%;"> {{ modelTypeCallCount }}</span>
|
|
|
- <span style="margin-left: 1%;"> 次</span>
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div>模型调用次数统计</div>
|
|
|
+ <el-segmented v-model="dateType" :options="dateTypeOptions" @change="initChartTop3"/>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<gw-echart ref="top3Ref"></gw-echart>
|
|
|
</gw-card>
|
|
|
</div>
|
|
|
<div class="gw-statistic-row" style="height: 30vh;">
|
|
|
- <gw-card>
|
|
|
+ <gw-card style="width: 50%;">
|
|
|
<template v-slot:title>
|
|
|
- <div style="width: 100%;display: flex;justify-content: flex-end;">
|
|
|
- <el-select
|
|
|
- v-model="dateType"
|
|
|
- class="m-2"
|
|
|
- style="width: 20%;"
|
|
|
- @change="initChartBottom1"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in dateTypeOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <span>模型服务接口统计</span>
|
|
|
+ </template>
|
|
|
+ <gw-echart ref="top9Ref"></gw-echart>
|
|
|
+ </gw-card>
|
|
|
+<!-- <gw-card style="width: 33%;">-->
|
|
|
+<!-- <template v-slot:title>-->
|
|
|
+<!-- <span>模型计算结果统计</span>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <gw-echart ref="top10Ref"></gw-echart>-->
|
|
|
+<!-- </gw-card>-->
|
|
|
+ <gw-card style="width: 50%;">
|
|
|
+ <template v-slot:title>
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div>
|
|
|
+ <span>模型计算成功统计</span>
|
|
|
+ </div>
|
|
|
+ <el-segmented v-model="dateType" :options="dateTypeOptions" @change="initChartTop11"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <gw-echart ref="bt1Ref"></gw-echart>
|
|
|
+ <gw-echart ref="top11Ref"></gw-echart>
|
|
|
</gw-card>
|
|
|
</div>
|
|
|
- <div class="gw-statistic-row" style="height: 40vh;">
|
|
|
- <div class="gw-statistic-body">
|
|
|
- <el-row :gutter="10" style="height: 100%;">
|
|
|
- <el-col :span="15" style="height: 100%;position: relative;">
|
|
|
- <div class="title">访问来源追溯</div>
|
|
|
- <div style="height: calc(100% - 20px)">
|
|
|
- <div id="visit_source_chart" class="chart_container"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="visit_number" style="height: 100%;">
|
|
|
- <div class="title">访问次数排行</div>
|
|
|
- <div style="height: calc(100% - 20px)">
|
|
|
- <div id="visit_number_chart" class="chart_container"></div>
|
|
|
+ <div class="gw-statistic-row" style="height: 30vh;">
|
|
|
+ <gw-card style="width: 60%;">
|
|
|
+ <template v-slot:title>
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div>
|
|
|
+ <span>任务统计</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <el-segmented v-model="task" :options="taskOptions" @change="initChartTop5"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <gw-echart ref="top5Ref"></gw-echart>
|
|
|
+ </gw-card>
|
|
|
+ <gw-card style="width: 40%;">
|
|
|
+ <template v-slot:title>
|
|
|
+ <div style="display:flex;align-items: center;">
|
|
|
+ <span style="margin-right: 5px;">报警信息</span>
|
|
|
+ <el-tag type="danger" effect="dark" size="small">{{ alarmTableData.length }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-table stripe :data="alarmTableData" size="small">
|
|
|
+ <el-table-column align="center" width="120" prop="tm" label="报警时间">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag size="medium">{{ scope.row.tm }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" width="100" prop="type" label="报警类型"/>
|
|
|
+ <el-table-column align="center" width="150" prop="modelName" label="模型名称"/>
|
|
|
+ <el-table-column align="center" prop="content" label="报警内容"/>
|
|
|
+ </el-table>
|
|
|
+ </gw-card>
|
|
|
</div>
|
|
|
+ <!-- <div class="gw-statistic-row" style="height: 30vh;">-->
|
|
|
+ <!-- <gw-card>-->
|
|
|
+ <!-- <template v-slot:title>-->
|
|
|
+ <!-- <div style="width: 100%;display: flex;justify-content: flex-end;">-->
|
|
|
+ <!-- <el-select-->
|
|
|
+ <!-- v-model="dateType"-->
|
|
|
+ <!-- class="m-2"-->
|
|
|
+ <!-- style="width: 20%;"-->
|
|
|
+ <!-- @change="initChartBottom1"-->
|
|
|
+ <!-- <el-option-->
|
|
|
+ <!-- v-for="item in dateTypeOptions"-->
|
|
|
+ <!-- :key="item.value"-->
|
|
|
+ <!-- :label="item.label"-->
|
|
|
+ <!-- :value="item.value"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- </el-select>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- <gw-echart ref="bt1Ref"></gw-echart>-->
|
|
|
+ <!-- </gw-card>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="gw-statistic-row" style="height: 40vh;">-->
|
|
|
+ <!-- <div class="gw-statistic-body">-->
|
|
|
+ <!-- <el-row :gutter="10" style="height: 100%;">-->
|
|
|
+ <!-- <el-col :span="15" style="height: 100%;position: relative;">-->
|
|
|
+ <!-- <div class="title">访问来源追溯</div>-->
|
|
|
+ <!-- <div style="height: calc(100% - 20px)">-->
|
|
|
+ <!-- <div id="visit_source_chart" class="chart_container"></div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- <el-col :span="9" class="visit_number" style="height: 100%;">-->
|
|
|
+ <!-- <div class="title">访问次数排行</div>-->
|
|
|
+ <!-- <div style="height: calc(100% - 20px)">-->
|
|
|
+ <!-- <div id="visit_number_chart" class="chart_container"></div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
+ <!-- </el-row>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
@@ -84,9 +145,10 @@ import * as echarts from 'echarts';
|
|
|
import GwStatistic from "@/views/monitor/service/GwStatistic.vue";
|
|
|
import {
|
|
|
getModelCallCount,
|
|
|
+ getModelServiceCount,
|
|
|
+ getModelServiceSuccessCount,
|
|
|
getModelTypeCallCount,
|
|
|
getStatisticData,
|
|
|
- getTodayModelCallCount,
|
|
|
getUserModelCallCount,
|
|
|
getViewNumByCity
|
|
|
} from "@/api/monitor/server.js";
|
|
|
@@ -115,8 +177,13 @@ listUser().then(res => {
|
|
|
})
|
|
|
|
|
|
})
|
|
|
+const top1Ref = ref(null)
|
|
|
const top2Ref = ref(null)
|
|
|
const top3Ref = ref(null)
|
|
|
+const top5Ref = ref(null)
|
|
|
+const top9Ref = ref(null)
|
|
|
+const top10Ref = ref(null)
|
|
|
+const top11Ref = ref(null)
|
|
|
const modelTypeCallCount = ref(0)
|
|
|
|
|
|
const dateType = ref('5')
|
|
|
@@ -127,30 +194,71 @@ const dateTypeOptions = ref([
|
|
|
{label: '近一个月', value: '4'},
|
|
|
{label: '全部', value: '5'},
|
|
|
])
|
|
|
+const task = ref('1')
|
|
|
+const taskOptions = ref([
|
|
|
+ {label: '日执行量', value: '1'},
|
|
|
+ {label: '月执行量', value: '2'},
|
|
|
+])
|
|
|
const bt1Ref = ref(null)
|
|
|
-
|
|
|
const echartMapData = ref([])
|
|
|
+const alarmTableData = ref([
|
|
|
+ {tm: '09-12 11:12', type: '格式异常', modelName: '上海沿海风暴潮预报模型', content: '调用返回异常'},
|
|
|
+ {tm: '09-11 11:12', type: '请求异常', modelName: '上海沿海风暴潮预报模型', content: '模型连接失败'},
|
|
|
+ {tm: '09-10 11:12', type: '服务器未响应', modelName: '上海沿海风暴潮预报模型', content: '服务器报错'},
|
|
|
+])
|
|
|
|
|
|
-function inintChartTop1() {
|
|
|
- getTodayModelCallCount().then(res => {
|
|
|
+function getTimes(dateType) {
|
|
|
+ let startTime = null, endTime = null
|
|
|
+ const date = new Date()
|
|
|
+ switch (dateType) {
|
|
|
+ case '1':
|
|
|
+ startTime = parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00:00'
|
|
|
+ date.setDate(date.getDate() + 1)
|
|
|
+ endTime = parseTime(date, '{y}-{m}-{d}') + ' 00:00:00'
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ endTime = parseTime(new Date())
|
|
|
+ date.setDate(date.getDate() - 3)
|
|
|
+ startTime = parseTime(date)
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ endTime = parseTime(new Date())
|
|
|
+ date.setDate(date.getDate() - 7)
|
|
|
+ startTime = parseTime(date)
|
|
|
+ break;
|
|
|
+ case '4':
|
|
|
+ endTime = parseTime(new Date())
|
|
|
+ date.setDate(date.getDate() - 30)
|
|
|
+ startTime = parseTime(date)
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ return {startTime, endTime}
|
|
|
+}
|
|
|
+
|
|
|
+function initChartTop1() {
|
|
|
+ const params = {}
|
|
|
+ const {startTime, endTime} = getTimes(dateType.value)
|
|
|
+ params.startTime = startTime
|
|
|
+ params.endTime = endTime
|
|
|
+ getModelCallCount(params).then(res => {
|
|
|
let chartData = res.data
|
|
|
todayModelCallCount.value = chartData.map(item => item.total).reduce((acc, current) => acc + current, 0);
|
|
|
- var chartDom = document.getElementById('top1');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
+ const option = {
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
- bottom: '10%',
|
|
|
- top: '18%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '10%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
// splitLine: {show: false},
|
|
|
- data: chartData.map(item => item.name),
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 10 // 设置标签旋转45度
|
|
|
+ },
|
|
|
+ data: chartData.map(item => item.appName),
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
@@ -168,12 +276,12 @@ function inintChartTop1() {
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
- option && myChart.setOption(option);
|
|
|
+ top1Ref.value.loadChart(option);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
function initChartTop2() {
|
|
|
- getUserModelCallCount().then(res => {
|
|
|
+ getUserModelCallCount(userId.value).then(res => {
|
|
|
let chartData = res.data.map(item => {
|
|
|
return {
|
|
|
name: item.serviceName,
|
|
|
@@ -211,11 +319,15 @@ function initChartTop2() {
|
|
|
}
|
|
|
|
|
|
function initChartTop3() {
|
|
|
- getModelTypeCallCount().then(res => {
|
|
|
+ const params = {}
|
|
|
+ const {startTime, endTime} = getTimes(dateType.value)
|
|
|
+ params.startTime = startTime
|
|
|
+ params.endTime = endTime
|
|
|
+ getModelTypeCallCount(params).then(res => {
|
|
|
modelTypeCallCount.value = res.data.map(item => item.total).reduce((acc, current) => acc + current, 0);
|
|
|
let chartData = res.data.map(item => {
|
|
|
return {
|
|
|
- name: item.type,
|
|
|
+ name: item.name,
|
|
|
value: item.total
|
|
|
}
|
|
|
})
|
|
|
@@ -223,6 +335,13 @@ function initChartTop3() {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
legend: {
|
|
|
top: '90%',
|
|
|
left: 'center'
|
|
|
@@ -249,32 +368,120 @@ function initChartTop3() {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function initChartTop9() {
|
|
|
+ getModelServiceCount().then(res => {
|
|
|
+ modelTypeCallCount.value = res.data.map(item => item.total).reduce((acc, current) => acc + current, 0);
|
|
|
+ let chartData = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ value: item.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '90%',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ formatter: '{c}',
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ color: ['#529b2e', '#95d475', '#b3e19d', '#d1edc4'],
|
|
|
+ data: chartData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ top9Ref.value.loadChart(option)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function initChartTop11() {
|
|
|
+ const params = {}
|
|
|
+ const {startTime, endTime} = getTimes(dateType.value)
|
|
|
+ params.startTime = startTime
|
|
|
+ params.endTime = endTime
|
|
|
+ getModelServiceSuccessCount(params).then(res => {
|
|
|
+ let rawData = [
|
|
|
+ res.data.map(item => item.success),
|
|
|
+ res.data.map(item => item.fail)
|
|
|
+ ]
|
|
|
+ const totalData = [];
|
|
|
+ for (let i = 0; i < rawData[0].length; ++i) {
|
|
|
+ let sum = 0;
|
|
|
+ for (let j = 0; j < rawData.length; ++j) {
|
|
|
+ sum += rawData[j][i];
|
|
|
+ }
|
|
|
+ totalData.push(sum);
|
|
|
+ }
|
|
|
+ const series = ['成功', '失败'].map((name, sid) => {
|
|
|
+ return {
|
|
|
+ name,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ barWidth: '60%',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
|
|
+ },
|
|
|
+ data: rawData[sid].map((d, did) =>
|
|
|
+ totalData[did] <= 0 ? 0 : d / totalData[did]
|
|
|
+ )
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const option = {
|
|
|
+ legend: {
|
|
|
+ selectedMode: false
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '0%',
|
|
|
+ top: '20%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 10 // 设置标签旋转45度
|
|
|
+ },
|
|
|
+ data: res.data.map(item => item.name)
|
|
|
+ },
|
|
|
+ series
|
|
|
+ };
|
|
|
+ top11Ref.value.loadChart(option)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
function initChartBottom1() {
|
|
|
const params = {}
|
|
|
- const date = new Date()
|
|
|
- switch (dateType.value) {
|
|
|
- case '1':
|
|
|
- params.startTime = parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00:00'
|
|
|
- date.setDate(date.getDate() + 1)
|
|
|
- params.endTime = parseTime(date, '{y}-{m}-{d}') + ' 00:00:00'
|
|
|
- break;
|
|
|
- case '2':
|
|
|
- params.endTime = parseTime(new Date())
|
|
|
- date.setDate(date.getDate() - 3)
|
|
|
- params.startTime = parseTime(date)
|
|
|
- break;
|
|
|
- case '3':
|
|
|
- params.endTime = parseTime(new Date())
|
|
|
- date.setDate(date.getDate() - 7)
|
|
|
- params.startTime = parseTime(date)
|
|
|
- break;
|
|
|
- case '4':
|
|
|
- params.endTime = parseTime(new Date())
|
|
|
- date.setDate(date.getDate() - 30)
|
|
|
- params.startTime = parseTime(date)
|
|
|
- break;
|
|
|
- default:
|
|
|
- }
|
|
|
+ const {startTime, endTime} = getTimes(dateType.value)
|
|
|
+ params.startTime = startTime
|
|
|
+ params.endTime = endTime
|
|
|
|
|
|
getModelCallCount(params).then(res => {
|
|
|
const chartData = res.data
|
|
|
@@ -348,6 +555,61 @@ function initChartBottom2() {
|
|
|
option && myChart.setOption(option);
|
|
|
}
|
|
|
|
|
|
+function initChartTop5() {
|
|
|
+ const option = {
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '10%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ showContent: false
|
|
|
+ },
|
|
|
+ dataset: {
|
|
|
+ source: [
|
|
|
+ ['模型', '09-07', '09-08', '09-09', '09-10', '09-11', '09-12'],
|
|
|
+ ['上海沿海风暴潮预报模型', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
|
|
|
+ ['马斯京根法', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
|
|
|
+ ['三水源新安江产流模型', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
|
|
|
+ ['上海市中心城区排水系统模型', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ xAxis: {type: 'category'},
|
|
|
+ yAxis: {gridIndex: 0},
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ seriesLayoutBy: 'row',
|
|
|
+ emphasis: {focus: 'series'}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ seriesLayoutBy: 'row',
|
|
|
+ emphasis: {focus: 'series'}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ seriesLayoutBy: 'row',
|
|
|
+ emphasis: {focus: 'series'}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ seriesLayoutBy: 'row',
|
|
|
+ emphasis: {focus: 'series'}
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ top5Ref.value.loadChart(option);
|
|
|
+}
|
|
|
+
|
|
|
function initVisitNumberChart(name, data) {
|
|
|
data.sort((a, b) => b.value - a.value)
|
|
|
let d = data.slice(0, 9)
|
|
|
@@ -414,12 +676,15 @@ function initViewNumByCity() {
|
|
|
onMounted(() => {
|
|
|
initStatisticData()
|
|
|
|
|
|
- inintChartTop1()
|
|
|
- initChartTop2()
|
|
|
+ initChartTop1()
|
|
|
+ // initChartTop2()
|
|
|
initChartTop3()
|
|
|
- initChartBottom1()
|
|
|
+ initChartTop5()
|
|
|
+ initChartTop9()
|
|
|
+ initChartTop11()
|
|
|
+ // initChartBottom1()
|
|
|
// initChartBottom2()
|
|
|
- initViewNumByCity()
|
|
|
+ // initViewNumByCity()
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|