echart双坐标轴问题

echart双坐标轴问题,一个正常的xy轴,一个Y轴在右边并且倒过来,x轴在上面
var option = {

                    title: {
                        text: '近1H流量趋势',
                        textStyle:{
                            color:'#fff',
                            fontSize:14
                        }
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['流量','速度'],
                        textStyle: {
                            color:"#ffffff",
                            fontSize:14
                        },
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    grid: {
                        top:30,
                        left:10,
                        right:8,
                        bottom:15,
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap: false,
                            splitLine:{
                                show:false
                            },
                            axisLabel: {
                                //设置X轴数值
                                textStyle: {
                                    color: '#7c98bf'//X轴刻度数值颜色
                                }
                            },
                            data : ['2019/12/6\n 5:10', '2019/12/8 \n6:10', '2019/12/8 \n6:10', '2019/12/8 \n6:10', '2019/12/8\n 6:10', '2019/12/8 \n6:10']
                        },
                        {
                            type : 'category',
                            boundaryGap: false,
                            splitLine:{
                                show:false
                            },
                            axisLabel: {
                                //设置X轴数值
                                textStyle: {
                                    color: '#6C8AB1'//X轴刻度数值颜色
                                }
                            },
                            // data : ['2019/12/6\n 5:10', '2019/12/8 \n6:10', '2019/12/8 \n6:10', '2019/12/8 \n6:10', '2019/12/8\n 6:10', '2019/12/8 \n6:10'],
                            // position:'top'
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            min:0,
                            max:200,
                            axisLine:{
                                lineStyle:{
                                    color:'#40546e'
                                }
                            },
                            splitLine:{
                                show:false
                            },
                            axisLabel: {
                                //设置y轴数值为%
                                formatter: '{value}',
                                textStyle: {
                                    color: '#7c98bf'//y轴刻度数值颜色
                                }
                            }
                        },
                        {
                            type : 'value',
                            min:0,
                            max:500,
                            inverse:true,
                            position:'top',
                            axisLine:{
                                lineStyle:{
                                    color:'#40546e'
                                }
                            },
                            splitLine:{
                                show:false
                            },
                            axisLabel: {
                                //设置y轴数值为%
                                formatter: '{value}',
                                textStyle: {
                                    color: '#7c98bf'//y轴刻度数值颜色
                                }
                            }
                        }
                    ],
                    series : [
                        {
                            name:'速度',
                            type:'line',
                            stack: '总量',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            areaStyle: {
                                normal:{
                                    color:new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#d50000'},
                                            {offset: 0.45, color: 'rgba(213,0,0,.45)'},
                                            {offset: 1, color: 'rgba(213,0,0,.45)'}
                                        ]
                                    )
                                }
                            },
                            itemStyle:{
                                normal:{
                                    color: '#ffeeac',
                                    lineStyle:{
                                        color:'#830510'
                                    }
                                }
                            },
                            data:[90,80,70,69,85,120]
                        },
                        {
                            name:'流量',
                            type:'line',
                            stack: '总量',
                            xAxisIndex: 0,
                            yAxisIndex: 1,
                            areaStyle: {
                                normal:{
                                    color:new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#de81ff'},
                                            {offset: 0.45, color: 'rgba(222,129,255,.45)'},
                                            {offset: 1, color: 'rgba(222,129,255,.15)'}
                                        ]
                                    )
                                }
                            },
                            itemStyle:{
                                normal:{
                                    color: '#de81ff',
                                    lineStyle:{
                                        color:'#de81ff'
                                    }
                                }
                            },
                            data:[150, 32, 160, 234, 300, 210, 70]
                        }
                    ]
                };
                var illegal = echarts.init(document.getElementById('illegal'));
                illegal.setOption(option);
                想实现这样的效果

clipboard.png
目前变成这样了
clipboard.png
上面粉红色的折线被下拉了,正确的是这样的

clipboard.png

阅读 2.3k
1 个回答

两个stack重名了。把其中一个换下名字就好了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题