实现echarts双y轴0刻度对齐

//定义y轴最大值、最小值
var yAxisMax = 1;
var yAxisMin = 1;
//定义图表组件
var option = {
tooltip: {
trigger: 'axis'

},

grid: { //坐标

left: '3%',

right: '4%',

bottom: '10%',

containLabel: true

},

legend: {
//图例

data:['net目标','net','拜访次数','拜访次数目标'],

y:'bottom'
//显示位置

},

xAxis: [
{
type: 'category',

//data: ['2018Q1','2018Q2','2018Q3','2018Q4'],

data: [],

axisPointer: {
type: 'shadow'

},

axisLine: {
show: true,

lineStyle: {
color: '#ccc'

}
},

axisTick: {
alignWithLabel: true

}
}
],

yAxis: [
{
type: 'value',

name: '规模(亿)',

max: function(value) {
yAxisMax = value.max;

return (value.max * 1.2).toFixed(0);

},

min: function(value) {
if(value.min < 0){
yAxisMin = value.min;

return (value.min * 1.2).toFixed(0);

}else {
yAxisMin = 0;

return 0;

}
},

axisLine: {
show: true,

lineStyle: {
color: '#ccc'

}
}
},

{
type: 'value',

name: '拜访次数',

max: function(value) {
return (value.max * 1.2).toFixed(0);

},

min: function(value) { //y轴左右两边0刻度对齐 比例一致

return ((value.max * yAxisMin)/yAxisMax * 1.2).toFixed(0);

},

axisLine: {
show: true,

lineStyle: {
color: '#ccc'

}
}
}
],

color:['#cc5616', '#FF8C00', '#FFA500', '#FA8072'],

series: [
{
name:'net目标',

type:'bar',

barWidth: '35%',

label: { //图表上显示数据

normal: {
show: true,

position: 'inside'

}
},

data:[]
},

{
name:'net',

type:'bar',

barWidth: '35%',

label: { //图表上显示数据

normal: {
show: true,

position: 'inside'

}
},

data:[]
},

{
name:'拜访次数',

type:'line',

yAxisIndex: 1, //使用双y轴的右边轴

barWidth: '35%',

label: { //图表上显示数据

normal: {
show: true,

position: 'top'

}
},

data:[]
},

{
name:'拜访次数目标',

type:'line',

yAxisIndex: 1, //使用双y轴的右边轴

barWidth: '35%',

label: { //图表上显示数据

normal: {
show: true,

position: 'top'

}
},

data:[]
}
]
};

最后

以上就是满意小笼包为你收集整理的实现echarts双y轴0刻度对齐的全部内容，希望文章能够帮你解决实现echarts双y轴0刻度对齐所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。