page 2 and 3

tengsx

2023-04-06 80eb2e8d0eb78caf0b5d369aba18f99ed1222b97

 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>