weixin_43480598
等梦想开成花
采纳率0%
2021-03-02 22:10

echarts希望两个div上下分开放置,但不知道为什么目前两个图表互相重叠,求解!

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>




        <div id="main1" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
        var dom = document.getElementById("main1");
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';


        $.getJSON(ROOT_PATH + '/data/asset/data/house-price-area2.json', function (data) {

            var option = {
                title: {
                    text: 'Dispersion of house price based on the area',
                    left: 'center',
                    top: 0
                },
                visualMap: {
                    min: 15202,
                    max: 159980,
                    dimension: 1,
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    text: ['HIGH', 'LOW'],
                    calculable: true,
                    inRange: {
                        color: ['#f2c31a', '#24b7f2']
                    }
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                xAxis: [{
                    type: 'value'
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: 'price-area',
                    type: 'scatter',
                    symbolSize: 5,
                    // itemStyle: {
                    //     normal: {
                    //         borderWidth: 0.2,
                    //         borderColor: '#fff'
                    //     }
                    // },
                    data: data
                }]
            };

            myChart.setOption(option);
        });

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        </script>

  
    <div id="main2" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        var indices = {
            name: 0,
            group: 1,
            id: 16
        };
        var schema = [
            {name: 'name', index: 0},
            {name: 'group', index: 1},
            {name: 'protein', index: 2},
            {name: 'calcium', index: 3},
            {name: 'sodium', index: 4},
            {name: 'fiber', index: 5},
            {name: 'vitaminc', index: 6},
            {name: 'potassium', index: 7},
            {name: 'carbohydrate', index: 8},
            {name: 'sugars', index: 9},
            {name: 'fat', index: 10},
            {name: 'water', index: 11},
            {name: 'calories', index: 12},
            {name: 'saturated', index: 13},
            {name: 'monounsat', index: 14},
            {name: 'polyunsat', index: 15},
            {name: 'id', index: 16}
        ];

        var fieldIndices = schema.reduce(function (obj, item) {
            obj[item.name] = item.index;
            return obj;
        }, {});

        var groupCategories = [];
        var groupColors = [];
        var data;

        // zlevel 为 1 的层开启尾迹特效
        myChart.getZr().configLayer(1, {
            motionBlur: 0.5
        });

         $.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (originData) {
            data = normalizeData(originData).slice(0, 1000);

            myChart.setOption(option = getOption(data));
        });


        function normalizeData(originData) {
            var groupMap = {};
            originData.forEach(function (row) {
                var groupName = row[indices.group];
                if (!groupMap.hasOwnProperty(groupName)) {
                    groupMap[groupName] = 1;
                }
            });

            originData.forEach(function (row) {
                row.forEach(function (item, index) {
                    if (index !== indices.name
                        && index !== indices.group
                        && index !== indices.id
                    ) {
                        // Convert null to zero, as all of them under unit "g".
                        row[index] = parseFloat(item) || 0;
                    }
                });
            });

            for (var groupName in groupMap) {
                if (groupMap.hasOwnProperty(groupName)) {
                    groupCategories.push(groupName);
                }
            }
            var hStep = Math.round(300 / (groupCategories.length - 1));
            for (var i = 0; i < groupCategories.length; i++) {
                groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
            }

            return originData;
        }

        function getOption(data) {
            return {
                xAxis: {
                    name: 'protein',
                    splitLine: {show: false},
                },
                yAxis: {
                    name: 'calcium',
                    splitLine: {show: false},
                },
                visualMap: [{
                    show: false,
                    type: 'piecewise',
                    categories: groupCategories,
                    dimension: 2,
                    inRange: {
                        color: groupColors
                    },
                    outOfRange: {
                        color: ['#ccc']
                    },
                    top: 20,
                    textStyle: {
                        color: '#fff'
                    },
                    realtime: false
                }, {
                    show: false,
                    dimension: 3,
                    max: 100,
                    inRange: {
                        colorLightness: [0.15, 0.6]
                    }
                }],
                series: [
                    {
                        zlevel: 1,
                        name: 'nutrients',
                        type: 'scatter',
                        data: data.map(function (item, idx) {
                            return [item[2], item[3], item[1], idx];
                        }),
                        animationThreshold: 5000,
                        progressiveThreshold: 5000
                    }
                ],
                animationEasingUpdate: 'cubicInOut',
                animationDurationUpdate: 2000
            };
        }

        var fieldNames = schema.map(function (item) {
            return item.name;
        }).slice(2);

        app.config = {
            xAxis: 'protein',
            yAxis: 'calcium',
            onChange: function () {
                if (data) {
                    myChart.setOption({
                        xAxis: {
                            name: app.config.xAxis
                        },
                        yAxis: {
                            name: app.config.yAxis
                        },
                        series: {
                            data: data.map(function (item, idx) {
                                return [
                                    item[fieldIndices[app.config.xAxis]],
                                    item[fieldIndices[app.config.yAxis]],
                                    item[1],
                                    idx
                                ];
                            })
                        }
                    });
                }
            }
        };

        app.configParameters = {
            xAxis: {
                options: fieldNames
            },
            yAxis: {
                options: fieldNames
            }
        };

        </script>
    </body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • hu071700 AllPromise 1月前

    你这个第二个echart的数据赋值到第一个div上面去了,变量不要用一样的

    1.你把84行 var myChart = echarts.init(document.getElementById('main2'));改成 var myChart2 = echarts.init(document.getElementById('main2'));
    2.删除85行 var myChart = echarts.init(dom);

    3.132行 myChart.setOption(option = getOption(data));改成myChart2.setOption(option = getOption(data));

    点赞 1 评论 复制链接分享
  • wanmeikakaxi wanmeikakaxi 1月前

    截图

    代码

    <!DOCTYPE html>
    
    
    <html style="height: 100%">
    
    
        <head>
    
    
            <meta charset="utf-8">
    
    
        </head>
    
    
        <body style="height: 100%; margin: 0">
    
    
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    
    
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    
    
     
    
    
     
    
    
     
    
    
     
    
    
            <div id="main1" style="width: 600px;height:400px;"></div>
    		    <div id="main2" style="width: 600px;height:400px;"></div>
    
    
            <script type="text/javascript">
    
    
    function main1(){
            var dom = document.getElementById("main1");
    
    
            var myChart = echarts.init(dom);
    
    
            var app = {};
    
    
     
    
    
            var option;
    
    
     
    
    
            var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
    
    
     
    
    
     
    
    
            $.getJSON(ROOT_PATH + '/data/asset/data/house-price-area2.json', function (data) {
    
    
     
    
    
                var option = {
    
    
                    title: {
    
    
                        text: 'Dispersion of house price based on the area',
    
    
                        left: 'center',
    
    
                        top: 0
    
    
                    },
    
    
                    visualMap: {
    
    
                        min: 15202,
    
    
                        max: 159980,
    
    
                        dimension: 1,
    
    
                        orient: 'vertical',
    
    
                        right: 10,
    
    
                        top: 'center',
    
    
                        text: ['HIGH', 'LOW'],
    
    
                        calculable: true,
    
    
                        inRange: {
    
    
                            color: ['#f2c31a', '#24b7f2']
    
    
                        }
    
    
                    },
    
    
                    tooltip: {
    
    
                        trigger: 'item',
    
    
                        axisPointer: {
    
    
                            type: 'cross'
    
    
                        }
    
    
                    },
    
    
                    xAxis: [{
    
    
                        type: 'value'
    
    
                    }],
    
    
                    yAxis: [{
    
    
                        type: 'value'
    
    
                    }],
    
    
                    series: [{
    
    
                        name: 'price-area',
    
    
                        type: 'scatter',
    
    
                        symbolSize: 5,
    
    
                        // itemStyle: {
    
    
                        //     normal: {
    
    
                        //         borderWidth: 0.2,
    
    
                        //         borderColor: '#fff'
    
    
                        //     }
    
    
                        // },
    
    
                        data: data
    
    
                    }]
    
    
                };
    
    
     
    
    
                myChart.setOption(option);
    
    
            });
    
    
     
    
    
            if (option && typeof option === 'object') {
    
    
                myChart.setOption(option);
    
    
            }
    
    
     
    
    }
    main1();
    
    function main2(){
    
    
            // 基于准备好的dom,初始化echarts实例
    
    
            // var dom = echarts.init(document.getElementById('main2'));
    		var dom = document.getElementById("main2");
    
            var myChart = echarts.init(dom);
    
            var app = {};
    
     
    
            var option;
    
     
    
            var indices = {
    
                name: 0,
    
                group: 1,
    
                id: 16
    
            };
    
            var schema = [
    
                {name: 'name', index: 0},
    
                {name: 'group', index: 1},
    
                {name: 'protein', index: 2},
    
                {name: 'calcium', index: 3},
    
                {name: 'sodium', index: 4},
    
                {name: 'fiber', index: 5},
    
                {name: 'vitaminc', index: 6},
    
                {name: 'potassium', index: 7},
    
                {name: 'carbohydrate', index: 8},
    
                {name: 'sugars', index: 9},
    
                {name: 'fat', index: 10},
    
                {name: 'water', index: 11},
    
                {name: 'calories', index: 12},
    
                {name: 'saturated', index: 13},
    
                {name: 'monounsat', index: 14},
    
                {name: 'polyunsat', index: 15},
    
                {name: 'id', index: 16}
    
            ];
    
     
    
            var fieldIndices = schema.reduce(function (obj, item) {
    
                obj[item.name] = item.index;
    
                return obj;
    
            }, {});
    
     
    
            var groupCategories = [];
    
            var groupColors = [];
    
            var data;
    
     
    
            // zlevel 为 1 的层开启尾迹特效
    
            myChart.getZr().configLayer(1, {
    
                motionBlur: 0.5
    
            });
    
            var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
    
             $.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (originData) {
    
                data = normalizeData(originData).slice(0, 1000);
    
     
    
                myChart.setOption(option = getOption(data));
    
            });
    
     
    
     
    
            function normalizeData(originData) {
    
                var groupMap = {};
    
                originData.forEach(function (row) {
    
                    var groupName = row[indices.group];
    
                    if (!groupMap.hasOwnProperty(groupName)) {
    
                        groupMap[groupName] = 1;
    
                    }
    
                });
    
     
    
                originData.forEach(function (row) {
    
                    row.forEach(function (item, index) {
    
                        if (index !== indices.name
    
                            && index !== indices.group
    
                            && index !== indices.id
    
                        ) {
    
                            // Convert null to zero, as all of them under unit "g".
    
                            row[index] = parseFloat(item) || 0;
    
                        }
    
                    });
    
                });
    
     
    
                for (var groupName in groupMap) {
    
                    if (groupMap.hasOwnProperty(groupName)) {
    
                        groupCategories.push(groupName);
    
                    }
    
                }
    
                var hStep = Math.round(300 / (groupCategories.length - 1));
    
                for (var i = 0; i < groupCategories.length; i++) {
    
                    groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
    
                }
    
     
    
                return originData;
    
            }
    
     
    
            function getOption(data) {
    
                return {
    
                    xAxis: {
    
                        name: 'protein',
    
                        splitLine: {show: false},
    
                    },
    
                    yAxis: {
    
                        name: 'calcium',
    
                        splitLine: {show: false},
    
                    },
    
                    visualMap: [{
    
                        show: false,
    
                        type: 'piecewise',
    
                        categories: groupCategories,
    
                        dimension: 2,
    
                        inRange: {
    
                            color: groupColors
    
                        },
    
                        outOfRange: {
    
                            color: ['#ccc']
    
                        },
    
                        top: 20,
    
                        textStyle: {
    
                            color: '#fff'
    
                        },
    
                        realtime: false
    
                    }, {
    
                        show: false,
    
                        dimension: 3,
    
                        max: 100,
    
                        inRange: {
    
                            colorLightness: [0.15, 0.6]
    
                        }
    
                    }],
    
                    series: [
    
                        {
    
                            zlevel: 1,
    
                            name: 'nutrients',
    
                            type: 'scatter',
    
                            data: data.map(function (item, idx) {
    
                                return [item[2], item[3], item[1], idx];
    
                            }),
    
                            animationThreshold: 5000,
    
                            progressiveThreshold: 5000
    
                        }
    
                    ],
    
                    animationEasingUpdate: 'cubicInOut',
    
                    animationDurationUpdate: 2000
    
                };
    
            }
    
     
    
            var fieldNames = schema.map(function (item) {
    
                return item.name;
    
            }).slice(2);
    
     
    
            app.config = {
    
                xAxis: 'protein',
    
                yAxis: 'calcium',
    
                onChange: function () {
    
                    if (data) {
    
                        myChart.setOption({
    
                            xAxis: {
    
                                name: app.config.xAxis
    
                            },
    
                            yAxis: {
    
                                name: app.config.yAxis
    
                            },
    
                            series: {
    
                                data: data.map(function (item, idx) {
    
                                    return [
    
                                        item[fieldIndices[app.config.xAxis]],
    
                                        item[fieldIndices[app.config.yAxis]],
    
                                        item[1],
    
                                        idx
    
                                    ];
    
                                })
    
                            }
    
                        });
    
                    }
    
                }
    
            };
    
     
    
            app.configParameters = {
    
                xAxis: {
    
                    options: fieldNames
    
                },
    
                yAxis: {
    
                    options: fieldNames
    
                }
    
            };
    
    
     
    
    }
    main2();
            </script>
    
    
        </body>
    
    
    </html>
    点赞 1 评论 复制链接分享

为你推荐