摘要：最近的項(xiàng)目中用到了的雙軸和雙軸的設(shè)置，特此記錄一下鼠標(biāo)懸停提示內(nèi)容坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效十字線顯示標(biāo)準(zhǔn)保費(fèi)增長軸軸顯示兩組數(shù)據(jù)第個(gè)軸兩個(gè)軸左邊軸金額元右邊軸增長用于指定圖標(biāo)顯示類型第一個(gè)柱狀圖的數(shù)據(jù)標(biāo)準(zhǔn)保費(fèi)第一個(gè)柱狀圖的數(shù)據(jù)第二個(gè)柱狀

最近的項(xiàng)目中用到了echarts的雙x軸和雙y軸的設(shè)置，特此記錄一下；

option = {
    tooltip: { //鼠標(biāo)懸停提示內(nèi)容
                    trigger: "axis",
                    axisPointer: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                        type: "cross"    // 十字線顯示
                    }
                },
                legend: {
                    y: "20px",
                    data: ["標(biāo)準(zhǔn)保費(fèi)", "增長"],
                    selectedMode: false,
                },
                xAxis: [
                    //X軸
                    {
                        type: "category",
                        data: [1, 2, 3, 4, 5, 6],
                        axisLabel: {interval: 0},
                    },
                   //x軸顯示兩組數(shù)據(jù)  第2個(gè)X軸
                     {
                        type: "category",
                       axisLine: {show: false},
                        axisTick: {show: false},
                        axisLabel: {show: false, interval: 0},
                       splitArea: {show: false},
                      splitLine: {show: false},
                     data: [1, 2, 3, 4, 5, 6],
                    }
                ],
                yAxis: [ //兩個(gè)y軸  左邊y軸
                    {
                        type: "value",
                        name: "金額(元)",

                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value} "
                        },
                        splitNumber: 10,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed"
                            }
                        },
                        // splitArea: {
                        //     show: false
                        // },
                        // max: 100,
                        // interval: 10,
                    },
                    //右邊y軸
                    {
                        type: "value",
                        name: "增長",
                        axisLabel: {
                            show: true,
                            interval: "auto",
                            formatter: "{value} %"
                        },
                        splitNumber: 10,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed"
                            }
                        },
                        splitArea: {
                            show: false
                        },
                        // max: 100,
                        // interval: 10,
                    }
                ],
                series: [ //用于指定圖標(biāo)顯示類型
                 //第一個(gè)柱狀圖的數(shù)據(jù)
                    {
                        name: "標(biāo)準(zhǔn)保費(fèi)",
                        type: "bar",
                        yAxisIndex: "0",// 第一個(gè)柱狀圖的數(shù)據(jù)
                        itemStyle: {normal: {color: "#2d91ff", label: {show: true}}},
                        data: [100,200, 30, 90,210,110]
                    },
                       //第二個(gè)柱狀圖的數(shù)據(jù)
                 {
                        name: "承保",
                        type: "bar",
                        xAxisIndex: 1, //第二個(gè)柱狀圖的數(shù)據(jù)
                        itemStyle: {
                            normal: {
                                color: "#d5e9ff",
                                label: {
                                    show: true, formatter: function (p) {
                                        return p.value > 0 ? (p.value + "
") : "";
                                    }
                                }
                            }
                        },
                        data: [120, 300, 100, 170, 300,200]
                    },
                     /右邊Y軸的數(shù)據(jù)
                    {
                        name: "增長",
                        type: "line",
                        symbol: "emptyCircle",
                        showAllSymbol: true, //動(dòng)畫效果
                        symbolSize: 3,
                        smooth: true, //光滑的曲線
                        yAxisIndex: "1",      
                        itemStyle: {
                            normal: {
                                color: "#ffb348",
                                label: {
                                    show: true,
                                    formatter: "{c}%",
                                    textStyle: {
                                        color: "#000000"
                                    }
                                }
                            }
                        },
                        data: [3, 9, 2, 5, 7, 10]
                    },
                ]
};

效果圖如下

重點(diǎn)在設(shè)置參數(shù)如下
xAxisIndex: 1,
yAxisIndex: "1",
數(shù)據(jù)我是隨便寫的，大家僅供參考，詳細(xì)設(shè)置請查看官方文檔
完結(jié)！