Echarts 常用各类图表模板配置
注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；
以下代码都可以复制到 Echarts 官网，直接预览；
图标模板目录
一、环形动画
let num = 0;
let value = 60;
option = {
backgroundColor: '#142468',
title: {
text: 'echarts',
textStyle: {
color: '#fff',
fontSize: 40,
fontWeight: '100',
rich: {
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 40,
lineHeight: 75,
color: '#ffffff'
// padding: [5,0]
}
}
},
x: 'center',
y: 'center'
},
series: [
{
type: 'pie',
zlevel: 1,
silent: true,
radius: ['97%', '98%'],
hoverAnimation: false,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9933FF' // 0% 处的颜色
},
{
offset: 1,
color: '#00CCFF' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [1]
},
{
type: 'pie',
zlevel: 2,
silent: true,
radius: ['90%', '91%'],
startAngle: 90,
hoverAnimation: false,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9933FF' // 0% 处的颜色
},
{
offset: 1,
color: '#00CCFF' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
name: '1',
value: 50,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '2',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '3',
value: 20,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '4',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '5',
value: 50,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '6',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '7',
value: 20,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '8',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '9',
value: 50,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '10',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '11',
value: 20,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '12',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '13',
value: 50,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '14',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '15',
value: 20,
itemStyle: {
normal: {
borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
}
},
{
name: '16',
value: 2,
itemStyle: {
normal: {
color: 'rgba(88,142,197,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
}
]
},
{
type: 'pie',
zlevel: 3,
silent: true,
radius: ['83%', '84%'],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
name: '1',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '2',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '3',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '4',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '5',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '6',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '7',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '8',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '9',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '10',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '11',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '12',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '13',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '14',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '15',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '16',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '17',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '18',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '19',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '20',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '21',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '22',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '23',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '24',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '25',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '26',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '27',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '28',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '29',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '30',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '31',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '32',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '33',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '34',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '35',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '36',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '37',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '38',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '39',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '40',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '41',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '42',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '43',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '44',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '45',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '46',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '47',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '48',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '49',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '50',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '51',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '52',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '53',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '54',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '55',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '56',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '57',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '58',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '59',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '60',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '61',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '62',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '63',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '64',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '65',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '66',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '67',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '68',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '69',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '70',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '71',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '72',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '73',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '74',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '75',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '76',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '77',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '78',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '79',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '80',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '81',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '82',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '83',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '84',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '85',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '86',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '87',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '88',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '89',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '90',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '91',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '92',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '93',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '94',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '95',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '96',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '97',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '98',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '99',
value: 25,
itemStyle: {
normal: {
color: 'rgb(126,190,255)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
},
{
name: '100',
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
}
]
},
{
type: 'pie',
zlevel: 4,
silent: true,
radius: ['60%', '75%'],
color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,0.9)'],
startAngle: 50,
hoverAnimation: false,
label: {
normal: {
show: false
}
},
data: [1, 2, 3]
},
{
name: '',
type: 'custom',
zlevel: 7,
coordinateSystem: 'none',
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2, // 图形元素的中心在父节点坐标系（以父节点左上角为原点）中的横坐标值。
cy: api.getHeight() / 2, // 图形元素的中心在父节点坐标系（以父节点左上角为原点）中的纵坐标值。
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, // 外半径。
startAngle: ((0 + num) * Math.PI) / 180, // 开始弧度。
endAngle: ((1 + num) * Math.PI) / 180, // 结束弧度。
clockwise: true //是否顺时针。
},
style: {
stroke: '#fff',
fill: 'transparent',
shadowBlur: 5, //阴影
shadowOffsetX: 15,
shadowOffsetY: 15,
shadowColor: '#000',
lineWidth: 15
},
silent: true
};
},
data: [0]
}
]
};
function doing() {
setInterval(() => {
num = num + 2;
option.series[1].startAngle = option.series[1].startAngle - 2;
myChart.setOption(option);
}, 100);
}
setTimeout(doing, 1000);
二、环形图
echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；
文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501
三、k 线图
文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501
四、折线图
echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
文章链接：https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501
文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501
文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501
五、横向柱状图
echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；
文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501
六、折线图 + 柱状图
echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501
七、3D 柱状图
echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；
文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501
八、工程项目可视化
echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；
文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501
九、雷达图
echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；
文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501
十、象形柱图
echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；
文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501
十一、环形占比图
echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；
文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501