1.双Y轴显示数量和占比
app.title = '坐标轴刻度与标签对齐';
option = {
title : { //标题
x : 'center',
y : 5,
text : '数量和占比图' //换行用 \n
},
legend : { //图标
show : true,
x : 'center',
y : 30,
itemGap : 10,
itemWidth : 30,
itemHeight : 10,
data : ['one','three']
},
color: ['#3398DB'],// 柱状图颜色
tooltip : { //鼠标悬停提示内容
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { //布局 控制图的大小，调整下面这些值就可以
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
//y2 : 40
// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
xAxis : [ //X轴
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [ //两个y轴
{
type : 'value',
axisLabel : {
show : true,
interval : 'auto',
formatter : '{value} '
},
splitNumber : 10,
splitLine : {
show : true,
lineStyle : {
type : 'dashed'
}
},
splitArea : {
show : false
}
} ,
{
type : 'value',
axisLabel : {
show : true,
interval : 'auto',
formatter : '{value} %'
},
splitNumber : 10,
splitLine : {
show : true,
lineStyle : {
type : 'dashed'
}
},
splitArea : {
show : false
}
}
],
series : [ //用于指定图标显示类型
{
name : 'one',
type : 'bar',
barMaxWidth:100,
yAxisIndex : '0',//使用第一个y轴
itemStyle : {
normal : {
color : 'rgba(139,26,26,1)', //柱子颜色
borderType : 'dashed',
label : { //设置柱子上面的内容
show : false, //数据是否显示在柱子上
position : 'inside',
offset : [ 0, 0 ],
formatter : '{c}', //如果是百分比：formatter : '{c}%',
textStyle : {//字体内容设置
color : '#000000',
fontStyle : 'normal',
fontWeight : 'normal',
fontFamily : 'sans-serif',
fontSize : 6
}
}
}
},
data : [10, 52, 200, 334, 390, 330, 220]
},
{
name : '比例',
type : 'line',
symbol : 'emptyCircle',
showAllSymbol : true, //动画效果
symbolSize : 12,
smooth : true, //光滑的曲线
yAxisIndex : '1',
itemStyle : {
normal : {
color : 'rgba(139,26,26,1)',
label : {
show : true,
formatter : '{c}%',
textStyle : {
color : '#000000'
}
}
}
},
data : [1, 5, 20, 33, 39, 33, 22]
},
]
};