首页 > 编程知识 正文

Echarts3实例 双Y轴折线

时间:2023-05-06 20:34:26 阅读:227763 作者:3639

实现效果

知识点 双Y轴:yAxisIndexY轴垂直标题调整左侧Y轴刻度 代码实现 option = { title: { text: '2018年管线数据利用统计', top:10, left:10 }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c}次" }, toolbox: { show : true, top:10, right:10, feature : { ssdxlc : {show: true}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, grid:{ top:60, right:70, bottom:30, left:60 }, legend: { top:32, left:'center', data:['管线查询','在线调用'] }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type: 'value', name:"管n线n查n询n次n数n︵n次n︶", nameLocation:"center", nameGap:35, nameRotate:0, nameTextStyle:{ fontSize: 16, }, //默认以千分位显示,不想用的可以在这加一段 axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示 show:true, showMinLabel:true, showMaxLabel:true, formatter: function (value) { return value; } } }, { type: 'value', name:"在n线n调n用n次n数n︵n次n︶", nameLocation:"center", nameGap:35, nameRotate:0, nameTextStyle:{ fontSize: 16, }, //默认以千分位显示,不想用的可以在这加一段 axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示 show:true, showMinLabel:true, showMaxLabel:true, formatter: function (value) { return value; } } } ], series : [ { name:'管线查询', type:'line', smooth: true, yAxisIndex: 0, data:[35,15,8,12,11,6,3,0,0,0,0,0], itemStyle : { normal: {label : {show: true}}}, }, { name:'在线调用', type:'line', smooth: true, yAxisIndex: 1, data:[16,16,6,5,4,4,3,0,0,0,0,0], itemStyle : { normal: {label : {show: true}}}, } ] };

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。