echarts双坐标系

最新推荐文章于 2023-12-28 18:41:32 发布

前端xqf

最新推荐文章于 2023-12-28 18:41:32 发布

阅读量708

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_42635130/article/details/111868120

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.js"></script>
    
    <div id= 'echarts' style="width: 800px;height: 800px;"></div>
    <script>
        const echartsDom  = document.getElementById('echarts');
        const chart = echarts.init(echartsDom);
        chart.setOption({
            dataset:{
                source:
                    [
                        [ '年度',2000,2001,2002],
                        [ 'a',20,30,40],
                        [ 'b',50,60,70],
                    ]
                },

          
           
            xAxis:{
               type:'category'//指定是类型
            },
            yAxis:[{
                min:0,
                max:100//设定y轴的刻度线的最大值和最小值
            },{
                splitLine:{
                    show:false//只显示一边y轴的刻度线
                }
            }],
            series:[{
               
                type:'bar',
               seriesLayoutBy:'row',//横向获取source数据
               yAxisIndex:0//数据下标
            },{
               
               type:'line',
              seriesLayoutBy:'row',
              yAxisIndex:1
           }
        ]
        })
    </script>
</body>
</html>