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

import './style.less'
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Leftbottom(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)",
  ]
  let underColorList = [
    "rgba(7,185,254,0.5)",
    "rgba(28,96,254,0.5)",
    "rgba(4,251,240,0.5)",
  ]
  const safetyData = [
  {name: '县道', value: 72},
  {name: '乡道', value: 17},
  {name: '村道', value: 4},
  ]
  const chartTitle = '道路总公里';
  const title = '基础设施安全监测版块';
  let name = [], emptyName = []
  console.log(data,'传入的值')
  console.log(emptyName,'第二个')
  // const name = data?.map(d)
  data?.forEach(d => {
    name.push(d.name)
    emptyName.push({
      name: '',
      value: d.value
    })
  })
  
  // 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:'10%',
  //   //   top:'35%',
  //   //     subtext:chartTitle,//副标题文本
  //   //     textStyle:{
  //   //       fontFamily : "YouSheBiaoTiHei",
  //   //       fontSize: 20,
  //   //       color:'#FFFFFF',
  //   //       marginLeft:'20%',
  //   //       align:'center'
  //   //       },
  //   //       subtextStyle:{
  //   //         fontFamily : "PingFangSC-Medium PingFang SC",
  //   //         fontSize: 12,
  //   //         fontWeight:500,
  //   //         color:'#E9F7FF',
 
  //   //     }
  //   // },
  //   legend: [

  //     {
  //       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];
  //           },
  //         },
  //       },
  //     },
  //   ],
  // };
  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>公里`,
    },
//      title: {
//    text:total,//主标题文本
//    left:'20%',
//   //  top:'35%',
//      subtext:chartTitle,//副标题文本
//      textStyle:{
//        fontFamily : "YouSheBiaoTiHei",
//        fontSize: 20,
//        color:'#FFFFFF',
//        marginLeft:'20%',
//        align:'center'
//        },
//        subtextStyle:{
//          fontFamily : "PingFangSC-Medium PingFang SC",
//          fontSize: 12,
//          fontWeight:500,
//          color:'#E9F7FF',
//          align:'center'

//     }
// },
legend: {
  orient: "vertical",
  itemWidth: 10,
  itemHeight: 10,
  // right: '30%',
  right: '10%',
  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,12]
      },
    }
  }
},
    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-left-bottom'>
     <div className='build-left-bottom-title'>
        <h2>{total}</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 Leftbottom