daimp-front/sub-government-affairs-service/src/views/statistics/component/environment/index.vue

<template>
  <section>环境影响与经济效益分析</section>
  <div>
    <el-row :gutter="20" style="margin: 16px 0">
      <el-col :span="24">
        <el-card>
          <div ref="environment" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
      <el-col :span="24" style="margin: 16px 0">
        <el-card>
          <div ref="market" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div ref="profit" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';

/* --------------- data --------------- */
const environment = ref(null);
const market = ref(null);
const profit = ref(null);

// #region

// #endregion
onMounted(() => {
  const environmentChart = echarts.init(environment.value);
  const marketChart = echarts.init(market.value);
  const profitChart = echarts.init(profit.value);

  const environmentOption = {
    // color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
    title: {
      text: '土壤质量监测',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['土壤肥力', '酸碱度', '重金属含量'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2020', '2021', '2022', '2023', '2024'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '土壤肥力',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [120, 132, 101, 100, 90, 230, 210],
        color: 'rgb(80,135,236)',
      },
      {
        name: '酸碱度',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [100, 101, 191, 234, 290, 158, 259],
        color: 'rgb(104,187,196)',
      },
      {
        name: '重金属含量',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [150, 232, 201, 154, 190, 200, 250],
        color: 'rgb(88,165,92)',
      },
    ],
  };

  const marketOption = {
    // color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
    title: {
      text: '市场价格波动',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2020', '2021', '2022', '2023', '2024'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '土豆',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [120, 132, 101, 100, 90, 230, 210],
        color: 'rgb(80,135,236)',
      },
      {
        name: '花生',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [100, 101, 191, 234, 290, 158, 259],
        color: 'rgb(104,187,196)',
      },
      {
        name: '水稻',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [150, 232, 201, 154, 190, 200, 250],
        color: 'rgb(88,165,92)',
      },
      {
        name: '西红柿',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [128, 156, 180, 60, 190, 157, 169],
        color: 'rgb(242,189,66)',
      },
      {
        name: '玉米',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: [100, 232, 201, 154, 190, 330, 200],
        color: 'rgb(238,117,47)',
      },
    ],
  };

  const profitOption = {
    title: {
      text: '成本收益分析',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['2021', '2022', '2023', '2024', '2025'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        name: '利润',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} %',
        },
      },
    ],
    series: [
      {
        name: '成本',
        type: 'bar',
        barWidth: '12px',
        emphasis: {
          focus: 'series',
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: '收入',
        type: 'bar',
        barWidth: '12px',
        emphasis: {
          focus: 'series',
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '利润',
        type: 'line',
        barWidth: '12px',
        emphasis: {
          focus: 'series',
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          },
        },
        data: [60, 60, 30, 40, 60, 50, 80],
      },
    ],
  };

  environmentOption && environmentChart.setOption(environmentOption);
  marketOption && marketChart.setOption(marketOption);
  profitOption && profitChart.setOption(profitOption);
});

/* --------------- methods --------------- */
// #region

// #endregion
</script>

<style lang="scss" scoped></style>