const chartData = [
{
name: '苹果',
data: [
60, 220, 250, 190, 300, 210, 350, 250, 190, 30, 210, 190, 30, 210,
],
},
{
name: '梨子',
data: [40, 160, 110, 150, 100, 120, 90, 150, 0, 120, 90, 0, 120, 90],
},
{
name: '橙子',
data: [10, 50, 0, 140, 90, 110, 120, 140, 40, 110, 120, 40, 110, 120],
},
{
name: '香蕉',
data: [10, 20, 90, 100, 10, 100, 20, 400, 50, 110, 200, 50, 110, 200],
},
]
let fn=(name,data)=>{
return {
"name": name,
"type": "bar",
"stack": "total-profit",
"barWidth": 15,
"barMinHeight": 15,
"chip": false,
"emphasis": {
"focus": "series"
},
"itemStyle": {
"borderRadius": 10,
"borderWidth": 5,
"borderColor": "transparent",
"borderJoin": "round",
"borderType": "solid"
},
"data":data
}
}
let option = {
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "line"
},
"textStyle": {
"color": "#fafafa"
},
"borderColor": "transparent",
"backgroundColor": "rgba(0, 0, 0, 0.5)",
"extraCssText": "backdrop-filter: blur(6px);"
},
"legend": {
"show": true,
"right": 0,
"icon": "circle",
"itemHeight": 6,
"itemGap": 24,
"textStyle": {
"fontSize": 12,
"padding": [
0,
0,
0,
-8
]
}
},
"grid": {
"left": 10,
"right": 5,
"bottom": 10,
"top": 20,
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": [
"12/10",
"12/11",
"12/12",
"12/13",
"12/14",
"12/15",
"12/16",
"12/17",
"12/18",
"12/19",
"12/20",
"12/21",
"12/22",
"12/23"
],
"axisLine": {
"show": false
},
"axisTick": {
"show": false
}
}
],
"yAxis": [
{
"type": "value",
"itemStyle": {
"borderRadius": 50
},
"splitLine": {
"show": true,
"lineStyle": {
"type": [
5,
5
],
"dashOffset": 0,
"shadowBlur": 0
}
}
}
],
"markArea": {
"itemStyle": {
"borderCap": "round"
}
},
"series": chartData.map(item=>{
return fn(item.name,item.data)
}),
"color": [
"#0082D6",
"#4DA7E2",
"#A6D3F1",
"#D9ECF9"
]
}