Highways4Good/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js

import React, { useEffect, useRef } from 'react';
import './style.less'
import * as echarts from 'echarts';
export default function LeftItem({datas}) {
    const seasonChartRef = useRef(null);
    // console.log(props.datas,'hhh')
    useEffect(() => {
        let chartInstance = echarts.init(seasonChartRef.current);
        const option = {
            tooltip: {
                show: true,
                trigger: 'item',
                position: 'right',
                backgroundColor: 'rgba(0,0,0,0.7)',
                textStyle: {
                  color: '#fff',
                },
                formatter: (values) => `${values.name}<b>${datas.processed}条</b>`,
              },
            title: {
            text: `${(datas.processed*100/datas.total).toFixed(2)}%`,
            top:'35%',
            textStyle: {
                fontSize: "1.375rem",
                fontFamily: 'PingFangSC-Medium, PingFang SC',
                fontWeight: 500,
                // marginTop:-60,
                color: '#FFFFFF'
            },
            subtext: '已处理',
            subtextStyle: {
                fontSize: "1rem",
                fontFamily: "PingFangSC-Regular, PingFang SC",
                fontWeight: 400,
                color: 'rgba(216,240,255,0.8000)'
            },
            // itemGap: -2, // 主副标题距离
            left: 'center',
            // top: 'center'
        },
        angleAxis: {
            max: 100, // 满分
            clockwise: false, // 逆时针
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {
            type: 'category',
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
          },
        polar: {
            center: ['50%', '50%'],
            radius: '180%' //图形大小
            // radius: ["78%", "86%"],
        },
        series: [{
            type: 'bar',
            showBackground: true,//这里只有显示背景才能出现背景灰色的线
            data: [{
                name: '已处理',
                value: (datas.processed*100/datas.total).toFixed(2),
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {
                            offset: 0,
                            color: "#00D5FF",
                          },
                          {
                            offset: 1,
                            color: "#1978E5",
                          }])
                    }
                },
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
        },
        ]
      }
        chartInstance.setOption(option);
    
      }, [])
  return (
    <div className='guanli-left-item'>
        {/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:"2%"}}>条</span> */}
        <div className='guanli-left-item-left'>
            <span>{datas.name}</span>
            <div>{datas.total} <span>条</span></div>
        </div>
        <div className='guanli-left-item-right'>
        <span></span>
            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}>
            </div>
        </div>
    </div>
  )
}