效果图如上!!
首先设置x轴都为正数,并且设置0轴固定在中间位置
在xAxis属性中
xAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
console.log(value);
// 负数取反 显示的就是正数了
if (value < 0) return -value
else return value
}
},
min : function(value){
//最小值设置,其中-value.max * 1.05 乘以1.05 ,主要是使图的边界小于最小的值,给边界留空间
return ( Math.abs(value.min) < value.max ? -value.max * 1.05 : value.min * 1.05).toFixed(2);
},
max : function(value){
//最大值设置,其中-value.min * 1.05 乘以1.05 ,主要是使图的边界大于最大于值,给边界留空间
return ( Math.abs(value.min) < value.max ? value.max * 1.05 : -value.min * 1.05).toFixed(2);
}
}
],
如果害需要鼠标移入出现提示框,就设置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: (params) => {
console.log(params);
if (!params.length) return ''
let s = params[0].axisValueLabel + '<br/>'
for (const iterator of params) {
// 如果是负数则反转
let d = iterator.data < 0 ? -iterator.data : iterator.data
s += iterator.marker + iterator.seriesName + ':' + d + ' MB/S' + '<br/>'
}
return s
}
},
x轴的坐标就设置完毕了,接下来设置y轴的数据
y轴可以通过偏移量去设置
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
//去掉y轴的线
axisLine: {
show: false,
},
nameLocation: "end",
nameTextStyle: {
verticalAlign: "middle",
},
//y轴的偏移
offset: -200,
//层级
zlevel: 1000,
//样式的设置
axisLabel: {
fontSize: 16,
fontWeight: "bold",
color: "#080808",
lineHeight: 18,
width:67,
height:21,
borderRadius:[100,100,100,100],
backgroundColor:'rgba(56,56,116,0.5)',
verticalAlign:'middle',
align:"center",
},
data: data
}
],
不过这种没有响应式,我们echarts图大小变化后,就会出现偏差
还有一种是通过series中有一个label,可以通过设置这个字体位置,字体样式达到我们需要的效果,还会随着echarts图大小变化
series:[
{
name: '用能人数',
type: 'bar',
stack: 'Total',
barWidth: '40%',
label: {
show: true,
formatter: '{b}',
offset:[25,0],
color:"#FFFFFF",
backgroundColor:'rgba(56,56,116,0.5)',
width:55,
height:15,
lineHeight :15,
borderRadius:[100,100,100,100],
position:[-30,0],
align:"center"
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "#FFEF84" // 0% 处的颜色
},
{
offset: 1,
color: "#B23EFF " // 100% 处的颜色
}
]
},
borderRadius: [15, 15, 15, 15]
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
emphasis: {
focus: 'series'
},
data: energy_num
}
]
在label中通过设置offset还有position,去调整位置,达到效果!!!