之前只是用過普通的方法寫變量忌堂,這次加上循環(huán)加判斷,直接上代碼
`<div class="description">
<div class="mt-3 detail">
名稱:${list.name}<br />
價格${unitName}:${list.price}
${list.increase.split(",").map(value=>{
if(value>=0){
return `<span style="color:red">↑${value}</span>`
}else{
return `<span style="color:green">↓${value}</span>`
}
})}
</div>
</div>`
注意:主要是map的使用酗洒,需要用map,將值return出去士修,如果使用foreach則不報錯一直返回undefined
補充--echars中自定義內(nèi)容使用
formatter: (params)=>{
let list = []
let listItem = ''
params.map(value=>{
list.push(`
<div style="display:flex;justify-content: space-between;align-items: center">
<span>
<span style="background:${value.color};width:10px;height:10px;border-radius:5px;display:inline-block"></span>
新增${value.seriesName}
</span>
<span>${value.value}</span>
</div>
<div style="display:flex;justify-content: space-between;align-items: center">
<span>
<span style="background:${value.color};width:10px;height:10px;border-radius:5px;display:inline-block"></span>
掃碼總${value.seriesName.slice(2,4)}
</span>
<span>${value.data.total}</span>
</div>`)
})
listItem = list.join('')
return (`<div style="min-width:150px">
<div>
${params[0].name}
</div>
${listItem}
</div>`)
}
注意:不要直接循環(huán)最外層div,只能有一個根節(jié)點樱衷,循環(huán)拼接即可