echarts使用01

2024-01-03 06:28:53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../echarts.js"></script>
</head>
<body>
<style>
    #chart {
        width: 800px;
        height: 400px;
        margin: 100px auto;
        border: 1px solid red;
    }

</style>
<div id="chart"></div>

<script>
    var chartDom = document.querySelector("#chart");
    var chart = echarts.init(chartDom);



    chart.setOption({
        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],
            // ],
            source: [
                ['product', 41.1, 41.1, 41.1, 41.1],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ],
        },
        title:{
            text:"echarts 案例",
            subtext:"subtitle"
        },
        dataZoom: {
            show:true,
            start:0,
            end:100 // 结束位置百分百
        },
        grid:{ // 上下左右位置
            top:100,
            left:"10%",
            right:"10%",
            bottom:100
        },
        toolbox:{
            feature:{
                dataZoom:{
                    // yAxisIndex:1  // 选择一个不存在的坐标轴
                    yAxisIndex:false
                },
                restore:{},
                saveAsImage:{}
            }
        },
        xAxis:{
            data:["product",'Matcha Latte','Milk Tea']
        },
        yAxis:{},
        legend:{
            data:["分类","折线图","柱状图"],
            left:200
        },
        series:[
            {
                type:"pie",
                name:"分类",
                radius:35,
                encode:{
                    itemName:3,
                    value:4
                }
            },
            {
                type:"line",
                name:"折线图",
                encode:{
                    x:0,y:1
                }
            },
            {
                type:"bar",
                name:"柱状图",
                encode:{
                    x:0,y:2
                }
            }
        ]



    })
</script>
</body>
</html>

一个图多个坐标轴，默认数据读取是column，，设置seriesLayoutBy:true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../echarts.js"></script>
</head>
<body>
<style>
    #chart {
        width: 800px;
        height: 400px;
        margin: 100px auto;
        border: 1px solid red;
    }

</style>
<div id="chart"></div>

<script>
    var chartDom = document.querySelector("#chart");
    var chart = echarts.init(chartDom);



    chart.setOption({
        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],
            ],


        },
        xAxis:{
            type:"category" // x轴分类
        },
        yAxis:[{
            min:0, // 左右坐标轴统一配置，，分割线就不会叠到一起
            max:100
        },{
            splitLine:{
                show:false // 分隔线， 两个轴的分割线叠在了一起
            }
        }], // 两个y轴坐标系
        series:[
            {
                type:"bar",
                seriesLayoutBy:"row",
                yAxisIndex:0, // 使用第一个y轴
                y:1
            },
            {
                type:"line",
                seriesLayoutBy:"row",
                y:2,
                yAxisIndex:1   // 使用第二个y轴
            }

        ]
        
    })
</script>
</body>
</html>

多坐标系，多grid，，每一个x轴，和y轴，都设置对应的grid，，表示是哪一个坐标系的轴：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../echarts.js"></script>
</head>
<body>
<style>
    #chart {
        width: 800px;
        height: 400px;
        margin: 100px auto;
        border: 1px solid red;
    }

</style>
<div id="chart"></div>

<script>
    var chartDom = document.querySelector("#chart");
    var chart = echarts.init(chartDom);



    chart.setOption({
        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],
            ],


        },
        xAxis:[
            {
                type:"category", // x轴分类
                gridIndex:0
            },
            {
                type:"category",
                gridIndex: 1
            }
        ],
        yAxis:[{
            min:0, // 左右坐标轴统一配置，，分割线就不会叠到一起
            max:100,
            gridIndex:0
        },{
            splitLine:{
                show:false // 分隔线， 两个轴的分割线叠在了一起
            },
            gridIndex:0
        },{
            min:0,
            max:150,
            gridIndex:1

        }], // 两个y轴坐标系

        grid:[{bottom:"55%"},{top:"55%"}],// grid用来区分两个坐标系
        series:[
            {
                type:"bar",
                seriesLayoutBy:"row",
                xAxisIndex:0,
                yAxisIndex:0, // 使用第一个y轴
                y:1
            },
            {
                type:"line",
                seriesLayoutBy:"row",
                y:2,
                xAxisIndex:0,
                yAxisIndex:1   // 使用第二个y轴
            },
            {
                type:"bar",
                y:1,
                xAxisIndex:1,
                yAxisIndex: 2,
                seriesLayoutBy:"row",
            }

        ]




    })
</script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_36022463/article/details/135352291
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。