From 80eb2e8d0eb78caf0b5d369aba18f99ed1222b97 Mon Sep 17 00:00:00 2001
From: tengsx <tengsx1009@163.com>
Date: Thu, 06 Apr 2023 22:53:58 +0800
Subject: [PATCH] page 2 and 3
---
src/views/home/index.vue | 324 ++---------------------------------------------------
1 files changed, 13 insertions(+), 311 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index badd386..c1eb088 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -37,7 +37,7 @@
<div class="title">每日8时超汛限</div>
</div>
<div class="content-box chart-box">
- <div id="stackBarChart" style="width: 100%; height: 213px"></div>
+ <day-eight-bar></day-eight-bar>
<div class="scroll-table">
<div class="scroll-table-head flex">
<div>名称</div>
@@ -107,7 +107,7 @@
<div class="title">水库数量分布</div>
</div>
<div class="content-box">
- <div id="barChart_01" style="width: 100%; height: 220px"></div>
+ <reservoir-count-bar></reservoir-count-bar>
</div>
</div>
@@ -116,7 +116,7 @@
<div class="title">水库规模分布</div>
</div>
<div class="content-box">
- <div id="barChart_02" style="width: 100%; height: 210px"></div>
+ <reservoir-size-bar></reservoir-size-bar>
</div>
</div>
@@ -151,7 +151,7 @@
<div class="title">降雨等级分布</div>
</div>
<div class="content-box">
- <div id="pie-chart" style="width: 100%; height: 210px"></div>
+ <rain-level-pie></rain-level-pie>
</div>
</div>
</div>
@@ -159,10 +159,15 @@
</template>
<script>
+import dayEightBar from "./components/dayEightBar.vue";
+import reservoirCountBar from './components/reservoirCountBar.vue';
+import reservoirSizeBar from './components/reservoirSizeBar.vue';
+import rainLevelPie from "./components/rainLevelPie.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
+
export default {
- components: { vueSeamlessScroll },
+ components: { vueSeamlessScroll, dayEightBar, reservoirCountBar, reservoirSizeBar, rainLevelPie },
data() {
return {
@@ -210,317 +215,14 @@
created() {},
mounted() {
- let stackBarData = {
- id: 'stackBarChart',
- xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
- xAxisRotate: 30,
- title: '总数 39座',
- showLegend: true,
- yAxisName: '数量',
- series: [
- {
- name: "大型",
- type: "bar",
- stack: "one",
- barWidth: 12,
- data: ["20", "30", "15", "1", "10", "8", "5", "18"],
- showBackground: true,
- backgroundStyle: {
- color: "rgba(187,230,245,.3)",
- }
- },
- {
- name: "中型",
- type: "bar",
- stack: "one",
- data: ["2", "6", "5", "10", "10", "8", "5", "1"],
- },
- {
- name: "小型",
- type: "bar",
- stack: "one",
- data: ["3", "5", "1", "10", "3", "9", "15", "1"],
- },
- ],
- }
- this.createStackBarChart(stackBarData);
- let barData_01 = {
- id: 'barChart_01',
- xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
- xAxisRotate: 30,
- title: '',
- showLegend: false,
- yAxisName: '座',
- series: [
- {
- name: "水库数量",
- type: "bar",
- color: '#63B7F9',
- barWidth: 12,
- data: ["20", "30", "15", "1", "10", "8", "5", "18"],
- showBackground: true,
- backgroundStyle: {
- color: "rgba(187,230,245,.3)",
- }
- }
- ]
- }
- this.createStackBarChart(barData_01);
- let barData_02 = {
- id: 'barChart_02',
- xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
- xAxisRotate: 0,
- title: '',
- showLegend: false,
- yAxisName: '座',
- series: [
- {
- name: "水库规模",
- type: "bar",
- color: '#81E79C',
- barWidth: 12,
- data: ["20", "30", "15", "1", "10", "8", "5", "18"],
- showBackground: true,
- backgroundStyle: {
- color: "rgba(187,230,245,.3)",
- }
- }
- ]
- }
- this.createStackBarChart(barData_02);
- this.createPieChart()
+
},
methods: {
- createStackBarChart(chartData) {
- const myChart = this.$echarts.init(
- document.getElementById(chartData.id)
- );
- // 指定图表的配置项和数据
- var option = {
- title: {
- show: chartData.title != '',
- text: chartData.title,
- top: 10,
- right: 20,
- textStyle: {
- color: "#BDD8F9",
- fontSize: 16,
- fontWeight: 400,
- },
- },
- legend: {
- show: chartData.showLegend,
- top: 10,
- itemWidth: 8,
- itemHeight: 8,
- itemGap: 20,
- left: "center",
- textStyle: {
- color: "#B5C5D4",
- fontSize: 14,
- },
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow"
- },
- formatter: function (e) {
- if (e.length > 0) {
- var t = "".concat(e[0].name + " <br/>");
- e.forEach((item) => {
- t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
- })
- return t
- }
- }
- },
- xAxis: {
- data: chartData.xAxisData,
- name: "",
- axisLine: {
- onZero: true,
- lineStyle: {
- color: "rgba(186, 198, 208, .4)",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- rotate: chartData.xAxisRotate,
- interval: 0,
- fontSize: 14,
- color: "#B5C5D4",
- },
- },
- yAxis: {
- name: chartData.yAxisName,
- axisLabel: {
- fontSize: 13,
- color: "#B5C5D4",
- },
- nameTextStyle: {
- fontSize: 14,
- color: "#B5C5D4",
- },
- splitLine: {
- lineStyle: {
- color: ["#344B64"],
- type: "dashed",
- width: 2,
- },
- },
- },
- grid: {
- left: 20,
- right: 15,
- top: 50,
- bottom: 7,
- containLabel: true,
- },
- series: chartData.series,
- };
- myChart.setOption(option);
- },
- // 建言献策分析图表
- createPieChart() {
- let data = [
- {
- name: '特大暴雨',
- value: 59
- },
- {
- name: '大暴雨',
- value: 20
- },
- {
- name: '暴雨',
- value: 281
- }
- ,
- {
- name: '大雨',
- value: 59
- }
- ,
- {
- name: '中雨',
- value: 29
- }
- ,
- {
- name: '小雨',
- value: 281
- }
- ,
- {
- name: '无雨',
- value: 281
- }
- ]
- let total = data.reduce((prev, curr) => prev + curr.value, 0)
- let dom = document.getElementById("pie-chart");
- let pieChart = this.$echarts.init(dom);
- let option = {
- legend: {
- orient: 'vertical',
- left: '50%',
- top: 15,
- width: '100%',
- itemGap: 10,
- itemWidth: 8,
- itemHeight: 8,
- formatter: function (name) {
- let value = 0
- data.forEach((item) => {
- if(item.name == name) {
- value = item.value
- }
- })
- return `${name} ${value}个 ${((value*100)/total).toFixed(2)}%`;
- },
- textStyle: {
- color: '#fff',
- fontSize: 16,
- fontFamily: 'Roboto-Bold',
- }
- },
- radar: [
- {
- indicator: [
- { text: 'Indicator1' },
- { text: 'Indicator2' },
- { text: 'Indicator3' },
- { text: 'Indicator4' },
- { text: 'Indicator5' }
- ],
- center: ['25%', '50%'],
- radius: '80%',
- startAngle: 90,
- splitNumber: 1,
- shape: 'circle',
- axisName: {
- show: false,
- },
- splitArea: {
- areaStyle: {
- color: ['rgba(0, 0, 0, 0.2)'],
- }
- },
- axisLine: {
- lineStyle: {
- color: 'rgba(211, 253, 250, 0)'
- }
- },
- splitLine: {
- lineStyle: {
- color: 'rgba(51, 114, 210, .5)'
- }
- }
- },
- ],
- color: [
- '#DB983F',
- '#5D4EC5',
- '#379CF2',
- '#81E79C',
- '#AA8A6E',
- '#71E4D5',
- '#CDE5FF',
- ],
- series: [
- {
- name: '降雨等级',
- type: 'pie',
- radius: ['50%', '65%'],
- center: ['25%', '50%'],
- label: {
- show: true,
- position: 'center',
- color: '#D4E8F8',
- fontSize: 34,
- fontFamily: 'Roboto-Bold',
- formatter: () => {
- return total;
- },
- },
- labelLine: {
- show: false
- },
- itemStyle: {
- borderRadius: 0
- },
- data
- }
- ]
- };
- pieChart.setOption(option);
- },
+
},
destroyed() {},
};
-</script>
+</script>
\ No newline at end of file
--
Gitblit v1.9.3