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, total, data, 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},

    // ]

    const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
    // const rightLegend = ['三级及以上','四级']
    //  let data=[
    //   {name: "四级公路", value: 2969},
    //  {name: "等外公路", value: 171},
    //  {name: "三级公路", value: 103},
    //  {name: "二级公路", value: 15},
    //  ]
    //  console.log(data.map(i=>i.name),'jjj')
    console.log(data);
    let dataq = rightLegend.map((item, index) => {
        console.log(item, index);
        if (data.map(i => i.name).includes(item)) {
            console.log(item);
            console.log(1);
            return { name: item, value: data.filter(i1 => i1.name === item)[0].value }
        } else {
            console.log(2);
            return { name: item, value: 0 }
        }
    })
    console.log(dataq, '数据')
    dataq?.sort((a, b) => b.value - a.value)
    dataq?.forEach(d => {
        name.push(d.name)
        emptyName.push({
            name: '',
            value: d.value
        })
    })
    const chartTitle = '道路总公里';
    const title = '基础设施安全监测版块';
    // const number = 2738;
    // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']

    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: dataq,
            },
        ],
    };
    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'>
            {/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> */}
            <div className='build-right-bottom-title'>
                <h2>{total || 0}</h2>
                <span>道路总公里</span>
            </div>
            <div className='img1'>
                <img src='/assets/images/quanju/all.png' />
            </div>
            <div className='img2'>
                <img src='/assets/images/quanju/chart-circle.png' />
            </div>
            <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
        </div>
    );
}
export default Rightbottom