shuili_manager/jwtech-h5-page/pages/statistics/index.vue

<template>
  <view class="statistics">
    <!-- 行政区划下拉选择卡片 -->
    <view class="cc-query-dropdowns">
      <picker mode="selector" :range="districts" v-model="selectedDistrict">
        <view class="dropdown">
          行政区划
          <image src="/static/images/icon/down.png" />
        </view>
      </picker>
    </view>

    <view class="chart-list">
      <!-- 项目投资统计柱形图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目投资统计</view>
        <canvas id="investmentChart"></canvas>
      </view>
  
      <!-- 项目分类统计柱形图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目分类统计</view>
        <!-- <ec-canvas id="categoryChart" :ec="categoryChartOption"></ec-canvas> -->
        <canvas id="categoryChart"></canvas>
      </view>
  
      <!-- 项目类型统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目类型统计</view>
        <!-- <ec-canvas id="typeChart" :ec="typeChartOption"></ec-canvas> -->
        <canvas id="typeChart"></canvas>
      </view>
  
      <!-- 项目状态统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目状态统计</view>
        <!-- <ec-canvas id="statusChart" :ec="statusChartOption"></ec-canvas> -->
        <canvas id="statusChart"></canvas>
      </view>
  
      <!-- 项目行政区划分布统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目行政区划分布统计</view>
        <!-- <ec-canvas id="districtChart" :ec="districtChartOption"></ec-canvas> -->
        <canvas id="districtChart"></canvas>
      </view>
  
      <!-- 项目预警统计饼图卡片 -->
      <view class="cc-card card">
        <view class="card-header">项目预警统计</view>
        <!-- <ec-canvas id="warningChart" :ec="warningChartOption"></ec-canvas> -->
        <canvas id="warningChart"></canvas>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="cc-operation-buttons">
      <view class="buttons-group">
        <view class="primary-button button" @click="handleGenerateProject()">生成报告</view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts'; // 引入 echarts 库
import { ref, onMounted } from 'vue'; // 使用 Vue 3 的响应式 API

