动态生成echarts

以前写echarts都是用的最简单直接的写法，直接写好options在useEffect里面，接口数据从里面修改，但是这周有一个需求：需要根据后端传递回来的数据动态生成折线图，有几条数据就生成几条折线图，并且每条折线图要与数据名称对应。

解决：

提前写好一个默认的options，将series预设为空数组，需要图例也动态展示的话，legend:{show:true}要添加上去

 const options = {
                    ...
            legend: {
              show:true
            },
            series: []  
          }

将传递过来的数据生成series所需的结构：通常后端传递的数据只有name和data，而series需要type等属性的对象，使用map方法添加对象属性

  const getSeries=(list=[])=>{
      return list.map(item=>{
        return{
          type:'bar',
          smooth:true,
          data:item.data,
          name:item.name
        }
      })
    }

动态添加属性方法，注意要使用深拷贝复制一份修改，不能修改原对象

 const getOptions=(Data)=>{
      const cloneOption = cloneDeep(options)
      const { type} = Data;
      const dev=type[paramsData.dev_type];  //根据其他组件选择的类型约束
      const list=[{
        name:paramsData.type,
        data:Data?.cur
      }];
      cloneOption.series=getSeries(list)
       return cloneOption
    
    }

useEffect中先预设option为空，再使用getOptions方法

useEffect(() => {
      if(Data){
        setoption({})
        setoption(getOptions(Data))
      }

    }, [Data,paramsData])

Map处理对应关系

需求：

传递参数给后端，需要根据name找到对应的id，传递id

原有对应关系在相隔很远的别的组件后端返回的数据中

解决：

 const devTypeMap = new Map([
    ["aaaa", 1],
    ["bbbb", 2],
    ["cccc", 3],
    ["dddd", 5],
    ["eeee", 4]
  ]);

 const rankData=await getRank({
        ....
        dev_type:devTypeMap.get(paramsData.dev_type)
      })

js对象属性通过“.”和“[ ]”访问的区别

在JavaScript中，可以使用两种方式来访问和操作对象的属性：使用方括号([])和点(.)运算符。

(.) 点操作符: 静态的。右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接出现在js程序中，它们不是数据类型，因此程序无法修改它们。

([]) 中括号操作符: 动态的。方括号里必须是一个计算结果为字符串的表达式，属性名通过字符串表示。字符串是js的数据类型，在程序运行时可以修改和创建它们。

obj.name
obj['name']

区别

[]可以使用变量作为属性名来进行访问，.不可以

const obj={}
obj.name='lili'
const myName='bob'

console.log(obj[myName])  //bob
console.log(obj.myName) //undefined

[]通过字符串访问时，需要加双引号

console.log(obj["name"])  //lili
console.log(obj.name) //lili

[]可以用数字作为属性名，.不可以

const obj={}
obj[1]=1

console.log(obj[1]) //1
console.log(obj.1)  //unexpected number
console.log(obj) //{2:2}

[]可以动态访问属性，可以在程序运行时创建、获取和修改属性，.则不行

(这也是上周踩的一个坑)

const drinks={}
const fruit=['apple','banana','orange']

for(let i=0;i<3;i++){
    drinks["fruit"+i]=fruit[i]
}

console.log(drinks) //{fruit0:'apple',fruit1:'banana',fruit2:'orange'}

[]中属性名可以使用空格、关键字、保留字
```
const drink={}
drink['first name']='li'
```

前端实习周记9

动态生成echarts

Map处理对应关系

js对象属性通过“.”和“[ ]”访问的区别

区别