JS如何将数组内的元素如[1,2]转为['1','2']

现在在使用echarts作图，拿到后端的id值以后，前端页面的图例不显示颜色，在网上查询以后说是数字的原因，需要转为字符串
代码如下

<script type="text/javascript">
window.onload = function(){
    initLine1();
    function initLine1() {
        var mychart = echarts.init(document.getElementById("chart"));
        var series_data = [];
        var legends = [];  // 添加一个存储所有图例的数组
        {% for i in obj %}
           series_data.push([]);
           legends.push({{ i.id}});  // 将每个id值添加到图例数组中
        {% endfor %}
        console.log(series_data);
        {% for i in obj %}
        var n = Number({{forloop.counter}} - 1)
        series_data[n].push({{ i.r400 }});
        series_data[n].push({{ i.r401 }});
        {% endfor %}
        var s_data = []
        series_data.forEach((v, i) => {
            var obj = {
                data: v,
                type: "line",
                symbol:'none',
                name: legends[i]  // 将每个系列的name设置为对应的id值
            };
            s_data.push(obj);
        });
        var option = {
            xAxis: {
                name:'波长 Wavelength(nm)',
                nameLocation:'middle',
                nameGap:30,
                nameTextStyle:{fontSize:15},
                axisLabel:{
                    interval:99
                    },
                type: "category",
                data:["400","401"]
                    },
            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'
                            }
                            },
                        },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {  // 添加legend组件
                data: legends  // 将图例数组设置为legend的data属性的值
            },
            series: s_data
                       };
        mychart.setOption(option);
        };
}
</script>

目前效果如下

img


如有帮助必定采纳！

该回答引用chatgpt:

img


const array = [1, 2];
const convertedArray = array.map(element => String(element));

console.log(convertedArray);
// 输出: ['1', '2']

可以使用 map 方法遍历数组，并将每个元素转换为字符串

直接上代码了

const arr = [1, 2];
const strArr = arr.map(String);  
console.log(strArr); // 输出结果
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7696625
  • 这篇博客也不错, 你可以看下JS之使用Echarts动态下载、切换柱形、折线图，
  • 除此之外, 这篇博客: JS实现Echarts的图表保存为图片功能中的 效果图 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 在这里插入图片描述

  • 以下回答由chatgpt基于相关博客总结生成:

    解决方案：

    针对问题中的需求，需要将数字数组转换为字符串数组，可以采取以下代码示例：

    let idArr = [1, 2, 3, 4, 5]; // 数字数组
let strArr = idArr.map(id => id.toString()); // 转换为字符串数组
console.log(strArr); // 输出 ["1", "2", "3", "4", "5"]

    这里使用了JavaScript中的map方法，遍历原数组并将其转换为字符串类型，返回新数组。可以根据实际情况将该代码嵌入到需要的地方进行调用。

    需要注意的是，转换后的字符串数组与原数组是不同的对象，如果需要修改其内容或作为参数传递给后台接口，需要在处理时进行相应的类型转换。

    如果还有其他问题，欢迎进一步咨询。

回答部分参考、引用ChatGpt以便为您提供更准确的答案：

您的问题是如何将数组内的元素如[1,2]转为['1','2']。在JavaScript中，可以使用map方法来实现这个转换。

以下是将数组内的数字元素转为字符串的代码示例：

var arr = [1, 2];
var strArr = arr.map(String);
console.log(strArr);  // 输出 ['1', '2']

在上述代码中，map方法遍历数组中的每个元素，并将每个元素通过String函数转换为字符串形式，然后返回一个新的数组strArr。

您可以在您的代码中应用这个转换，将数字转换为字符串后再使用。

参考gpt：
根据您提供的代码，问题可能出现在以下几个地方：

1.数据类型转换：您提到问题是由于数字导致图例不显示颜色，可以尝试将图例的id值转换为字符串类型，以确保图例正常显示。可以使用toString()方法将数字转换为字符串，如legends.push({{ i.id.toString() }});。
2.数据准备：确保传递给Echarts的数据是正确的。在您的代码中，您将数据存储在series_data数组中，但在生成series时，您使用了s_data数组。请确认您使用的是正确的数据数组，可以尝试将s_data改为series_data，如series: series_data。
3.数据绑定：确认您的数据绑定是否正确。在您的代码中，您使用series_data[n].push({{ i.r400 }});和series_data[n].push({{ i.r401 }});将数据添加到series_data中，确保r400和r401是正确的属性名称。