ts 正负条形图 组件_Echarts正负条形图将x轴都设置成正数

image.png

option = {

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

},

formatter: (params) => {

if (!params.length) return ''

let s = params[0].axisValueLabel + '
'

for (const iterator of params) {

// 如果是负数则反转

let d = iterator.data < 0 ? -iterator.data : iterator.data

s += iterator.marker + iterator.seriesName + '：' + d + '
'

}

return s

}

},

legend: {

data: ['利润', '支出', '收入']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [

{

type: 'value',

axisLabel: {

formatter: (value) => {

// 负数取反 显示的就是正数了

if (value < 0) return -value

else return value

}

}

}

],

yAxis: [

{

type: 'category',

axisTick: {

show: false

},

data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

}

],

series: [

{

name: '收入',

type: 'bar',

stack: '总量',

label: {

show: true

},

data: [320, 302, 341, 374, 390, 450, 420]

},

{

name: '支出',

type: 'bar',

stack: '总量',

label: {

show: true,

position: 'left',

formatter: (value) => {

// 值都是负数的 所以需要取反一下

return -value.data

}

},

data: [-120, -132, -101, -134, -190, -230, -210]

}

]

};