Toggle navigation
Design elements✍
By
o***趣
2020-09-18 03:10:17
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var num1 = 50; var num2 = 60; var num3 = 70; option = { backgroundColor: '#0f253a', title: [{ text: 'Design elements✍', x: '50%', y: 30, textAlign: 'center', textStyle: { align: 'center', color: '#fff', fontSize: 30, fontWeight: '100', }, }, { text: 'Lorem ipsum', left: '49.5%', top: '48%', textAlign: 'center', textStyle: { fontSize: '16', color: '#fff', textAlign: 'center', fontWeight: '400', }, }, ], series: [{ type: 'pie', radius: ['25%', '32%'], center: ['50%', '50%'], z: 1, startAngle: 0, data: [{ hoverOffset: 1, value: num1, name: '', itemStyle: { color: '#df572d', }, label: { normal: { show: true, formatter: "{r|{c}%}", rich: { r: { color: 'rgba(255,255,255,1)', fontWeight: 'bold', fontSize: 18, }, }, position: 'inside', color: '#FFF', textShadowBlur: 5, textShadowOffsetX: 1, textShadowOffsetY: 2, textShadowColor: 'rgba(0,0,0,0.3)', }, }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, { label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, value: 100 - num1, hoverAnimation: false, itemStyle: { color: 'rgba(0,0,0,0)', }, } ] }, { type: 'pie', radius: ['28%', '29%'], center: ['50%', '50%'], z: 0, data: [{ hoverOffset: 1, value: num1, name: '', itemStyle: { color: '#d8d9d7', }, label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, ] }, { type: 'pie', radius: ['34%', '41%'], center: ['50%', '50%'], z: 1, startAngle: 10, data: [{ hoverOffset: 1, value: num2, name: '', itemStyle: { color: '#abc240', }, label: { normal: { show: true, formatter: "{r|{c}%}", rich: { r: { color: 'rgba(255,255,255,1)', fontWeight: 'bold', fontSize: 18, }, }, position: 'inside', color: '#FFF', textShadowBlur: 5, textShadowOffsetX: 1, textShadowOffsetY: 2, textShadowColor: 'rgba(0,0,0,0.3)', }, }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, { label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, value: 100 - num2, hoverAnimation: false, itemStyle: { color: 'rgba(0,0,0,0)', }, } ] }, { type: 'pie', radius: ['37%', '38%'], center: ['50%', '50%'], z: 0, data: [{ hoverOffset: 1, value: num1, name: '', itemStyle: { color: '#d8d9d7', }, label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, ] }, { type: 'pie', radius: ['43%', '50%'], center: ['50%', '50%'], z: 1, startAngle: 23, data: [{ hoverOffset: 1, value: num3, name: '', itemStyle: { color: '#50c8ac', }, label: { normal: { show: true, formatter: "{r|{c}%}", rich: { r: { color: 'rgba(255,255,255,1)', fontWeight: 'bold', fontSize: 18, }, }, position: 'inside', color: '#FFF', textShadowBlur: 5, textShadowOffsetX: 1, textShadowOffsetY: 2, textShadowColor: 'rgba(0,0,0,0.3)', }, }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, { label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, value: 100 - num3, hoverAnimation: false, itemStyle: { color: 'rgba(0,0,0,0)', }, } ] }, { type: 'pie', radius: ['46%', '47%'], center: ['50%', '50%'], z: 0, data: [{ hoverOffset: 1, value: num1, name: '', itemStyle: { color: '#d8d9d7', }, label: { show: false }, labelLine: { normal: { smooth: true, lineStyle: { width: 0 } } }, hoverAnimation: false, }, ] }, ] };
