首页 > 编程知识 正文

echarts柱状双y轴,echarts饼状实例

时间:2023-05-03 10:01:12 阅读:227761 作者:4706

实现效果

知识点 双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 : { cqdlt : {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 : ['排水','供水','燃气','热力','通信','电力','工业','广播','其他'] } ], yAxis : [ { type: 'value', name:"管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︶", nameLocation:"center", nameGap:50, nameRotate:0, nameTextStyle:{ fontSize: 16, }, //默认以千分位显示,不想用的可以在这加一段 axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示 show:true, showMinLabel:true, showMaxLabel:true, formatter: function (value) { return value; } } } ], series : [ { name:'管线长度', type:'bar', yAxisIndex: 0, data:[409.07,187.48,94.86,161.11,327.68,355.9,0.56,49.86,0.56], // itemStyle : { normal: {label : {show: true}}}, cqdltPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } }, { name:'管点数量', type:'bar', yAxisIndex: 1, data:[18447,7800,2843,6547,15170,26569,506,1873,542], // itemStyle : { normal: {label : {show: true}}}, cqdltPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] } } ] };

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