1.echarts legend 排列分组
legend:[
{
orient: 'horizontal',
x : '5%',
bottom:'20px',
width:'50px',
align: 'left',
data: ['AA', 'BB'],
},{
orient: 'horizontal',
x : '30%',
bottom:'20px',
width:'50px',
align: 'left',
data: ['CC', 'DD'],
},{
orient: 'horizontal',
x : '55%',
bottom:'20px',
width:'50px',
align: 'left',
data: ['EE', 'FF'],
},{
orient: 'horizontal',
x : '80%',
bottom:'20px',
width:'50px',
align: 'left',
data: ['GG', 'HH'],
}
]
- 柱形图顶部显示数量,自定义柱形图顶部颜色颜色,柱体的颜色渐变,柱形图圆角
//option下的series
series: [
{
type: 'bar',
barWidth: 30,//柱子宽度
barGap: 1, //柱子之间间距
itemStyle: {
normal: {
//顶部显示数量
label: {
formatter: '{c}',
show: true,
position: 'top',
textStyle: {
fontWeight: 'bolder',
fontSize: '12',
//自定义柱状图顶部颜色颜色
color: function (params) {
var colorList = [
'#76D5E5',
'#E5AF76',
'#D476E5',
'#E57680',
]
var colorItem = colorList[params.dataIndex]
return new echarts.graphic.Color(colorItem, false)
}
}
},
// 这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
barBorderRadius: [10, 10, 0, 0],
// 柱体的颜色渐变
// 右,下,左,上(1,0,0,0)表示从正右开始向左渐变
color: function (params) {
console.log(params)
var colorList = [
['#76D5E5', '#F5F8FE'],
['#E5AF76', '#F5F8FE'],
['#D476E5', '#F5F8FE'],
['#E57680', '#F5F8FE']
]
var colorItem = colorList[params.dataIndex]
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: colorItem[0]
},
{
offset: 1,
color: colorItem[1]
}
], false)
}
}
},
data: this.seriesData
}
]
3.图形位置
//option下的grid
grid: {
top: '10%',
left: '10%',
right: '10%',
bottom: '20%'
},
4.图标文字及网格线
//option下的xAxis和yAxis
xAxis: {
data: this.legendData,
splitLine: {
show: false //x轴网格线线
},
axisLabel: {
interval: 0,//x轴文字在图标下方
color: '#000000'
},
axisLine: {
show: false//x轴轴线
},
axisTick: {
show: false //表格刻度
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false//表格刻度
},
axisLine: {
show: false
},
axisLabel: {
color: '#999'
}
},