一、问题
2条y轴,y轴的坐标轴轴线axisLine太多,扰人视线,如图
二、经过
刚开始用分割线(yAxis.splitLine)做出来的这个效果。
后期,改为两条线合并为一条。
网上找一个没有关于splitLine的设置,查找ECharts,发现一种方法:通过yAxis.axisLine轴线,及yAxis.max、yAxis.interval、yAxis.splitNumber手动控制y轴的最大值、轴线的刻度间隔、分割段数来整合。
三、结果
如图:
code:
// 把2个y轴需要的数值,动态存为数组--项目中数组是从后台取得数据,动态添加的,此处直接写出来,方便操作
var eChartYaxis0 = ["208.153", "194.690", "192.156"];
var eChartYaxis1 = ["2.6", "2.4", "1.3"];
// y轴--计算
var max0 = +eChartYAxis0[0] ? +eChartYAxis0[0] : 0
for (let i = 0, len = eChartYAxis0.length; i < len; i++) {
let curVal = +eChartYAxis0[i] ? +eChartYAxis0[i] : 0
if (curVal > max0) {
max0 = curVal
}
}
var max1 = +eChartYAxis1[0] ? +eChartYAxis1[0] : 0
for (let i = 0, len = eChartYAxis1.length; i < len; i++) {
let curVal = +eChartYAxis1[i] ? +eChartYAxis1[i] : 0
if (curVal > max1) {
max1 = curVal
}
}
if (max0 === 0) {
max0 = 10
} else {
max0 = Math.ceil(max0 / 10) * 10
}
if (max1 === 0) {
max1 = 10
} else {
max1 = Math.ceil(max1 / 10) * 10
}
var splitNumber = 5
var interVal0 = max0 / splitNumber
var interVal1 = max1 / splitNumber
// ECharts -- setOption
GDPOption.yAxis[0].max = max0
GDPOption.yAxis[1].max = max0
GDPOption.yAxis[0].interval = interval0
GDPOption.yAxis[1].interval = interval1
GDPOption.yAxis[0].splitNumber = splitNumber
GDPOption.yAxis[1].splitNumber = splitNumber
上图,完整的option,如下
// 在这里插入代码片
let GDPOption = {
color: ['#004a79', '#007879'], // 设置图表主色调
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: true,
alignWithLabel: true
}
},
yAxis: [
{
type: 'value',
position: 'left',
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
}
},
{
type: 'value',
position: 'right',
offset: 0,
axisLine: {
lineStyle: {color: '#d9d9d9'}
},
axisTick: {
show: false
}
}
],
series: [
{
data: ["208.153", "194.690", "192.156"],
barWidth: '24px',
type: 'bar'
},{
data: ["2.6", "2.4", "1.3"],
yAxisIndex: 1,
type: 'line'
}
]
}
四、特别提示
GDPOption .series中的data数据,也是动态添的