zoukankan      html  css  js  c++  java
  • Echarts 双Y轴

    参考地址

    话不多BB,直接上代码

    option ={
        title: {
            text: ' 图标说明'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['次数','合格率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2019.9','2019.10','2019.11','2019.12','2020.1']  //X轴左边值
        },
        yAxis: [{
            type: 'value'
        },
          {//第二条Y轴
                type : 'value',
                axisLabel : {
                    show : true,
                    interval : 'auto',
                    formatter : '{value} %'
                },
                splitNumber : 10,
                splitLine : {
                    show : true,
                    lineStyle : {
                        type : 'dashed'
                    }
                },
                splitArea : {
                    show : false
                }
            }
        ],
        series: [
            {
                name: '次数',
                type: 'line',
                //stack: '总量',
                smooth : true,
                itemStyle : {
                        normal : {
                            color : 'rgba(	105,105,105)',
                            label : {
                                show : true,
                                formatter : '{c}',
                                textStyle : {
                                    color : '#000000'
                                }
                            }
                        }
                    },
                data: [0,1,5,6,5]
            },
                {//第二条Y轴显示的内容
                    name : '合格率',
                    type : 'line',
                    symbol : 'emptyCircle',
                    showAllSymbol : true, //动画效果
                    symbolSize : 12,
                    smooth : true, //光滑的曲线
                    yAxisIndex : '1',
                    itemStyle : {
                        normal : {
                            color : 'rgba(139,26,26,1)',
                            label : {
                                show : true,
                                formatter : '{c}%',
                                textStyle : {
                                    color : '#000000'
                                }
                            }
                        }
                    },
                    data : [62.500,100.000,72.700,88.000,66.700]
                
                }
            
           
        ]
    }
    
  • 相关阅读:
    python
    python
    日常使用 小技巧 ~ (长期更新)
    日常的 小 bug ~(长期更新)
    BUUCTF Re部分wp(MIPS特别篇)
    [FlareOn5]FLEGGO
    [FlareOn6]BMPHIDE
    配置搭建单机rocketmq及rocketmq集群
    nessus服务安装与使用
    HTTP缓存技术详解
  • 原文地址:https://www.cnblogs.com/Alex-Mercer/p/12331867.html
Copyright © 2011-2022 走看看