You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.5 KiB
128 lines
3.5 KiB
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>
|
|
)
|
|
}
|
|
|