根据上一篇文章的内容，我们来继续绘画出一张南丁格尔图作为饼图的进阶版。
第一步：在series里面添加roseType属性
roseType:'angle',
第二步：添加阴影
itemStyle: {
normal: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
注意：roseType和itemStyle那个T和S一定要大写
在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。
上述示例里使用的是 normal ，是在正常的样式下加阴影，如果想要配置为在鼠标 hover 的时候突出阴影，可以使用下述代码：
itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
这样一个带背景 的南丁格尔图就差不多成型了，接下来我们来尝试设置背景和标签颜色。
因被背景颜色是全局的，所以只需要在option下面设置就好，和series平级。
捕获.PNG
接下来设置文本样式：
全局textstyle文本样式
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
如果不想设置全局的文本样式，也可以分别对每个系列进行设置，每个系列的文本设置在 label.normal.textStyle，操作如下：
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
先看一下局部设置之后的效果图
捕获.PNG
说实话这个文本样式设置我没看太懂，一般来说标签和饼状图的扇形区域的颜色是相同的，全局设置只是强行把所有标签的颜色设置为了灰色，有些奇怪，其实只要在option函数里面写上这样一段话
color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)'],
没错这个color和backgroundColor一样写同一级就好了，这样就能改变每个扇形区域的颜色和标签的颜色，效果图可以看下面这张。
捕获.PNG
这个颜色好了之后就是设置引导线的颜色，跟上面的大致相同
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
这样引导线的颜色就是浅色的了
**********************************************************************************8
上面的都是教程，经过我自己研究，发现了一种丧心病狂的写法，由于背景是黑色的，所以各个扇形区域的颜色都用非常夸张的颜色来修饰，虽然有点丑，但是我是为了突出知识。
捕获.PNG
这是代码图，下面是效果图
捕获.PNG
发现了什么？我只需要在data里面针对修改，就能直接修改各个扇形的属性啦，包括引导线的颜色。
接下来是最后一步，设置明暗度变化。
visualMap: {
// 不显示 visualMap 组件，只用于明暗度的映射
show: false,
// 映射的最小值为 80
min: 80,
// 映射的最大值为 600
max: 600,
inRange: {
// 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}
}
这样就基本上大功告成啦。下面是效果图及源代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/echarts.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="muu" style="height: 400px;width: 600px;"></div>
<script type="text/javascript">
var bingChart = echarts.init(document.getElementById('muu'));
option = {
backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
bingChart.setOption(option);
</script>
</body>
</html>
捕获.PNG
网友评论