echarts横向柱状图标签靠右对齐显示
上图中其实每条柱子只有一条数据,我们现在把它当作两条数据来看,左边一条,右边一条,然后把两条数据重叠在一起,就可以渲染出一条数据的视觉。两条柱条的数据是一样的,只不过左边的柱条不显示label,只让右边的显示。柱状图有背景色并且标签右对齐。本来以为echarts自带这些属性,查看了之后并没有找到直接能右对齐的属性,只有添加背景色的属性:`showBackground`,且这个属性是大于等于4.7版
·
需求如图:
柱状图有背景色并且标签右对齐。本来以为echarts自带这些属性,查看了之后并没有找到直接能右对齐的属性,只有添加背景色的属性:`showBackground`,且这个属性是大于等于4.7版本的可以。
下面说一下解决思路:
上图中其实每条柱子只有一条数据,我们现在把它当作两条数据来看,左边一条,右边一条,然后把两条数据重叠在一起,就可以渲染出一条数据的视觉。然后让标签距离右边的柱条一定的距离,就实现右对齐了。两条柱条的数据是一样的,只不过左边的柱条不显示label,只让右边的显示。
比较重要的步骤是第一条数据的`zlevel`设为2,第二条数据的`barGap`设为`-100`
代码如下:
option = {
color: ['#F95757', '#00CA99', '#9C67E0', '#F7C739', '#4D8EFF'],
legend: {
show: false
},
grid: {
top: 20,
left: '3%',
right: '15%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
max: 'dataMax', // 保证百分比和柱状图宽度对应得上
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
data: [],
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
{
name: '',
type: 'bar',
barWidth: 30,
zlevel: 2, // 层级高的显示在上面
data: []
},
{
name: '',
type: 'bar',
barWidth: 30,
barGap: '-100%', // 两条柱条重叠
data: [],
label: {
show: true,
color: '#666666',
position: 'right', // 标签右对齐
distance: 15,// 标签距离柱条的距离
formatter: params => {
const arr = [`${params.data.realValue}`, `{sep_color||}`, `${params.data.percent}%`]
return arr.join('')
},
rich: {
sep_color: {
color: '#E0E0E0',
padding: [0, 4]
}
}
},
itemStyle: {
color: '#F2F4F9'
},
emphasis: {
// 防止鼠标放柱状图上时柱子消失
itemStyle: {
color: '#F2F4F9'
}
}
}
]
},
给两条数据赋值:
// 第一条数据
this.option.series[0].data = res.data.left.data
// 求和,计算百分比用
this.regionData = res.data.left.data
this.regionTotal = 0
for (var i = 0; i < this.regionData.length; i++) {
this.regionTotal += this.regionData[i]
}
// 给第二个柱状图添加数据
this.option.series[1].data = this.regionData.map(item => {
return {
realValue: item, // 真实的柱条数据,即标签显示的数据
value: this.regionTotal, // 所有数据的和,以保证每根柱子第二条柱条宽度相等(方便右对齐),百分比占比宽度正确
percent: ((item / this.regionTotal) * 100).toFixed(2)
}
})
// 渲染
this.myChart1 = echarts.init(document.getElementById('regionChart'))
this.option && this.myChart1.setOption(this.option, true)
更新:
别的地方看到利用两个Y轴实现label右对齐
echart 柱状图如何让y轴文字靠左显示,series上文字右对齐显示_p g one的博客-CSDN博客_echarts y轴文字左对齐
更多推荐
所有评论(0)