From 812dd001e919472a4e3176ad1b6e0ce229374141 Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Fri, 22 Jul 2022 17:28:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=AE=A1=E7=90=86=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=E5=B7=A6=E4=BE=A7=E7=9A=84=E7=8E=AF=E5=BD=A2=E5=9B=BE?= =?UTF-8?q?=E7=9A=84=E8=BD=AC=E5=90=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/guanli/LeftItem.js | 224 +++++++++++++----- 1 file changed, 164 insertions(+), 60 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js index d774030c..c50f7e59 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js +++ b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js @@ -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 (