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 + '\n') : '';
                                    }
                                }
                            }
                        },
                        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’,
数据我是随便写的，大家仅供参考，详细设置请查看官方文档
完结！