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({});

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

    const option = {
      title: {
        text:'168',
        subtext: '水源总数',
        x: '22%',
        top:'33%',
        padding:[24,0],
        textStyle:{
          color:'#fff',
          fontSize:20,
          align:'center',
        },
        subtextStyle: {
          color: '#A6AFC0',
          fontSize: 16,
        },
      },
      legend: {
        //data: [echartData[0].name],
        orient: 'vertical',
        textStyle: {
          color: "#fff",
        },
        top:"10%",
        right:"10%",
        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);

    let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
    let chartData = [
      {
      name: "水库：100个水厂",
      value: 15,
      unit: '万吨'
    },
      {
        name: "河流：54个水厂",
        value: 8,
        unit: '万吨'
      },
      {
        name: "塘坝：29个水厂",
        value: 15,
        unit: '万吨'
      },
      {
        name: "溪沟：30个水厂",
        value: 2,
        unit: '万吨'
      }
    ];
    let arrName = [];
    let arrValue = [];
    let sum = 0;
    let pieSeries:any = [],
      lineYAxis:any = [];

    // 数据处理
    chartData.forEach((v, i) => {
      arrName.push(v.name);
      arrValue.push(v.value);
      sum = sum + v.value;
    })

    // 图表option整理
    chartData.forEach((v, i) => {
      pieSeries.push({
        name: '学历',
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
        center: ["30%", "50%"],
        label: {
          show: false
        },
        data: [{
          value: v.value,
          name: v.name
        }, {
          value: sum - v.value,
          name: '',
          itemStyle: {
            color: "rgba(0,0,0,0)"
          }
        }]
      });
      pieSeries.push({
        name: '',
        type: 'pie',
        silent: true,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
        center: ["30%", "50%"],
        label: {
          show: false
        },
        data: [{
          value: 7.5,
          itemStyle: {
            color: "#E3F0FF"
          }
        }, {
          value: 2.5,
          name: '',
          itemStyle: {
            color: "rgba(0,0,0,0)"
          }
        }]
      });
      //@ts-ignore
      v.percent = (v.value / sum * 100).toFixed(1) + "%";
      lineYAxis.push({
        value: i,
        textStyle: {
          rich: {
            circle: {
              color: color[i],
              padding: [0, 5]
            }
          }
        }
      });
    })

    const optionGxnl = {
      color: color,
      grid: {
        top: '15%',
        bottom: '54%',
        left: "30%",
        containLabel: false
      },
      yAxis: [{
        type: 'category',
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          formatter: function(params:any) {
            let item = chartData[params];
            console.log(item)
            //@ts-ignore
            return '{line|}{circle|●}{name|'+ item.name +'}{value|'+ item.value+'}{unit|万吨}'
          },
          interval: 0,
          inside: true,
          textStyle: {
            color: "#fff",
            fontSize: 13,
            rich: {
              line: {
                width: 30,
                height: 4,
                backgroundColor: {image: dashedPic}
              },
              name: {
                color: '#fff',
                fontSize: 13,
              },
              bd: {
                color: '#ccc',
                padding: [0, 5],
                fontSize: 13,
              },
              percent:{
                color: '#fff',
                fontSize: 13,
              },
              value: {
                color: '#fff',
                fontSize: 13,
                fontWeight: 500,
                padding: [0, 0, 0, 10]
              },
              unit: {
                fontSize: 13
              }
            }
          },
          show: true
        },
        data: lineYAxis
      }],
      xAxis: [{
        show: false
      }],
      series: pieSeries
    };
    setEchartsOptionGxnl(optionGxnl);
  },[])

  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=""/>*/}
          </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='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>
        <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