yin.wei
/
bigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 运营监控界面中环状图样式优化

Browse Source
main
weiyin 10 months ago
parent 8d281383e2
commit ff27f2c3a7
1 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File

238
src/views/pageMonitor/bottomMiddle/index.vue
Unescape View File

@ -58,11 +58,130 @@ export default {
formatter: "{b}{c}", formatter: "{b}{c}",
color: "inherit", color: "inherit",
}, },
labelLine: {
show: true,
length: 20,
length2: 25,
smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
},
padAngle: 5, padAngle: 5,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
}, },
}, },
{
name: "外边框-outBig",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["62%", "62%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#2F58B4",
},
},
},
],
},
{
name: "外边框-outSmall",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["57%", "57%"],
label: {
normal: {
show: false,
},
},
showEmptyCircle: true,
itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)",
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#0D447C",
},
},
},
],
},
{
name: "内边框-inBig",
type: "pie",
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["25%", "25%"],
label: {
normal: {
show: false,
},
},
itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)",
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#006CFF",
opacity: 0.4,
},
},
},
],
},
{
name: "内边框-inSmall",
type: "pie",
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["20%", "20%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#fff",
opacity: 0.2,
},
},
},
],
},
], ],
}, },
chartOptionsRight: { chartOptionsRight: {
@ -82,11 +201,130 @@ export default {
formatter: "{b}{c}", formatter: "{b}{c}",
color: "inherit", color: "inherit",
}, },
labelLine: {
show: true,
length: 20,
length2: 25,
smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
},
padAngle: 5, padAngle: 5,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
}, },
}, },
{
name: "外边框-outBig",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["62%", "62%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#2F58B4",
},
},
},
],
},
{
name: "外边框-outSmall",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["57%", "57%"],
label: {
normal: {
show: false,
},
},
showEmptyCircle: true,
itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)",
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#0D447C",
},
},
},
],
},
{
name: "内边框-inBig",
type: "pie",
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["25%", "25%"],
label: {
normal: {
show: false,
},
},
itemStyle: {
shadowColor: "rgba(255, 0, 0, 1)",
shadowBlur: 10,
opacity: 1,
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#006CFF",
opacity: 0.4,
},
},
},
],
},
{
name: "内边框-inSmall",
type: "pie",
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["20%", "20%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#fff",
opacity: 0.2,
},
},
},
],
},
], ],
}, },
toDate: dayjs().format("YYYY-MM-DD"), toDate: dayjs().format("YYYY-MM-DD"),

Write Preview
Loading…
Cancel
Save