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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM