共计 2018 个字符，预计需要花费 6 分钟才能阅读完成。
Echarts 很强大，但是文件较为琐碎且需要用到的时候不好找到对应的配置项，因为之前项目用到，花了比较多的时间去完成了定制化，所以抽空做了以下梳理，方便后续查阅
1)圆环图（饼图）延伸线样式设定及转行（标题和数据转行展示）（转行用 \n 就行 ）
效果图：
配置详解：
series: [{
type: 'pie',// 图表类型
radius: ['30%', '60%'],// 圆环大小设置，同心圆内外圆半径
labelLine: {// 环图延长线（指示线）样式设置，其他设置可参见官网
normal: {length: 10// 长度}
},
label: {// 圆环数据信息，目前是数据名称 + 数据
normal: {formatter: '{per|{b}}\n{c|{c}}\n{hr|}\n\n{a|}',// 延长线上线上数据,\n 为转行
padding: [0, -10],// 延长线和底托线位置修改，尽量不要留缝隙
rich: {
a: {// 数据样式设置
color: '#999',
lineHeight: 20,
align: 'center'
},
hr: {// 底托线设置
borderColor: 'auto',
width: '100%',
borderWidth: 0.5,
height: 0.5,
},
per: {padding: [4, 0],
}
}
}
},
data: [{
value: 75,// 元圆环图数据
name: '我是标题 1',// 圆环图数据名称
itemStyle: {// 圆环颜色等
color: '#137e86'
}
},
{
value: 23,
name: '我是标题 2',
itemStyle: {color: '#22ffc0'}
}
]2)极坐标
效果图：
配置详解：
angleAxis: {// 极坐标坐标设置，以下所有配置为去掉极坐标所有线条展示等
splitLine:{show:false},
axisLine :{show:false},
axisTick:{show:false},
axisLabel:{show:false},
}
radiusAxis: {//12 点方向坐标，用于展示该条曲线的数据名及数据
type: 'category',
axisLine :{show:false},
axisLabel:{// 对应数据 title 展示的样式
interval: 0,// 当数据分类太多时，要不要智能隐藏一些分类，只展示该条数据的曲线，0 为不隐藏
color:"#fff"
},
axisTick:{show:false},
data: ['好吃的 23', '不好吃的 123', '特别不好吃的 1234']
},
polar: {// 极坐标类必须包含此值},
series: [{
type: 'bar',
data: [123, 20, 75],// 每条分类对应数据值
color: function(params) {// 不同数据分类对应各不同颜色
var colorList = ['#0e44c2','#00ffff','#3d85c6',];
return colorList[params.dataIndex]
},
barWidth: 5,// 柱宽
barGap:3,// 间隔
coordinateSystem: 'polar',
}]3)渐变以及折柱合一
效果图：
配置详解：
xAxis: [// X 轴相关配置
{
type: 'category',
data: ['分类 1','分类 1','分类 1','分类 1','分类 1'...],
axisPointer: {type: 'shadow'},
axisLabel: {// X 轴分类 label 样式修改
color:"#fff"
},
}
],
yAxis: [// Y 轴可以根据需要设置多个，{
type: 'value',
name: '',
min: 0,
max: 100,
interval: 10,// 坐标间隔
axisLabel: {formatter: '{value} %'// 坐标轴展示
},
axisLine: {
lineStyle: {
width:'0',// 隐藏右边的 Y 轴，只保留左边的 Y 轴
color:"#fff"
}
},
nameTextStyle :{// 坐标轴颜色等样式调整
color:"#fff"
}
}
],
series: [// 整合两种图表
{
name:'参与率',
type:'bar',// 柱形图
itemStyle: { // 修改柱状图样色
normal: {
color: new echarts.graphic.LinearGradient(
1, 1, 0, 0,
[{offset: 0, color: '#3977E6'},
{offset: 1, color: '#37BBF8'}
]
)
}
},
barWidth: 20,// 柱子的宽度
data:[12/50*100,23,25,59,26,...]// 数据还可以做运算后展示到 Y 轴
},
{
name:'通过率',
type:'line',// 折线图
itemStyle: {
normal: {color: '#22ffc0',}
},
data:[12,23,25,59,26,...]
}
]
正文完
