chelseaNB1 2023-03-13 11:12 采纳率: 75.7%
浏览 36
已结题

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

使用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);
            };
}
  • 写回答

2条回答 默认 最新

  • 嗷呜大嘴狼 2023-03-13 11:17
    关注

    从代码中可以看出,您已经通过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/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月23日
  • 已采纳回答 3月15日
  • 创建了问题 3月13日

悬赏问题

  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统
  • ¥15 Multisim仿真设计地铁到站提醒电路
  • ¥15 怎么用一个500W电源给5台60W的电脑供电
  • ¥15 请推荐一个轻量级规则引擎,配合流程引擎使用,规则引擎负责判断出符合规则的流程引擎模板id
  • ¥15 Excel表只有年月怎么计算年龄