折柱混合的y轴在right不在left且如何让折线图向上移动一部分
配置项如下
option = {
tooltip : {
trigger: 'axis',
show:"true"
},
toolbox: {
},
calculable : true,
legend: {
data:['会员数']
},
//图标位置修改
grid:{
x:30,
y:45,
x2:5,
y2:20,
borderWidth:1
},
xAxis : [
{
type: 'category',
boundaryGap: true,
data : ['1000','2000','3000','40000','10000'],
splitLine:{show: false},//去除网格线
//splitArea : {show : true},//保留网格区域
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左边线的颜色
width:'2'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
}
},
],
//折柱混搭的时候yaxis的{}需要两个
yAxis : [
{
show:'false',
splitLine:{ show:false}, //改设置不显示坐标区域内的y轴分割线
//splitNumber:2, //设置y轴的数值个数
},
{
show:'false',
type : 'value',
splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线
},
{
type : 'value',
name: '会员数',
position:'left',
show:'false',
nameTextStyle: {
color: '#fff' //文字颜色
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff' //坐标轴字颜色
}
},
splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线
},
{
axisLine: {
position:"left",
lineStyle: {
type: 'solid',
color: '#fff',//左边线的颜色
width:'2'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
}
}
],
series : [
{
name:'会员数',
type:'bar',
data:[500,200,300,200,100],
barWidth : 20,//柱图宽度
itemStyle: {
//通常情况下:
normal:{
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params){
var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
},
},
{
name:'会员数',
type:'line',
yAxisIndex: 1,
data:[500,200,300,200,100],
}
]
};