双Y轴为什么其中一个不能随数值的变化而变化echarts 折线配置项内容和展示
配置项如下
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
// Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
data: ['次数', '小时'],
padding: 5, // 图例内边距，单位px，默认上下左右内边距为5
itemGap: 50, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 60, //图例高度宽度
itemHeight: 30,
textStyle: { //文字样式
fontSize: '18',
fontFamily: '微软雅黑',
fontWeight: 'bold'
}
},
grid: {
top: "15%",
bottom: '15%',
containLabel: true
},
toolbox: {
show: true,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: '75%', // 水平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: '0%', // 垂直安放位置，默认为全图顶端，可选为： // ¦ {number}（y坐标，单位px） // 'top' ¦ 'bottom' ¦ 'center'
// color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
itemSize: 20,
feature: {
dataView: { //数据图表
show: true,
readOnly: true,
iconStyle: { //图标颜色
normal: {
borderColor: '#8acdef', //图标线框颜色
borderWidth: 2,
}
},
},
magicType: {
show: true,
type: ['line', 'bar'],
readOnly: true,
iconStyle: { //图标颜色
normal: {
borderColor: '#8acdef', //图标线框颜色
borderWidth: 2,
}
},
},
restore: {
show: true,
title: '还原',
iconStyle: { //图标颜色
normal: {
borderColor: '#8acdef', //图标线框颜色
borderWidth: 2,
}
},
},
saveAsImage: {
show: true,
title: '保存图片',
type: 'png',
lang: ['点击本地保存'],
iconStyle: { //图标颜色
normal: {
borderColor: '#8acdef', //图标线框颜色
borderWidth: 2,
}
},
},
}
},
calculable: true,
/* dataZoom : {
show : true,
realtime : true,
start : 20,
end : 80,
textStyle:{
fontStyle:20,
},
top:"90%"
},*/
xAxis: [
{
type: 'category',
nameGap: 600, //坐标轴名字里坐标系的距离
nameTextStyle: {
ontStyle: 'oblique',
fontWeight: 800,
fontSize: 40,
},
nameRotatea: 120,
axisLabel: {
roeate: 60,
interval: 3,
margin: 80,
textStyle: {
fontWeight: 800,
fontSize: 18,
}
},
data: function() {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2016-05-' + i);
}
return list;
}()
}
],
yAxis: [{
'type': 'value',
'name': '单位（次）',
'nameGap': 30, //坐标轴名字里坐标系的距离
'nameTextStyle': {
ontStyle: 'oblique',
fontWeight: 800,
fontSize: 18,
},
// 'max':100,
'splitNumber': 10,
//'boundaryGap':true, // x的距离
'axisLabel': { //字体
margin: 20,
textStyle: {
fontStyle: 'oblique',
fontWeight: 800,
fontSize: 18,
}
}
}, {
'type': 'value',
'name': '时长（小时）',
'nameGap': 30, //坐标轴名字里坐标系的距离
'nameTextStyle': {
ontStyle: 'oblique',
fontWeight: 800,
fontSize: 18,
},
// 'min':0,
// 'max':100,
'splitNumber': 10,
'axisLabel': { //字体
margin: 20,
textStyle: {
fontStyle: 'oblique',
fontWeight: 800,
fontSize: 18,
},
},
}, ],
series: [{
name: '次数',
type: 'line',
itemStyle: {
normal: { // 系列级个性化，横向渐变填充
label: {
show: true,
textStyle: {
fontSize: '20',
fontFamily: '微软雅黑',
fontWeight: 'bold'
}
}
}
},
data: function() {
var list = [];
for (var i = 1; i <= 30; i++) {
list.push(Math.round(Math.random() * 100));
}
return list;
}()
}, {
name: '小时',
type: 'line',
itemStyle: {
normal: { // 系列级个性化，横向渐变填充
label: {
show: true,
textStyle: {
fontSize: '20',
fontFamily: '微软雅黑',
fontWeight: 'bold'
}
}
}
},
data: function() {
var list = [];
for (var i = 0; i <= 30; i++) {
list.push(Math.round(Math.random() * 100));
}
return list;
}(),
}]
};
截图如下
