Echarts双Y轴柱状图

var option = {title: {text: '一周推送及完成率',x:'center',y:'top',align:'center',textStyle:{color:'#666666',fontWeight:'bolder',fontSize:28}},tooltip: {trigger: 'axis',formatter: function (params) {   // 自定义toolTip提示框显示内容// alert(JSON.stringify(params));var res=''for(var i=0;i<params.length;i++){if(i===0){res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'}if(i===1){res+='<p>'+params[i].seriesName+':'+params[i].data+'%</p>'}}return res;},axisPointer: {// type: 'cross',  鼠标移动上去显示 虚刻度线crossStyle: {color: '#999'}},},toolbox: {show : false,top:10,right:10,feature : {mark : {show: false},magicType : {show: false, type: ['line', 'bar']},restore : {show: false},saveAsImage : {show: false}}},grid:{  //调整统计图上下左右边距top:80,right:70,bottom:50,left:75},legend: {top:45,    // 统计图两个方块到Title的距离left:'center',data:['推送班级数','平均完成率']},calculable : true,xAxis : [{type : 'category',data : ['周一','周二','周三','周四','周五'],axisPointer: {type: 'shadow'},axisLabel: {show: true,textStyle: {color: '#666666',fontSize:22}},axisLine:{   // X轴线的颜色lineStyle:{color:'#D5D5D5',width:2}}}],yAxis : [{splitLine: {   //控制刻度横线的显示show: false},type: 'value',// max: 20,min: 0,interval:5,minInterval:5,// name:"推\n送\n班\n级\n数",nameLocation:"center",nameGap:35,nameRotate:0,nameTextStyle:{fontSize: 16,},axisLabel: {formatter: '{value} 个',show: true,textStyle: {color: '#666666',fontSize: 20}},axisLine:{  // Y轴线的颜色、和轴线的宽度lineStyle:{color:'#D5D5D5',width:2}}},{splitLine: {show: false},type: 'value',max: 100,min: 0,interval:20,// name:"平\n均\n完\n成\n率",nameLocation:"center",nameGap:50,nameRotate:0,nameTextStyle:{fontSize: 16,},axisLabel: {formatter: '{value}%',show: true,textStyle: {color: '#666666',fontSize: 20}},axisLine:{lineStyle:{color:'#D5D5D5',width:2}}}],series : [{name:'推送班级数',type:'bar',yAxisIndex: 0,data:[20,26,30,25,55],itemStyle:{   //双Y轴A柱的柱体颜色normal:{color:'#77caff'}}},{name:'平均完成率',type:'bar',yAxisIndex: 1,data:[5,8,13,16,30],itemStyle:{   //双Y轴B柱的柱体颜色normal:{color:'#FFE482'}}}]};

效果图：

Echarts双Y轴柱状图相关推荐

echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整 X/Y轴名称的分布坐标轴刻度标签数值以某一值 ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
Echarts双Y轴，右侧Y轴标签不显示
先说一下如何实现双y轴,echarts中有个控制y轴的属性叫yAxis,这个属性可以是对象也可以是数组.当我们只设置一个Y轴时,它为对象:当我们要设置多个Y轴时,它是个数组.所以我们要设置双y轴,它就 ...

Echarts双Y轴柱状图

效果图：

Echarts双Y轴柱状图相关推荐

最新文章

热门文章