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

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>
  • 写回答

3条回答 默认 最新

  • AllPromise 2021-03-03 10:17
    关注

    你这个第二个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));

    评论

报告相同问题？

悬赏问题

  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试，帮帮忙吧
  • ¥15 #MATLAB仿真#车辆换道路径规划