xf-web/src/views/Sygl/index.tsx

import {Modal, Tabs, Switch} from 'antd'
import React, {useEffect, useState} from 'react';
import ReactEcharts from "echarts-for-react";
import "./index.less"

const SyglPage: React.FC = () => {
  const [echartsOption, setEchartsOption] = useState({});

  const [echartsOptionGxnl, setEchartsOptionGxnl] = useState({});

  const [qslEchart, setQslEchart] = useState({});

  useEffect(()=>{
    var echartData = [
      {
      value: 16,
      name: '水库'
    }, {
      value: 90,
      name: '河流'
    }, {
      value: 47,
      name: '溪沟'
    }, {
      value: 15,
      name: '塘坝'
    }];

    const option = {
      title: {
        text:'168',
        subtext: '水源总数',
        x: '24%',
        top:'33%',
        padding:[24,0],
        textStyle:{
          color:'#fff',
          fontSize:20,
          align:'center',
        },
        subtextStyle: {
          color: '#A6AFC0',
          fontSize: 16,
          padding:[24,0],
        },
      },
      legend: {
        //data: [echartData[0].name],
        orient: 'vertical',
        textStyle: {
          color: "#fff",
          fontSize: 15,
        },
        top:"24%",
        right:"15%",
        formatter: (name:any) => {
          //console.log(name);
          //console.log(chartData);
          let item:any = echartData.find((i) => {
            return i.name == name;
          });
          let p = item.value;
          return name + '：' + p;
        },
      },
      series: [{
        name: '水源总数',
        type: 'pie',
        radius: ['60%', '80%'],
        center: ['30%', '52%'],
        hoverAnimation: false,
        color: ['#EDDB37', '#ED7037', '#29DC6D', '#00A3ED'],
        label: {
          normal: {
            show: false
          }
        },
        data: echartData
      }]
    };
    setEchartsOption(option);

    const optionGxnl = {
      grid: {
        top: "22%",
        bottom: "27%"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true
          }
        }
      },
      legend: {
        data: ["水源总量", "生产总量", "需水总量"],
        top: "2%",
        right: "14%",
        textStyle: {
          color: "#fff",
          fontSize: 14
        }
      },
      xAxis: {
        data: ["朝阳寺镇", "曲江镇", "忠堡镇", "清坪镇", "活龙坪乡", "小乡村", "高乐山镇", "唐崖镇", "大路坝区", "坪坝营镇", "黄金洞乡"],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: '#fff',
            width:2
          },
        },
        axisTick: {
          show: true //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff", //X轴文字颜色
            fontSize: 13
          },
          rotate: 60, // 角度值：Number
          fontSize: 11, // 顺便调小一点字体大小
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
          }
        }
      },
      yAxis: [{
        type: "value",
        name: "(m³)",
        nameTextStyle: {
          color: "#fff",
          fontSize: 13
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff',
            width:2
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 13
          }
        },

      },
        {
          type: "value",
          name: "(m³)",
          max:500,
          nameTextStyle: {
            color: "#fff",
            fontSize: 13
          },
          position: "right",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",//#8C95A6
              fontSize: 13
            }
          }
        }
      ],
      series: [
        {
          name: "水源总量",
          type: "bar",
          barWidth: 10,
          data: [5800, 5800, 5800, 6400, 6100, 6100, 6100, 5500, 6100, 6100, 6400],
          itemStyle: {
            normal: {
              color: "#006DC2",
              barBorderRadius: [0, 0, 0, 0]
            }
          },
        },
        {
          name: "生产总量",
          type: "bar",
          barWidth: 10,
          data: [6200, 5800, 5800, 6200, 6000, 6000, 6000, 5200, 6000, 6000, 6200],
          itemStyle: {
            normal: {
              color: "#18B586",
              barBorderRadius: [0, 0, 0, 0]
            }
          },
        },
        {
          name: "需水总量",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, //平滑曲线显示
          showSymbol: false,
          lineStyle: {
            color: "#FFD700",
            width:1,
          },
          data: [340, 330, 330, 380, 340, 320, 340, 300, 340, 320, 340]
        }
      ]
    };
    setEchartsOptionGxnl(optionGxnl);

    const data0 = [1, 1, 1, 1, 1];
    const qslOption = {
      tooltip: {
        // 在鼠标悬停时触发显示
        trigger: 'axis',
      },
      textStyle: {
        color: "#C9C9C9",
      },
      legend: {
        data: ['取水量'],
        type: "scroll",
        orient: 'vertical',
        selectedMode: false,
        right: "40%",
        top: "2%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      grid: {
        containLabel: true,
        left: "3%",
        top: "20%",
        bottom: "0%",
        right: "0%",
      },
      xAxis: {
        type: "category",
        data: [
          "2018",
          "2019",
          "2020",
          "2021",
          "2022",
        ],
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 20, //刻度标签与轴线之间的距离。
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
          fontStyle: "bold"
        },
      },
      yAxis: {
        name: "(m³)",
        max: 500,
        min: 0,
        nameTextStyle: {
          color: '#fff',
          opacity: 0.9
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            opacity: 0.9,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.3)',
          }
        },
        axisLabel: {
          textStyle: {
            fontFamily: "Microsoft YaHei",
            color: "#FFF",
          },
          fontSize: 12,
        },
      },
      series: [
        {
          type: "bar",
          data: [250, 370, 370, 370, 370],
          name:"取水量",
          barMaxWidth: "auto",
          barWidth: 30,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [{
                offset: 0,
                color: "#00A9FF",
              },
                {
                  offset: 1,
                  color: "#66DDFF",
                },
              ],
            },
          },
        },
        // color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
        {//一蓝底
          data: data0,
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          color: "#66DDFF",
          symbolOffset: ['0', "50%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },
        {//一蓝盖
          data: [250, 370, 370, 370, 370],
          type: "pictorialBar",
          barMaxWidth: "20",
          symbol: "diamond",
          symbolPosition: "end",
          color: "#77C9FF",
          symbolOffset: ['0', "-45%"],
          symbolSize: [30, 10],
          zlevel: 2,
          tooltip: {
            show: false // 不显示数据2的tooltip
          }
        },

      ],

      markArea: {
        silent: true,

      },

    };
    setQslEchart(qslOption);
  },[])

  return (
    <div className='content sygl-box'>
      <div className='left-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水源概况</div>
            <div className="echarts-box">
              <ReactEcharts
                option={echartsOption}
                style={{ width:"100%", height: '25vh' }}
              />
            </div>
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>近五年取水量</div>
          </div>
          <div className="tqyb-box1">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
            <ReactEcharts
              option={qslEchart}
              style={{width: "100%", height: 'calc( 100% - 10px )'}}
            />
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水源覆盖人口情况</div>
          </div>
          <div className="tqyb-box">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/syfgrkqk.png`} alt=""/>*/}
          </div>
        </div>
      </div>

      {/*<div className='center-map'>
        <iframe
          src="http://127.0.0.1:8080/source.html"
          width="100%"
          height="100%"
          frameBorder={0}//边框设置
          scrolling="no"//滚动设置
        ></iframe>
      </div>*/}

      <div className='map'>
        <img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/sygl-map.png`} alt=""/>
      </div>

      <div className='right-box'>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>各乡镇供需能力</div>
          </div>
          {/*<div className="tqyb-box2">
            <img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>
          </div>*/}
          <div className="tqyb-box1">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
            <ReactEcharts
              option={echartsOptionGxnl}
              style={{width: "100%", height: 'calc( 100% - 10px )'}}
            />
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>水质监测</div>
          </div>
          <div className="tqyb-box3">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/szjc.png`} alt=""/>*/}
          </div>
        </div>
        <div className='box'>
          <div className='box-title'>
            <div className='title-item'>安防监测</div>
          </div>
          <div className="szjc-box">
            {/*<img src={`${process.env.PUBLIC_URL}/assets/afjc.png`} alt=""/>*/}
          </div>
        </div>
      </div>
    </div>
  )
}

export default SyglPage