|
|
|
@ -5,76 +5,180 @@ export default function LeftItem() { |
|
|
|
const seasonChartRef = useRef(null); |
|
|
|
useEffect(() => { |
|
|
|
let chartInstance = echarts.init(seasonChartRef.current); |
|
|
|
const seasonOption = { |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
text: "已处理", |
|
|
|
x: "center", |
|
|
|
top: "55%", |
|
|
|
textStyle: { |
|
|
|
color: "#E9F7FF", |
|
|
|
fontSize: 14, |
|
|
|
}, |
|
|
|
// const seasonOption = {
|
|
|
|
// title: [
|
|
|
|
// {
|
|
|
|
// text: "已处理",
|
|
|
|
// x: "center",
|
|
|
|
// top: "55%",
|
|
|
|
// textStyle: {
|
|
|
|
// color: "#E9F7FF",
|
|
|
|
// fontSize: 14,
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// {
|
|
|
|
// text: "2333",
|
|
|
|
// x: "center",
|
|
|
|
// y: "35%",
|
|
|
|
// textStyle: {
|
|
|
|
// fontSize: "30",
|
|
|
|
// color: "#FFFFFF",
|
|
|
|
// fontFamily: "YouSheBiaoTiHei",
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// polar: {
|
|
|
|
// radius: ["78%", "86%"],
|
|
|
|
// center: ["50%", "50%"],
|
|
|
|
// },
|
|
|
|
// angleAxis: {
|
|
|
|
// max: 100,
|
|
|
|
// clockWise:false, //逆时针加载
|
|
|
|
// show: false,
|
|
|
|
// },
|
|
|
|
// radiusAxis: {
|
|
|
|
// type: "category",
|
|
|
|
// show: true,
|
|
|
|
// axisLabel: {
|
|
|
|
// show: false,
|
|
|
|
// },
|
|
|
|
// axisLine: {
|
|
|
|
// show: false,
|
|
|
|
// },
|
|
|
|
// axisTick: {
|
|
|
|
// show: false,
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// series: [
|
|
|
|
// {
|
|
|
|
// name: "",
|
|
|
|
// type: "bar",
|
|
|
|
// roundCap: true,
|
|
|
|
// clockWise:false, //逆时针加载
|
|
|
|
// barWidth: 30,
|
|
|
|
// showBackground: true,
|
|
|
|
// data: [40],
|
|
|
|
// coordinateSystem: "polar",
|
|
|
|
// itemStyle: {
|
|
|
|
// normal: {
|
|
|
|
// color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
|
// {
|
|
|
|
// offset: 0,
|
|
|
|
// color: "#AAC8FF",
|
|
|
|
// },
|
|
|
|
// {
|
|
|
|
// offset: 1,
|
|
|
|
// color: "#0041BB",
|
|
|
|
// },
|
|
|
|
// ]),
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// };
|
|
|
|
const option = { |
|
|
|
title: { |
|
|
|
text: '75%', |
|
|
|
top:'35%', |
|
|
|
|
|
|
|
textStyle: { |
|
|
|
fontSize: 22, |
|
|
|
fontFamily: 'PingFangSC-Medium, PingFang SC', |
|
|
|
fontWeight: 500, |
|
|
|
// marginTop:-60,
|
|
|
|
color: '#FFFFFF' |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "2333", |
|
|
|
x: "center", |
|
|
|
y: "35%", |
|
|
|
textStyle: { |
|
|
|
fontSize: "30", |
|
|
|
color: "#FFFFFF", |
|
|
|
fontFamily: "YouSheBiaoTiHei", |
|
|
|
}, |
|
|
|
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 |
|
|
|
}, |
|
|
|
], |
|
|
|
polar: { |
|
|
|
radius: ["78%", "86%"], |
|
|
|
center: ["50%", "50%"], |
|
|
|
}, |
|
|
|
angleAxis: { |
|
|
|
max: 100, |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
radiusAxis: { |
|
|
|
type: "category", |
|
|
|
show: true, |
|
|
|
axisLabel: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
radiusAxis: { |
|
|
|
type: 'category', |
|
|
|
// 隐藏刻度线
|
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "", |
|
|
|
type: "bar", |
|
|
|
roundCap: true, |
|
|
|
barWidth: 30, |
|
|
|
showBackground: true, |
|
|
|
data: [40], |
|
|
|
coordinateSystem: "polar", |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "#AAC8FF", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#0041BB", |
|
|
|
}, |
|
|
|
]), |
|
|
|
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: "#AAC8FF", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#0041BB", |
|
|
|
}]) |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
chartInstance.setOption(seasonOption); |
|
|
|
}], |
|
|
|
coordinateSystem: 'polar', |
|
|
|
roundCap: true, |
|
|
|
barWidth: 8, |
|
|
|
barGap: '-100%', // 两环重叠
|
|
|
|
z: 2, |
|
|
|
},{ // 灰色环
|
|
|
|
type: 'bar', |
|
|
|
data: [{ |
|
|
|
value: 100, |
|
|
|
itemStyle: { |
|
|
|
color: '#e2e2e2', |
|
|
|
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 ( |
|
|
|
|
dengyinhuan
3 years ago