Thymeleaf 写js代码中遇到的数组坑

背景:后台传一个二维数组到前台页面

后台代码:

@GetMapping(value="bubble.do")
public ModelAndView bubble(){
    ModelAndView mv = new ModelAndView();
    int[][] arr1 = new  int[][]{{97, 36, 79}, {94, 74, 60}, {68, 76, 58}, {64, 87, 56}, {68, 27, 73}, {74, 99, 42}, {7, 93, 87}, {51, 69, 40}, {38, 23, 33}, {57, 86, 31}};
    int[][] arr2 = new int[][]{{25, 10, 87}, {2, 75, 59}, {11, 54, 8}, {86, 55, 93}, {5, 3, 58}, {90, 63, 44}, {91, 33, 17}, {97, 3, 56}, {15, 67, 48}, {54, 25, 81}};
    int[][] arr3 = new int[][]{{47, 47, 21}, {20, 12, 4}, {6, 76, 91}, {38, 30, 60}, {57, 98, 64}, {61, 17, 80}, {83, 60, 13}, {67, 78, 75}, {64, 12, 10}, {30, 77, 82}};
    mv.addObject("arr1",arr1);
    mv.addObject("arr2",arr2);
    mv.addObject("arr3",arr3);
    mv.setViewName("admin/decisionProduct/hightChartsBubble");
    return mv;
}

html页面获取

查了一大堆网站 说的是

th:inline="none" 然后[[${arr1}]]，这样子获取是当前台页面已经定义了一个数组才可以

eg:

var arr =[[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]];

如果 arr 获取后台传回的值就不行 eg: arr = [[${arr1}]],这种写法是不行的

最后是解决办法:

<script type="text/javascript"  th:inline="javascript">
    /*<![CDATA[*/
    $(function(){
        var options = {
            chart: {
                type: 'bubble',
                zoomType: 'xy'
            },
            title: {
                text: 'Highcharts 气泡图'
            },
            series: [{
                name:'数据列 1',
                // 每个气泡包含三个值，x，y，z；其中 x，y用于定位，z 用于计算气泡大小
                data: [[${arr1}]]
            }, {
                name:'数据列 2',
                data: [[${arr2}]]
            }, {
                name:'数据列 3',
                data: [[${arr3}]]
            }]
        };
        // 图表初始化函数
        var chart2 = Highcharts.chart('container_hightChartsBubble', options);
    });
    /*]]>*/
</script>