export default {
  data() {
    return {
      // 行政区划数据
      districts: ['请选择', '北京市', '上海市', '广州市', '深圳市'],
      selectedDistrict: 0,

      // 图表配置
      investmentChartOption: null,
      categoryChartOption: null,
      typeChartOption: null,
      statusChartOption: null,
      districtChartOption: null,
      warningChartOption: null,
    };
  },
  methods: {
    onDistrictChange(e) {
      console.log('选择的行政区划：', this.districts[e.detail.value]);
    },

    // 初始化项目投资统计柱形图
    initInvestmentChart() {
      const chart = echarts.init(document.getElementById('investmentChart'));
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 使用阴影指示器
          },
        },
        legend: {
          data: ['年度计划', '实际完成'],
          bottom: '0%', // 将legend显示在下方
          itemWidth: 12, // 设置图例正方形的宽度
          itemHeight: 12, // 设置图例正方形的高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          top: '13%',
          bottom: '15%',
          containLabel: true, // 保证标签显示不超出范围
        },
        xAxis: {
          type: 'category',
          data: ['北京市', '上海市', '广东省', '浙江省', '江苏省', '山东省', '河北省', '河南省', '湖北省', '湖南省'],
          axisLabel: {
            interval: 0, // 确保X轴标签不重叠
            rotate: 45, // 旋转X轴标签以适应长文本
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          boundaryGap: true, // 使得柱状图的起点和终点显示
        },
        yAxis: {
          type: 'value',
          name: '金额/万元',
          nameLocation: 'end', // 将标题放在轴的起始位置
          nameGap: 20, // 设置标题与轴的间距
          axisLabel: {
            formatter: '{value}',
            color: '#8C8C8C', // Y轴字体颜色
            fontSize: 12, // Y轴字体大小
          },
          axisLine: {
            lineStyle: {
              color: '#8C8C8C',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0', // 灰色的分割线
            },
          },
          splitNumber: 5, // 控制Y轴的分割数
        },
        series: [
          {
            name: '年度计划',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 95, 130, 115, 100],
            barWidth: '35%', // 设置柱状图的宽度
            itemStyle: {
              color: '#00b39d', // 年度计划的柱状图颜色
            },
          },
          {
            name: '实际完成',
            type: 'bar',
            data: [100, 180, 130, 60, 50, 90, 80, 120, 110, 90],
            barWidth: '35%',
            itemStyle: {
              color: '#00a7ee', // 实际完成的柱状图颜色
            },
          },
        ],
      };
      chart.setOption(option);
    },

    // 初始化项目分类柱形图
    initCategoryChart() {
      const chart = echarts.init(document.getElementById('categoryChart'));
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 使用阴影指示器
          },
        },
        legend: {
          data: ['重大工程', '面上工程'],
          bottom: '0%', // 将legend显示在下方
          itemWidth: 12, // 设置图例正方形的宽度
          itemHeight: 12, // 设置图例正方形的高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
        },
        grid: {
          left: '2%',
          right: '2%',
          top: '13%',
          bottom: '15%',
          containLabel: true, // 保证标签显示不超出范围
        },
        xAxis: {
          type: 'category',
          data: ['北京市', '上海市', '广东省', '浙江省', '江苏省', '山东省', '河北省', '河南省', '湖北省', '湖南省'],
          axisLabel: {
            interval: 0, // 确保X轴标签不重叠
            rotate: 45, // 旋转X轴标签以适应长文本
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#000',
            },
          },
          boundaryGap: true, // 使得柱状图的起点和终点显示
        },
        yAxis: {
          type: 'value',
          name: '个',
          nameLocation: 'end', // 将标题放在轴的起始位置
          nameGap: 20, // 设置标题与轴的间距
          axisLabel: {
            formatter: '{value}',
            color: '#8C8C8C', // Y轴字体颜色
            fontSize: 12, // Y轴字体大小
          },
          axisLine: {
            lineStyle: {
              color: '#8C8C8C'
            },
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0', // 灰色的分割线
            },
          },
          splitNumber: 5, // 控制Y轴的分割数
        },
        series: [
          {
            name: '重大工程',
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 95, 130, 115, 100],
            barWidth: '35%', // 设置柱状图的宽度
            itemStyle: {
              color: '#00b39d', // 年度计划的柱状图颜色
            },
          },
          {
            name: '面上工程',
            type: 'bar',
            data: [100, 180, 130, 60, 50, 90, 80, 120, 110, 90],
            barWidth: '35%',
            itemStyle: {
              color: '#00a7ee', // 实际完成的柱状图颜色
            },
          },
        ],
      };
      this.categoryChartOption = option;
      chart.setOption(option);
    },

    // 初始化项目类型统计饼状图
    initTypeChart() {
      const chart = echarts.init(document.getElementById('typeChart'));
      const data = [
        {
          value: 2088,
          name: '饮水工程',
          itemStyle: {
            color: '#00b39d',
          },
        },
        {
          value: 1000,
          name: '枢纽工程',
          itemStyle: {
            color: '#0073ee',
          },
        },
        {
          value: 1000,
          name: '新建水库',
          itemStyle: {
            color: '#00a7ee',
          },
        },
        {
          value: 800,
          name: '病险',
          itemStyle: {
            color: '#00b368',
          },
        },
        {
          value: 1000,
          name: '灌区',
          itemStyle: {
            color: '#ecb800',
          },
        },
        {
          value: 350,
          name: '水保',
          itemStyle: {
            color: '#ec7000',
          },
        },
        {
          value: 350,
          name: '其他',
          itemStyle: {
            color: '#e04040',
          },
        },
      ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: false, // 去掉提示线
        },
        legend: {
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['32%', '50%'], // 设置饼图中心位置
            radius: ['80%', '60%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '28%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '24%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };

      this.typeChartOption = option;
      chart.setOption(option);
    },

    // 初始化项目状态统计饼状图
    initStatusChart() {
      const chart = echarts.init(document.getElementById('statusChart'));
      const data = [
        {
          value: 2088,
          name: '施工中',
          itemStyle: {
            color: '#00b39d',
          },
        },
        {
          value: 1000,
          name: '已完工',
          itemStyle: {
            color: '#ec7000',
          },
        }
      ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: true, // 去掉提示线
        },
        legend: {
          orient: 'horizontal',
          left: 'center', // 图例显示在右边
          bottom: '0%',  // 调整图例的垂直位置
          data: ['施工中', '已完工'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            // center: ['50%', '50%'], // 设置饼图中心位置
            radius: ['70%', '50%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: true,
              position: 'outside', // 标签在外部显示
              formatter: '{b}{c}', // 显示标签内容：名称、数值、百分比
            },
            // labelLine: {
            //   show: true,
            // },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '38%',
            left: 'center',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: 'center',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            }
          }
        ]
      };
      this.statusChartOption = option;
      chart.setOption(option);
    },

    // 初始化项目行政区划分布统计饼状图
    initDistrictChart() {
      const chart = echarts.init(document.getElementById('districtChart'));
      const data = [
        {
          value: 2088,
          name: '饮水工程',
          itemStyle: {
            color: '#00b39d',
          },
        },
        {
          value: 1000,
          name: '枢纽工程',
          itemStyle: {
            color: '#0073ee',
          },
        },
        {
          value: 1000,
          name: '新建水库',
          itemStyle: {
            color: '#00a7ee',
          },
        },
        {
          value: 800,
          name: '病险',
          itemStyle: {
            color: '#00b368',
          },
        },
        {
          value: 1000,
          name: '灌区',
          itemStyle: {
            color: '#ecb800',
          },
        },
        {
          value: 350,
          name: '水保',
          itemStyle: {
            color: '#ec7000',
          },
        },
        {
          value: 350,
          name: '其他',
          itemStyle: {
            color: '#e04040',
          },
        },
      ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: false, // 去掉提示线
        },
        legend: {
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['32%', '50%'], // 设置饼图中心位置
            radius: ['80%', '60%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '28%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '24%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };
      this.districtChartOption = option;
      chart.setOption(option);
    },

    // 初始化项目预警统计饼状图
    initWarningChart() {
      const chart = echarts.init(document.getElementById('warningChart'));
      const data = [
        {
          value: 2088,
          name: '饮水工程',
          itemStyle: {
            color: '#00b39d',
          },
        },
        {
          value: 1000,
          name: '枢纽工程',
          itemStyle: {
            color: '#0073ee',
          },
        },
        {
          value: 1000,
          name: '新建水库',
          itemStyle: {
            color: '#00a7ee',
          },
        },
        {
          value: 800,
          name: '病险',
          itemStyle: {
            color: '#00b368',
          },
        },
        {
          value: 1000,
          name: '灌区',
          itemStyle: {
            color: '#ecb800',
          },
        },
        {
          value: 350,
          name: '水保',
          itemStyle: {
            color: '#ec7000',
          },
        },
        {
          value: 350,
          name: '其他',
          itemStyle: {
            color: '#e04040',
          },
        },
      ]
      // 计算总量
      const total = data.reduce((sum, item) => sum + item.value, 0);
      const option = {
        tooltip: {
          trigger: 'item',
          show: false, // 去掉提示线
        },
        legend: {
          orient: 'vertical',
          right: '5%', // 图例显示在右边
          top: '15%',  // 调整图例的垂直位置
          data: ['饮水工程', '枢纽工程', '新建水库', '病险', '灌区', '水保', '其他'],
          itemWidth: 12, // 图例宽度
          itemHeight: 12, // 图例高度
          itemStyle: {
            borderRadius: 0, // 确保图例为正方形
          },
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return `${name} ${item.value}`; // 自定义图例显示内容
          }
        },
        series: [
          {
            name: '项目类别',
            type: 'pie',
            center: ['32%', '50%'], // 设置饼图中心位置
            radius: ['80%', '60%'], // 设置饼图的内外半径
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: false,
              position: 'outside', // 标签在外部显示
              formatter: '{b}\n{c} ({d}%)', // 显示标签内容：名称、数值、百分比
            },
            labelLine: {
              show: true,
            },
            data,
            // 设置饼图的厚度
            roseType: false, // 确保饼图是圆形
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        ],
        graphic: [
          {
            type: 'text',
            top: '40%',
            left: '28%',
            style: {
              text: '合计', // 显示“合计”
              font: '16px Microsoft YaHei', // 字体样式
              fill: '#333' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
          },
          {
            type: 'text',
            top: '53%',
            left: '24%',
            style: {
              text: total, // 显示总量
              font: 'bold 24px Microsoft YaHei', // 字体样式
              fill: '#262626' // 字体颜色
            },
            // 使文本居中
            // textAlign: 'center',
            // textVerticalAlign: 'middle'
            // 使总量文字稍微下移以保持间距
            // silent: true,
            // top: 'center', // 这里可以调整以使其居中
            // style: {
            //   textAlign: 'center',
            //   textVerticalAlign: 'middle',
            // }
          }
        ]
      };
      this.warningChartOption = option;
      chart.setOption(option);
    },

    // 跳转到生成报告页
    handleGenerateProject() {
      this.$tab.navigateTo(`/pages/statistics/generate`);
    }
  },

  // 页面加载完成后，初始化所有图表
  mounted() {
    this.initInvestmentChart();
    this.initCategoryChart();
    this.initTypeChart();
    this.initStatusChart();
    this.initDistrictChart();
    this.initWarningChart();
  }
};
</script>

<style lang="scss" scoped>
.statistics {
  padding-bottom: 80px;
  .chart-list {
    padding: 16px 20px;
    .card {
      canvas {
        width: 100%;
        height: 250px;
      }
    }
  }
}


.card-body {
  padding: 20px;
  font-size: 16px;
  color: #333;
}

.ec-canvas {
  height: 300px;
}
</style>