Highways4Good/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js

import './style.less'
import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Rightbottom() {
  // const {
  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
  // } = props;
  const chartRef = useRef(null);
  const safetyData = [
  {name: '一级公路', value: 42},
  {name: '二级公路', value: 17},
  {name: '三级公路', value: 17},
  {name: '四级公路', value: 30},
  {name: '等外公路', value: 30},

  ]
  const chartTitle = '道路总公里';
  const title = '基础设施安全监测版块';
  // const number = 2738;
  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
  const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
  const legendColor = undefined;
  const width = undefined
  const height = undefined
  var titleNum = 15
  let safetyOption = {
    tooltip: {
      show: true,
      trigger: 'item',
      position: 'right',
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: {
        color: '#fff',
      },
      formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
    },
    // title: {
    //   text:titleNum,//主标题文本
    //   left:'center',
    //   top:'35%',
    //     subtext:chartTitle,//副标题文本
    //     textStyle:{
    //       fontFamily : "YouSheBiaoTiHei",
    //       fontSize: 20,
    //       color:'#FFFFFF',
    //       // align:'center'
    //       },
    //       subtextStyle:{
    //         fontFamily : "PingFangSC-Medium PingFang SC",
    //         fontSize: 12,
    //         fontWeight:500,
    //         color:'#E9F7FF',
    //     }
    // },
    // graphic: {
    //   elements: [
    //     {
    //       type: 'text',
    //       style: {
    //         text: chartTitle || '安全\n监测',
    //         align: 'center',
    //         fill: '#fff',
    //         z: -999,
    //         zlevel: -999,
    //         font: '20px "YouSheBiaoTiHei", sans-serif',
    //       },
    //       left: 'center',
    //       top: 'center',
    //       position: [100, 100],
    //     },
    //   ],
    // },
    legend: [

      // {
      //   orient: 'vertical',
      //   left: 'left',
      //   top: 'center',
      //   textStyle: {
      //     color: '#DDEFFF',
      //     fontFamily: 'SourceHanSansCN-Regular',
      //     fontSize: 12,
      //   },
      //   itemWidth: 10,
      //   itemHeight: 10,
      //   data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'],
      //   formatter: (name) => {
      //     for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
      //       if (name === safetyOption.series[0].data[i].name) {
      //         return `${name} \t  ${safetyOption.series[0].data[i].value}`;
      //       }
      //     }
      //   },
      // },
      {
        orient: 'vertical',
        textStyle: {
          color: '#DDEFFF',
          fontFamily: 'SourceHanSansCN-Regular',
          fontSize: 12,
        },
        right: 0,
        top: 'center',
        align: 'left',
        itemWidth: 10,
        itemHeight: 10,
        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
        formatter: (name) => {
          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
            if (name === safetyOption.series[0].data[i].name) {
              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
            }
          }
        },
      },
    ],
    series: [
      {
        name: '公路等级统计',
        type: 'pie',
        radius: ['50%', '63%'],
        center:['30%','50%'],
        // emphasis: { // 设置高亮时显示标签
        //   label: {
        //     show: true
        //   },
        //   // scale: true, // 设置高亮时放大图形
        //   // scaleSize: 20
        // },
        label: {
          show: false,
        },
        // selectedMode: 'single',
        data: safetyData,
        itemStyle: {
          normal: {
            color: (color) => {
              const colorList = legendColor || [
                '#98D8CA',
                '#9494FF',
                '#2A43FF',
                '#FFD39F',
                '#9D5F8B',
                '#ADDE81',
                '#F8EBA2',
                '#5F8EFD',
                '#2BB4D3',
                '#1488C8',
              ];
              return colorList[color.dataIndex];
            },
          },
        },
      },
    ],
  };
  
  let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
  useEffect(() => {
    let myChart = echarts.init(chartRef.current);
    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
      for(var idx in safetyOption.series[0].data)
        // 遍历饼图数据，取消所有图形的高亮效果
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: idx
        });
      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: currentIndex,
      // });
    }
    const selectPie=() =>{ // 高亮效果切换到下一个图形
      var dataLen = safetyOption.series[0].data.length;
      currentIndex = (currentIndex + 1) % dataLen;
      highlightPie();
    }
    let changePieInterval = setInterval(selectPie, 1000);
      
    myChart.onChartReady = (instance) => {
      chartRef.current.safetyChart = instance;
    }
    myChart.setOption(safetyOption);
    return ()=>{
      clearInterval(changePieInterval)
    }
}, []);

  return (
    <div className='build-right-bottom'>
      <div className='build-right-bottom-title'>
        <h2>3234.23</h2>
        <span>道路总公里</span>
     </div>
      <img src='/assets/images/quanju/chart-circle.png'></img>
      <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
    </div>
  );
}
export default Rightbottom