free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

修改管理大屏左侧的环形图的转向

release_0.0.1
dengyinhuan 3 years ago
parent
d35c171831
commit
812dd001e9
1 changed files with 164 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 200
      web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js

200
web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
View File

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

Write Preview
Loading…
Cancel
Save