Echarts 双坐标系

最新推荐文章于 2024-05-06 11:07:28 发布

丶久友

最新推荐文章于 2024-05-06 11:07:28 发布

阅读量4.5k

点赞数 2

分类专栏： Echarts从零到一

本文链接：https://blog.csdn.net/weixin_44614772/article/details/109913499

版权

Echarts从零到一专栏收录该内容

9 篇文章 3 订阅

订阅专栏

两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：
在这里插入图片描述

两个y轴坐标，因为数据不同，所以两边各展现一条横线，解决办法

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts 组件</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
    <style>
        #chart {
            height: 400px;
            width: 800px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script>
        const chartDom = document.getElementById('chart')
        const chart = echarts.init(chartDom)
        chart.setOption({
            title: {
                text: "Echarts 双坐标系",         //主标题
                subtext: 'Echarts 数据可视化学习'       //副标题
            },
            xAxis: {
                type: 'category'     //多坐标系需要制定x轴为 category 要不然不会展示数据
            },
            yAxis: [
                {
                    // min: 0,     //设置左侧y轴最小刻度
                    // max: 100     //设置左侧y轴最大刻度
                },
                {
                    // splitLine: {
                    //     show: false     //隐藏右边的线条的横线
                    // }
                }
            ],
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1]
                ]
            },
            series: [
                {
                    type: 'bar',
                    seriesLayoutBy: 'row',       //按行的方式进行取数据
                    yAxisIndex: 0
                },
                {
                    type: 'line',
                    seriesLayoutBy: 'row',       //按行的方式进行取数据
                    yAxisIndex: 1
                }
            ]
        })
    </script>
</body>

</html>

方案1.隐藏右边的线条，折线图部分存在误区

	yAxis: [
                {
                    // min: 0,     //设置左侧y轴最小刻度
                    // max: 100     //设置左侧y轴最大刻度
                },
                {
                    splitLine: {
                        show: false     //隐藏右边的线条的横线
                    }
                }
            ],

在这里插入图片描述

方案2.设置左侧y轴坐标的最小值和最大值

            yAxis: [
                {
                    min: 0,     //设置左侧y轴最小刻度
                    max: 100     //设置左侧y轴最大刻度
                },
                {
                    // splitLine: {
                    //     show: false     //隐藏右边的线条的横线
                    // }
                }
            ],

在这里插入图片描述

丶久友

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
Echarts 双坐标系

两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：两个y轴坐标，因为数据不同，所以两边各展现一条横线，解决办法<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content=
复制链接

扫一扫

专栏目录