本文主要针对饼图进行相关的自定义配置。
饼图常用配置如下：
名称 | 效果 |
name | 图标名称 |
type | 指明图形的类型'pie','line'等 |
hoverAnimation | 鼠标hover是否需要动画 |
radius | 饼图的半径，数组的第一项是内半径，第二项是外半径 |
center | 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。 |
label | 饼图图形上的文本标签，可用于说明图形的一些数据信息 |
labelLine | 标签的视觉引导线样式 |
data | 渲染数据 |
1、实现labelLine与图表的分离
思路：同圆心，不同半径两个饼图叠加的方式实现，半径较小的只显示图，不显示引导线与label，半径较大的不显示图，只显示引导线与label，这样就可以形成分离状态。
实现代码如下：
series: [{
//半径
radius: ['0%', '40%'],
type: 'pie',
label: {
//不显示文字
show: false
},
labelLine: {
//不显示引导线
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
]
},
{
radius: ['0', '45%'],
type: 'pie',
//文字样式显示
label: {
normal:{
show: true,
formatter:'{b} : {c}台 ',
}
},
//引导线样式设置
labelLine: {
smooth: 0,
length: 20,
length2: 40
},
itemStyle: {
//不显示饼图
opacity:0,
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
]
}
]
2、实现label 在labelLine(引导线)上，且label自定义样式
- hover时label、labelLine颜色改变
- lable自定义颜色、位于labelLine上方
- 饼图内边框与外边框设置
重点属性：label 中的 formatter属性
字符串模板 模板变量有：
-
{a}：系列名。 -
{b}：数据名, 即name。 -
{c}：数据值，即value。 -
{d}：百分比, 即数据所占的比例。
拿下面的栗子说明一下：
//{a|...} {b|...} 用于区分,区分的名字可以自定义，我这里直接使用了a、b、c;
formatter: '{a|{c}} {c|台} \n {b|{b}} \n\n',通过上面的格式可以通过rich分别对label设置样式，'\n'可以实现换行的效果，如果想让label位于labelLine上可以使用'\n\n'.rich: {
//value样式
a: {
color: '#f3c773',
//字体粗细
fontWeight: 'bold',
//字体大小
fontSize: 45,
//设置行高，如果上下挨的比较紧不美观时
lineHeight: 35,
//水平方向：对其方向
align: 'center',
//垂直方向 ：对齐方式。这里因为同一行的字体大小不一致，小字体会向上显得不美观；
verticalAlign: 'bottom',
},
//name样式
b: {
color: '#e05932',
fontWeight: 'bold',
fontSize: 18,
lineHeight: 40,
align: 'center',
},
//小字体：台
c: {
color: '#f3c773',
fontWeight: 'bold',
fontSize: 14,
align: 'center',
verticalAlign: 'bottom',
},
},
//label偏离引导线时设置分别为：上、右、下、左；
padding: [0, -90, 50, -90],
},
样式一：
实现代码如下：
series: [
{
name: '设备分布',
type: 'pie',
radius: ['55%', '85%'],
center: ['50%', '50%'],
// 饼图各部分颜色，部分数大于颜色数，就会循环使用这些颜色
color: [
'rgba(0,104,210,0.2)',
'rgba(0,104,210,0.4)',
'rgba(0,104,210,0.6)',
'rgba(0,104,210,0.8)',
'rgba(0,104,210,1)',
],
// 如果要使用formatter属性 ,name 为数据项名称，value 为数据项值
data:[
{value: 1, name: '桥西区'},
{value: 1, name: '宝安区'},
{value: 1, name: '福田区'},
],
//这里等一下单独说明
label: {
normal: {
show: false,
color: '#e05932',
formatter: '{a|{c}} {c|台} \n {b|{b}} \n\n',
rich: {
a: {
color: '#f3c773',
fontWeight: 'bold',
fontSize: 45,
lineHeight: 35,
align: 'center',
verticalAlign: 'bottom',
},
b: {
color: '#e05932',
fontWeight: 'bold',
fontSize: 18,
lineHeight: 40,
align: 'center',
},
c: {
color: '#f3c773',
fontWeight: 'bold',
fontSize: 14,
align: 'center',
verticalAlign: 'bottom',
},
},
padding: [0, -90, 50, -90],
},
},
labelLine: {
show: false,
//引导线颜色渐变
lineStyle: {
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: 'rgb(56,27,18)',
},
{
offset: 0.5,
color: 'rgb(224,89,50)',
},
{
offset: 1,
color: 'rgb(56,27,18)',
},
],
},
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
width: 2,
},
smooth: 0,
//第一条引导线长度
length: 30,
//第二条引导线长度
length2: 100,
},
itemStyle: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
emphasis: {
label: {
//hover时显示引导线
show: true,
},
labelLine: {
//hover时显示引导线
show: true,
},
itemStyle: {
//hover时改变 饼图部分颜色（这里是渐变）
color: new echarts.graphic.LinearGradient(0.2, 1, 0.2, 0, [
{ offset: 0, color: 'rgba(243,199,115,0.7)' },
{ offset: 0.7, color: 'rgba(200,140,82,0.7)' },
{ offset: 1, color: 'rgba(167,87,42,0.7)' },
]),
},
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay(idx) {
return Math.random() * 200;
},
},
{
type: 'pie',
//内边框
radius: ['54.2%', '55%'],
center: ['50%', '50%'],
// 鼠标移入变大
hoverAnimation: false,
//整圆
data: [100],
label: {
show: false,
},
},
{
type: 'pie',
//外边框
radius: ['84.2%', '85%'],
hoverAnimation: false,
center: ['50%', '50%'],
data: [100],
label: {
show: false,
},
},
],
样式二：
实现代码如下：
label: {
normal: {
show: true,
formatter: ' {c|} {a|{b}} \n {b|{c}}',
rich: {
a: {
color: '#157dff',
fontWeight: 'bold',
fontSize: 14,
lineHeight: 25,
align: 'center',
},
b: {
color: '#157dff',
fontWeight: 'bold',
fontSize: 24,
align: 'center',
},
//自定义圆圈，类似于css画圆
c: {
height: 10,
width: 10,
lineHeight: 10,
borderWidth: 1,
borderColor: '#157dff',
borderRadius: 10,
},
},
//有时label 会偏离饼图，不太美观，这个属性可以调整一下
padding: [0, -15],
},
echarts的配置很多，功能也很强大。希望这篇随笔能帮到大家，也是我自己学习的积累～
stay hungry, stay foolish
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
