django后端的数组数据，如何在前端通过echarts作图

Question

使用django，后端有一个一维数组，里面有601个数据，传递到前端，目前可以通过django模板语句for循环遍历数据，并在表格内显示。
现在遇到的问题是需要通过JS代码获取数据通过echarts实现作图，写了一下发现没效果。之前只对JS浅学了一下，还望各位赐教。

window.onload = function(){
        initLine1();
        function initLine1() {
            var mychart = echarts.init(document.getElementById("chart"));
            var series_data = [];
            {% for i in arr2 %}
               series_data.push([])
            {% endfor %}
            console.log(series_data)
            {% for i in arr2 %}
                var n = Number({{forloop.counter}} - 1)
                series_data[n].push({{ i }})
            {% endfor %}
            var s_data = []
            series_data.forEach(v => {
                            var arr2 = {data: v,
                            type: "line",
                            symbol:'none'
                            };
                            s_data.push(arr2)
                            })
            var option = {
                xAxis: {
                    name:'波长 Wavelength(nm)',
                    nameLocation:'middle',
                    nameGap:30,
                    nameTextStyle:{fontSize:15},
                    axisLabel:{
                        interval:99
                        },
                    type: "category",
                    data:["400",    "401",    //。。。此处是601个数据对应的标签
                    ]
                        },
                yAxis: {
                    name:'反射率 Reflectance',
                    nameLocation:'middle',
                    nameGap:30,
                    nameTextStyle:{fontSize:15},
                    axisLine:{
                        show:true,
                        },
                    type: "value"
                        },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                                },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                        backgroundColor: '#6a7985'
                                }
                                },
                            },
                series: s_data
                           };
            mychart.setOption(option);
            };
}

Answer 1

从代码中可以看出，您已经通过Django的模板语言将数据传递到了前端JS代码中。您的问题在于如何将数组数据赋值给ECharts图表中的series_data。根据您提供的代码，我发现您已经正确地将数据存储在series_data数组中。但是在后面的代码中，您将series_data数组赋值给另一个变量s_data，这个变量似乎没有用到。

您需要将series_data数组传递给ECharts图表中的series数据。修改代码如下

window.onload = function(){
    initLine1();
    function initLine1() {
        var mychart = echarts.init(document.getElementById("chart"));
        var series_data = [];
        {% for i in arr2 %}
           series_data.push([])
        {% endfor %}
        console.log(series_data)
        {% for i in arr2 %}
            var n = Number({{forloop.counter}} - 1)
            series_data[n].push({{ i }})
        {% endfor %}

        var option = {
            xAxis: {
                name:'波长 Wavelength(nm)',
                nameLocation:'middle',
                nameGap:30,
                nameTextStyle:{fontSize:15},
                axisLabel:{
                    interval:99
                },
                type: "category",
                data:["400", "401", "402", ... "999"]  // 这里填充601个数据对应的标签
            },
            yAxis: {
                name:'反射率 Reflectance',
                nameLocation:'middle',
                nameGap:30,
                nameTextStyle:{fontSize:15},
                axisLine:{
                    show:true,
                },
                type: "value"
            },
            tooltip: { 
                trigger: 'axis',
                backgroundColor: 'rgba(32, 33, 36,.7)',
                borderColor: 'rgba(32, 33, 36,0.20)',
                borderWidth: 1,
                textStyle: {
                    color: '#fff',
                    fontSize: '12'
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
            },
            series: series_data.map(function(item, index) {  // 这里将series_data数组转化为ECharts要求的格式
                return {
                    name: "series_" + index,  // 系列的名称
                    type: "line",
                    symbol:'none',
                    data: item  // 系列的数据
                };
            })
        };

        mychart.setOption(option);
    }
}

这个代码中，我们使用了map函数来将series_data数组中的每一个子数组转化为ECharts需要的格式，即每一个系列的格式。在map函数中，我们为每一个系列指定了一个名称，并将每个子数组的数据作为该系列的数据。然后，我们将转化后的结果赋值给了ECharts图表的series属性中。

请注意，这里的标签数组data需要手动填充，如果不想手动填充，可以在后端将其生成并传递给前端。答案参考来自 https://www.wodianping.com/