Question

我正在尝试使用百度Echarts为多个图表生成报告。现在的问题是图表编号是可变的，并且可以是任意数量的图表。

我正在使用Spring和MyBatis从数据库获取数据，并使用abel533提供的Echart Java库将其转换为JSON echart。我将所有数据转换为JSON并将其发送到Thymeleaf以创建图表。

我仅使用两个图表进行测试，但仅显示第二个图表。我不知道为什么。

这是我的代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script th:src="@{/js/echarts.min.js}" type="text/javascript"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main">
        <!--<div id="0" style="width: 600px;height: 400px;"></div>-->
        <!--<div id="1" style="width: 600px;height: 400px;"></div>-->
    </div>
    <script th:inline="javascript">
    /*<![CDATA[*/

        var options = /*[[${container.chartStrings}]]*/ 'default';
        // var one = echarts.init(document.getElementById('0'));
        // var two = echarts.init(document.getElementById('1'));
        // var optionOne = JSON.parse(options[0]);
        // var optionsTwo = JSON.parse(options[1]);
        // one.setOption(optionOne);
        // two.setOption(optionsTwo);

        //Details of the Chart in JSON String
        var myChart = [];
        var temp;
        for(var i = 0; i < options.length; i++){
            var main = document.getElementById('main');
            var chartDiv = "<div style='width: 600px;height:400px;' id ='chart" + i + "'></div><br>";
            main.innerHTML = main.innerHTML + chartDiv;
            // 基于准备好的dom，初始化echarts实例
            temp = echarts.init(document.getElementById('chart'+i));
            myChart.push(temp);

        }
        alert(myChart);
        for(var i = 0 ; i < options.length; i++){
            //Parse to a JSON
            option = JSON.parse(options[i]);
            // 使用刚指定的配置项和数据显示图表。
            myChart[i].setOption(option);
        }
    /*]]>*/
    </script>
</body>
</html>

编辑：这是我在浏览器中的源代码的结果： Source code

动态百度图表

0 个答案: