echarts双向条形图中x轴的0在中间处理方法
想做的是这样的
ui
按照echarts做出来的是这样的
echarts
想把x轴的0放在中间，网上查了很多，都是左边右边做成数字一样的就好。但是x轴左边是百分比，右边是数量，做不到左右数字相同。
所以改变思路，由于左边的数组都是负数的，所以要找出最小值，假设最小值与右边的最大值相同，按比例换算左边数组。
const data22 = [-20, -50, -33, -5, -23] // 完成率
const data2 = []
const maxPerCent = Math.min.apply(null, data22) // 完成率中的最大值
data22.forEach(function(ele) {
data2.push(Math.abs(ele) * Math.max.apply(null, data1) / maxPerCent)
}) // 完成率换算成走访数，形成新数组
完整代码如下（ui还没改，不要嫌我的图长得丑）：
<template>
<div class="pic">
<div
ref="bc"
style="height:600px;width: 1000px" />
</div>
</template>
<!--股权穿透图-->
<script>
import echarts from 'echarts'
export default {
data() {
return {}
},
mounted() {
this.initChart(this.$refs.bc)
},
methods: {
initChart(chart) {
const myChart = echarts.init(chart)
const data1 = [1234, 22, 455, 566, 454] // 走访数
const data22 = [-20, -50, -33, -5, -23] // 完成率
const data2 = []
const maxPerCent = Math.min.apply(null, data22) // 完成率中的最大值
data22.forEach(function(ele) {
data2.push(Math.abs(ele) * Math.max.apply(null, data1) / maxPerCent)
}) // 完成率换算成走访数，形成新数组
let max = Math.max.apply(null, data1)
const b = Math.ceil(max).toString()
const c = Math.pow(10, b.length - 1)
max = (Number(b[0]) + 1) * c
const data = [-100, -75, -50, -25, 0, max / 4, max / 2, max / 4 * 3, max]
myChart.setOption({
title: {
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
return params[0].name +
'<br>走访数：' + params[1].value +
'<br>完成率：' + Math.abs(data22[params[0].dataIndex]) + '%' // 换算
}
},
legend: {
data: ['完成率', '走访数'],
left: 'right'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
position: 'top',
min: -max,
max: max,
splitNumber: 10,
axisLabel: {
formatter: function(value, index) {
if (data[index] < 0) {
return Math.abs(data[index]) + '%'
} else {
return Math.abs(data[index])
}
}
}
}
],
yAxis: [
{
type: 'category',
position: 'right',
axisTick: { show: false },
data: ['周一', 'sdf', 'dsf', 'fdgf', 'ret'], // 更改数组
axisLabel: {
color: '#000',
formatter: function(value) {
if (value.length > 7) {
return value.substring(0, 7) + '...'
} else {
return value
}
}
}
}
],
series: [
{
name: '完成率',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
formatter: function(params) {
return Math.abs(data22[params.dataIndex]) + '%' // 换算
}
}
},
itemStyle: {
normal: {
color: '#89C0FF'
}
},
barWidth: 10,
data: data2
},
{
name: '走访数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
formatter: function(params) {
return params.value
}
}
},
itemStyle: {
normal: {
color: '#FF6938'
}
},
barWidth: 10,
data: data1
}
]
})
}
}
}
</script>
