配置项如下
//某些图例是用到过dat.gui这个插件的,只是一直没找到教程,先用起来总是好事。
//下面的代码镶嵌在echart编辑器里面
//实际运用的时候可以不按照这个来,我觉得太繁琐了
//里面的的配置方法只是把下面的步骤包装了一次!
// 原有定义gui的步骤:
// 1.为控制板定义参数
// 2.控制板以什么样的形式展示参数(调色板,下拉框,输入栏等等)
// 3.为每一项控制板条目添加动作监控
//百度dat.gui会找到更好的教程,这里只做抛砖引玉.
//http://pan.baidu.com/s/1eRC5agU 密码:raat
//下面好像有个bug,把中间的圆环的label固定在中间会发生较大的偏移,另外仔细观察
//的话也会发现左右两个中间的标签也会发生偏移的现象,所以中间的标签用标题固定
//本来想左右也用标题的,发现对称不了,样式真是搞死我了,注意灵活运用就好
//求个赞啦! >_< !
// 这里借鉴'5643我'和'小明的小可'两位大神的圆环图格式演示一下效果
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(40, 40, 40, 0.5)',
}
};
var placeHolderStyle = {
normal: {
color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
}
};
option = {
title: {
text: '50%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: '#b697cd',
fontSize: 35
}
},
tooltip: {
show: false,
},
// color : ['#3dd4de','#b697cd','#a6f08f'],
// backgroundColor: 'rgba(0,0,0,0.8)',
series: [{
name: 'Pie1',
type: 'pie',
clockWise: false,
radius: ['80%', '85%'],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: 25,
itemStyle: {
normal: {
color: '#3dd4de',
shadowColor: '#3dd4de',
shadowBlur: 10
}
}
}, {
value: 75,
name: 'invisible',
itemStyle: placeHolderStyle,
}]
}]
}