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(props) {
  const { width, height, data, total, text } = props
  const chartRef = useRef(null);
  let colorList = [
    "rgba(7,185,254,1)",
    "rgba(28,96,254,1)",
    "rgba(4,251,240,1)",
    "rgba(255,194,20,1)",
    'rgba(255,255,255,1)'
  ]
  let underColorList = [
    "rgba(7,185,254,0.5)",
    "rgba(28,96,254,0.5)",
    "rgba(4,251,240,0.5)",
    "rgba(255,194,20,0.5)",
    'rgba(255,255,255,0.5)',
  ]
  let name = [], emptyName = []
  // const name = data?.map(d)

  // const safetyData = [
  // {name: '一级公路', value: 42},
  // {name: '二级公路', value: 17},
  // {name: '三级公路', value: 17},
  // {name: '四级公路', value: 30},
  // {name: '等外公路', value: 30},

  // ]
  data?.forEach(d => {
    name.push(d.name)
    emptyName.push({
      name: '',
      value: d.value
    })
  })
  const chartTitle = '道路总公里';
  const title = '基础设施安全监测版块';
  // const number = 2738;
  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
  const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
  const legendColor = undefined;

  var titleNum = 15
  const option = {
    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>条`,
    },
    legend: {
      orient: "vertical",
      itemWidth: 10,
      itemHeight: 10,
      // right: '30%',
      left: '50%',
      top: 'center',
      align: 'left',
      data: name,
      formatter: (name) => {
        for (let i = 0; i < option.series[1].data.length; i += 1) {
          if (name === option.series[1].data[i].name) {
            let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
            return arr.join('\t');
          }
        }
      },
      textStyle: {
        rich: {
          a: {
            color: '#E9F7FF',
            fontSize: 14,
            padding:[0,10]
          },
          b: {
            fontSize: 16,
            fontFamily: 'YouSheBiaoTiHei',
            color: '#fff',
            padding:[0,0,0,15]
          },
        }
      }
    },
    grid: {
      left: '10%'
    },

    series: [
      {
        name: "底层背景",
        type: "pie",
        hoverAnimation: false,
        legendHoverLink: false,
        radius: ["50%", "62%"],
        center: ['25%', '50%'],
        color: underColorList,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        tooltip: {
          show: false,
        },

        data: emptyName,
      },
      {
        name: "公路等级统计",
        type: "pie",
        radius: ["57%", "70%"],
        center: ['25%', '50%'],
        color: colorList,
        label: {
          show: false
        },
        data: data,
      },
    ],
  };
  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(option);
    return ()=>{
      // clearInterval(changePieInterval)
    }
}, [data]);

  return (
    <div className='build-right-bottom'>
      <div className='build-right-bottom-title'>
        <h2>{total||0}</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