import React, { useEffect, useRef } from 'react';
import './style.less'
import * as echarts from 'echarts';
export default function LeftItem() {
    const seasonChartRef = useRef(null);
    useEffect(() => {
        let chartInstance = echarts.init(seasonChartRef.current);
        const option = {
            title: {
            text: '75%',
            top:'35%',
            textStyle: {
                fontSize: 22,
                fontFamily: 'PingFangSC-Medium, PingFang SC',
                fontWeight: 500,
                // marginTop:-60,
                color: '#FFFFFF'
            },
            subtext: '已处理',
            subtextStyle: {
                fontSize: 16,
                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',
            data: [{
                name: '已处理',
                value: 75,
                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,
            barGap: '-100%', // 两环重叠
            z: 2,
        },{ // 灰色环
            type: 'bar',
            data: [{
                value: 100,
                itemStyle: {
                    color: '#092B7B ',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 5,
                    shadowOffsetY: 2
                }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 两环重叠
            z: 1
          }]
      }
      
    
      
        chartInstance.setOption(option);
    
      }, [])
  return (
    <div className='guanli-left-item'>
        <div className='guanli-left-item-left'>
            <span>莲塘镇</span>
            <div>244 <span>个</span></div>
        </div>
        <div className='guanli-left-item-right'>
        <span></span>
            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}>
            </div>
        </div>
    </div>
  )
}