一、样式设置
在echarts中,柱状图图例的样式可以通过legend
属性进行设置。其中,需要注意的是legend
中的textStyle
属性可以单独控制文字样式,同时color
属性可以设置图例颜色。
legend: {
textStyle: {
fontStyle: 'italic',
color: '#333',
fontSize: 14
},
data: ['图例1', '图例2'],
color: ['#ff0000', '#00ff00']
}
上述代码中,legend
的textStyle
指定了字体样式,颜色和字号。同时,data
属性设置了图例的内容,color
属性设置了图例对应的颜色。
二、数据格式
在echarts中,柱状图图例的数据格式可以灵活转换,可以是一维数组,也可以是多维数组,例如下方代码所示的数据格式:
var data = [{
name: '图例1',
value: 100
}, {
name: '图例2',
value: 200
}]
以数据格式为基础,我们可以用不同的方式来呈现图例数据。例如,我们可以使用data
内的value
属性来作为柱状图高度的值:
{
xAxis: {
data: ['图例1', '图例2']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [100, 200]
}]
}
三、图例位置
在echarts中,柱状图图例位置可以通过legend
属性的orient
属性进行控制。orient
属性包含四个值可供选择,分别是'horizontal'
(水平),'vertical'
(垂直),'left'
(左对齐),'center'
(居中对齐),'right'
(右对齐)。
legend: {
orient: 'horizontal', //或:'vertical'、'left'、'center'、'right'
data: ['图例1', '图例2']
}
上述代码中,orient
属性设置为'horizontal'
,表示图例水平排列。
四、图例设置
在echarts中,我们可以通过legend
属性控制图例的显示与隐藏,同时可以设置默认选中的图例。
legend: {
selectedMode: 'single', //或多选'multiple'
selected: {
'图例1': true, //默认选中'图例1'
'图例2': false //默认不选中'图例2'
},
data: ['图例1', '图例2']
}
上述代码中,selectedMode
属性设置为'single'
,表示图例单选。selected
属性设置了默认选中的图例。
五、图例居右
在echarts中,我们可以通过grid
属性配合legend
属性实现图例居右的效果。
grid: {
right: '20%',
containLabel: true
},
legend: {
orient: 'vertical',
right: 10,
data: ['图例1', '图例2']
}
上述代码中,grid
的right
属性设置了图形区域离容器右侧的距离。同时,legend
的右边距属性right
也进行了设置。
六、柱状图类型
在echarts中,我们可以通过series
属性的type
属性,来切换柱状图的类型。默认柱状图的type
属性值为'bar'
,我们可以将其修改为'stack'
,实现堆叠柱状图效果。
{
xAxis: {
data: ['图例1']
},
yAxis: {
type: 'value'
},
series: [{
type: 'stack', //或'bar'
data: [100],
name: '图例1',
stack: '总量'
}, {
type: 'stack', //或'bar'
data: [50],
name: '图例2',
stack: '总量'
}]
}
七、图例太多怎么展示
当我们的柱状图图例太多时,可以使用legend
属性的scroll
属性进行滚动展示。
legend: {
type: 'scroll',
data: ['图例1', '图例2', '图例3', '图例4', '图例5', '图例6', '图例7', '图例8', '图例9', '图例10', '图例11', '图例12']
}
上述代码中,type
属性设置为'scroll'
,表示使用滚动展示图例。data
属性设置了所有需要展示的数据。
八、图例水平排列居右
我们可以使用legend
属性的orient
属性控制图例水平或垂直排列,但是当图例控制在一行显示时,我们可以使用justify
属性将其居右显示。
legend: {
type: 'scroll',
orient: 'horizontal',
data: ['图例1', '图例2', '图例3'],
right: '30%',
top: '80%',
width: '40%',
itemWidth: 20,
itemHeight: 10,
textStyle: {
color: '#000'
},
padding: [20, 5, 0, 5],
selected: {
'图例1': true,
'图例2': true,
'图例3': true
},
align: 'right',
justify: true
}
上述代码中,itemWidth
和itemHeight
属性分别设置了图例样式的宽度和高度,padding
属性设置了图例周围的边距。同时,align
属性设置了图例在grid
元素中的对齐方式,justify
属性设置了图例水平排列时的对齐方式。
九、柱状图参数
在echarts中,通过柱状图的各个属性我们可以自由控制柱状图的样式,并且使用柱状图参数,可以实现更加灵活的数据展示方式。
{
xAxis: {
type: 'category',
data: ['图例1', '图例2', '图例3'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [100, 200, 300],
barWidth: '60%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
}, {
offset: 0.5,
color: '#188df0'
}, {
offset: 1,
color: '#188df0'
}]),
barBorderRadius: [30, 30, 0, 0]
}
}
}]
}
上述代码中,barWidth
属性设置了柱状图宽度。itemStyle
属性设置了柱状图的颜色渐变和边角弧度效果,具体效果可以根据实际需求进行调整。使用LinearGradient
函数可以控制颜色渐变的方向和阶段,分别对应四个参数(x1, y1, x2, y2)
。barBorderRadius
属性设置的是柱状图的边角弧度效果。
十、数据过多选取3~5个与echarts柱状图图例相关的做为小标题
当柱状图数据过多时,我们可以通过xAxis
的axisLabel
属性进行轴标签的间隔控制,同时也可以通过数据筛选的方式,选取关键数据展示。
以下数据为例,我们仅展示前5个关键数据。
var data = {
category: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'],
series: [{
name: '图例1',
type: 'bar',
data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
barWidth: '20%'
}, {
name: '图例2',
type: 'bar',
data: [200, 400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000],
barWidth: '20%'
}]
};
var option = {
tooltip: {},
legend: {
data: ['图例1', '图例2']
},
calculable: true,
xAxis: [{
type: 'category',
data: data.category.filter(function(value, index) {
return index < 5;
}),
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '图例1',
type: 'bar',
data: data.series[0].data.filter(function(value, index) {
return index < 5;
}),
barWidth: '20%'
}, {
name: '图例2',
type: 'bar',
data: data.series[1].data.filter(function(value, index) {
return index < 5;
}),
barWidth: '20%'
}]
};
上述代码中,我们使用了filter
方法筛选出前5个数据,并在xAxis
和series
中进行了相关设置。