echarts双x轴和双y轴的配置

摘要：最近的项目中用到了的双轴和双轴的设置，特此记录一下鼠标悬停提示内容坐标轴指示器，坐标轴触发有效十字线显示标准保费增长轴轴显示两组数据第个轴两个轴左边轴金额元右边轴增长用于指定图标显示类型第一个柱状图的数据标准保费第一个柱状图的数据第二个柱状

最近的项目中用到了echarts的双x轴和双y轴的设置，特此记录一下；

option = {
    tooltip: { //鼠标悬停提示内容
                    trigger: "axis",
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: "cross"    // 十字线显示
                    }
                },
                legend: {
                    y: "20px",
                    data: ["标准保费", "增长"],
                    selectedMode: false,
                },
                xAxis: [
                    //X轴
                    {
                        type: "category",
                        data: [1, 2, 3, 4, 5, 6],
                        axisLabel: {interval: 0},
                    },
                   //x轴显示两组数据  第2个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: [ //两个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: [ //用于指定图标显示类型
                 //第一个柱状图的数据
                    {
                        name: "标准保费",
                        type: "bar",
                        yAxisIndex: "0",// 第一个柱状图的数据
                        itemStyle: {normal: {color: "#2d91ff", label: {show: true}}},
                        data: [100,200, 30, 90,210,110]
                    },
                       //第二个柱状图的数据
                 {
                        name: "承保",
                        type: "bar",
                        xAxisIndex: 1, //第二个柱状图的数据
                        itemStyle: {
                            normal: {
                                color: "#d5e9ff",
                                label: {
                                    show: true, formatter: function (p) {
                                        return p.value > 0 ? (p.value + "
") : "";
                                    }
                                }
                            }
                        },
                        data: [120, 300, 100, 170, 300,200]
                    },
                     /右边Y轴的数据
                    {
                        name: "增长",
                        type: "line",
                        symbol: "emptyCircle",
                        showAllSymbol: true, //动画效果
                        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]
                    },
                ]
};

效果图如下

重点在设置参数如下
xAxisIndex: 1,
yAxisIndex: "1",
数据我是随便写的，大家仅供参考，详细设置请查看官方文档
完结！