【Flask + ECharts】ECharts正反条形图X轴都设置成正数

ECharts正反条形图X轴都设置成正数

​我们的原网页设置如下​

option = {
title:{
text:"部分专业最高分和最低分"
},
dataZoom: {
start: 0,
type: "inside"
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: major
}
],
series: [
{
name: '最高分',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: max_score
},
{
name: '最低分',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: min_score
}
]
};

​其结果展示如下所示​

​现在我们需全部都设置为正数​

​先设置坐标轴​

xAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
// 负数取反 显示的就是正数了
if (value < 0) return -value
else return value
}
}
}
],

​再设置显示的值为正数​

series: [
{
name: '最高分',
type: 'bar',
stack: 'Total',
label: {
show: true,

},
emphasis: {
focus: 'series'
},
data: max_score
},
{
name: '最低分',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left',
formatter: (value) => {
// 值都是负数的 所以需要取反一下
return -value.data
}
},

emphasis: {
focus: 'series'
},
data: min_score
}
]

​如果设置了提示框，我们需要修改​

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: (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 + '<br/>'
}
return s
}
},