一个dom渲染多个echarts图表

最新推荐文章于 2024-06-25 14:38:42 发布

斗气化码o(￣▽￣)ｄ

最新推荐文章于 2024-06-25 14:38:42 发布

阅读量855

点赞数

本文链接：https://blog.csdn.net/zsl10010/article/details/116734611

版权

1.多坐标系

就是一个图表实现展现多个坐标系，一个坐标系就是一个grid

这里主要用到关键几个属性：grid,xAxis,yAxis,gridIndex,xAxisIndex,yAxisIndex

grid：定义坐标系网络

xAxis：x轴

yAxis: y轴

gridIndex：网络的下标从0开始，0代码第一个网格坐标,1代码第2个坐标系。。。。

xAxisIndex：代表横轴坐标编号 0代码第1个横轴。。。。

yAxisIndex：代纵轴坐标编号 0代码第1个纵轴。。。。

完整示例代码如下：

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="box" style="width: 100%; height: 800px"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<script>
    function getChart() {
        //创建Echarts对象
        var myEchart = echarts.init(document.getElementById("box"));
        var options = {
            title: {
                text: "Echarts入门",
            },
            tooltip: {},
            //数据源
            dataset: {
                source: [
                    ['全栈', 11000, 14000, '初中', 150],
                    ['大数据', 9000, 3000, '高中', 100],
                    ['人工智能', 10000, 12060, '本科', 20],
                    ['测试', 8000, 11000, '中专', 30],
                ]
            },
            grid: [{bottom:'50%',width:300}, {left:600,bottom:'50%',width:300},{width:300,top:500}],
            xAxis: [
                        {
                        type: 'category',
                        gridIndex: 0
                        }, 
                        {
                        type: 'category',
                        gridIndex: 1
                        }, 
                        {
                        type: 'category',
                        gridIndex: 2
                        }
                    ],
            yAxis: [{gridIndex:0}, {gridIndex:1},{gridIndex:2}],
            series: [{
                    type: 'bar',
                    xAxisIndex:0,
                    yAxisIndex:0,
                    encode: {
                        x: 0,
                        y: 1
                    }
                }, {
                    type: 'line',
                    xAxisIndex:1,
                    yAxisIndex:1,
                    encode: {
                        x: 0,
                        y: 2
                    }
                },{
                    type: 'bar',
                    xAxisIndex:2,
                    yAxisIndex:2,
                    encode: {
                        x: 0,
                        y: 2
                    }
                }

            ]
        };

        myEchart.setOption(options);
        myEchart.resize()
    }

    window.onload = function() {
        getChart()
        window.onresize = function() {
            getChart()
        };
    };
</script>

</html>