Echarts双Y轴柱状图

Bertha 。 2022-02-16 11:59 699阅读 0赞

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'
                                }
                            }
                        }
                    ]
                };

## 效果图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dueF81MjA1NQ_size_16_color_FFFFFF_t_70]: /images/20220216/5a1bfffd91fc4c6abaaa458ed3b7c388.png

发表评论取消回复

表情：

评论列表（有 0 条评论，699人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 298 阅读

相关双Y轴echarts

[https://www.makeapie.com/editor.html?c=xE1oQek3jr][https_www.makeapie.com_editor.html_c

待我称王封你为后i/ 2022年11月10日 14:17/ 0 赞/ 337 阅读

相关 echarts 双柱状图，X轴带滚动条的柱状图

echarts 双柱状图：[https://www.makeapie.com/editor.html?c=xTJyYkJflT][https_www.makeapie.com_

快来打我*/ 2022年11月06日 14:56/ 0 赞/ 423 阅读

相关 echarts双y轴对齐

import as echarts from 'echarts'; var chartDom = document.getElementById('

「爱情、让人受尽委屈。」/ 2022年09月03日 00:10/ 0 赞/ 374 阅读

相关 echarts-柱状图

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2022年06月08日 09:40/ 0 赞/ 369 阅读

相关 Echarts双Y轴折线图和柱形图混合

柱形图和折线图混合使用，并且使用双y轴坐标具体代码如下 option ={ color: ['009CFF', 'FF072F'], //设置多个颜

╰+攻爆jí腚メ/ 2022年05月15日 12:23/ 0 赞/ 1327 阅读

相关 Echarts实现双y轴

转载自：[https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1][htt

浅浅的花香味﹌/ 2022年05月13日 05:46/ 0 赞/ 994 阅读

相关 Echarts双Y轴柱状图

var option = { title: { text: '一周推送及完成率'

Bertha 。/ 2022年02月16日 11:59/ 0 赞/ 700 阅读

相关 echarts柱状图，改变柱颜色,x轴,y轴,底部按钮文字颜色

不墨迹直接上图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

Myth丶恋晨/ 2021年09月20日 02:20/ 0 赞/ 1157 阅读

相关 Echarts3实例双Y轴柱状图

实现效果 ![这里写图片描述][70] 知识点双Y轴：yAxisIndex Y轴垂直标题最大最小值显示调整左侧Y轴刻度代码实现

骑猪看日落/ 2021年09月16日 07:06/ 0 赞/ 803 阅读