如何让echarts series上面的数字显示到最右部或最顶部？
时间：2022-11-27 15:00:00
项目场景：
如何让echarts series上面的数字显示在最右边或顶部？
在最近的项目中，我遇到了一个需要将接口数据渲染成横向显示的项目ecahrs柱图且series中间的数字似乎是最右边的需求。
先看效果图：
直接上代码
***解决：***右侧的主要代码固定在数字位置：
setTimeout(function(){
var width = myChart.getWidth(); var opt = myChart.getOption(); var grid = opt.grid[0]; var right = grid.right; // console.log(right); var left = grid.left; right = width*parseFloat(right)/100; left = width*parseFloat(left)/100; var x = width-left-right; myChart.setOption({
series:[{
label:{
show:true, position:'left', offset:[x 50,0] } }] }) 一开始以为是label位置position：right可以，后面发现要先拿到整个画布。grid在右侧显示的调整计算。
完整代码
var option ={
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.8)',
backgroundColor: 'rgba(0,0,0,0.6)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle: {
color: '#6a717b',
color: '#BDC8DC',
fontFamily:'PingFang',
},
},
legend: {
show:true,
itemGap: 12,
icon: "circle",
right: '25',
top: '0',
textStyle: {
color: '#BDC8DC',
fontSize: 15,
fontSize: 14,
fontFamily:'PingFang',
fontWeight: 200
},
},
//位置
grid: {
left: '3%',
right: '13%',
top: '12%',
bottom: '5%',
containLabel: true
},
//x轴设置
xAxis: {
type: 'value',
// axisLabel: {
// color: '#9FF'
// },
axisLabel: {
fontFamily:'PingFang',
color: '#E1EEFF'
},
//坐标轴样式
axisLine: {
lineStyle: {
color: '#2F4871',
},
width: 15
},
//name样式
nameTextStyle:{
color: '#BDC8DC',
fontSize: 15,
fontWeight: 200
},
axisTick: {
show: false,
},
//分割线样式
splitLine: {
show:false
},
},
//y轴设置
yAxis: {
type: 'category',
axisLabel: {
color: '#E1EEFF',
fontFamily:'PingFang',
},
//坐标轴颜色
axisLine: {
lineStyle: {
color: '#217FA3',
},
width: 15
},
axisTick: {
show: false,
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']
},
series: [
{
data:[424242, 152352,854242,525235,264575,376346,742426,924242,693248,392545,551516,66666,551516],
barWidth:12,
showBackground: true,
backgroundStyle: {
color: 'rgba(22, 69, 87, 0.4)'
},
label:{
formatter: "{c}"+"十万公里",
show:true,
position: 'right',
distance:-22,
textStyle:{
color:"#E1F4FF",
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[
{
offset: 0, color: '#2988D9'}, //渐变头部色
{
offset: 0.5, color: '#13B9F5'},
{
offset: 1, color: '#13B9F5'}
]
)
},
},
}
]
};
setTimeout(function(){
var width = myChart.getWidth();
var opt = myChart.getOption();
var grid = opt.grid[0];
var right = grid.right;
// console.log(right);
var left = grid.left;
right = width*parseFloat(right)/100;
left = width*parseFloat(left)/100;
var x = width-left-right;
myChart.setOption({
series:[{
label:{
show:true,
position:'left',
offset:[x+50,0]
}
}]
})
});
var myChart = echarts.init(document.getElementById('systemMultiBar'));
