使用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);
};
}
从代码中可以看出，您已经通过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/
不知道你这个问题是否已经解决, 如果还没有解决的话: