扩展脚本：https://lodash.com/vendor/cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js
具体代码：
let legends = ['衣服', '裙子', '裤子', '包包', '鞋子']
let colors = [
['#107bd2', '#126bb4'],
['#0fbc91', '#138b77'],
['#aeaa53', '#7e804a'],
['#af586f', '#7e4861'],
['#1cb0d2', '#1c83a2'],
]
const xData = [
"0时",
"2时",
"4时",
"6时",
"8时",
"10时",
"12时",
"14时",
"16时",
"18时",
"20时",
"22时"
]
const data = [
[
{
"name": "市电",
"value": 1
},
{
"name": "市电",
"value": 1
},
{
"name": "市电",
"value": 3
},
{
"name": "市电",
"value": 5
},
{
"name": "市电",
"value": 4
},
{
"name": "市电",
"value": 5
},
{
"name": "市电",
"value": 3
},
{
"name": "市电",
"value": 1
},
{
"name": "市电",
"value": 3
},
{
"name": "市电",
"value": 5
},
{
"name": "市电",
"value": 4
},
{
"name": "市电",
"value": 2
}
],
[
{
"name": "光伏发电",
"value": -4
},
{
"name": "光伏发电",
"value": -3
},
{
"name": "光伏发电",
"value": -3
},
{
"name": "光伏发电",
"value": -3
},
{
"name": "光伏发电",
"value": -1
},
{
"name": "光伏发电",
"value": -1
},
{
"name": "光伏发电",
"value": -2
},
{
"name": "光伏发电",
"value": -4
},
{
"name": "光伏发电",
"value": -1
},
{
"name": "光伏发电",
"value": -4
},
{
"name": "光伏发电",
"value": -4
},
{
"name": "光伏发电",
"value": -3
}
],
[
{
"name": "储能放电",
"value": 0
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": 0
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": -2
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": -1
},
{
"name": "储能放电",
"value": -1
},
{
"name": "储能放电",
"value": -3
},
{
"name": "储能放电",
"value": 0
}
],
[
{
"name": "储能充电",
"value": 4
},
{
"name": "储能充电",
"value": 5
},
{
"name": "储能充电",
"value": 1
},
{
"name": "储能充电",
"value": 3
},
{
"name": "储能充电",
"value": 4
},
{
"name": "储能充电",
"value": 5
},
{
"name": "储能充电",
"value": 5
},
{
"name": "储能充电",
"value": 4
},
{
"name": "储能充电",
"value": 1
},
{
"name": "储能充电",
"value": 3
},
{
"name": "储能充电",
"value": 4
},
{
"name": "储能充电",
"value": 5
}
],
[
{
"name": "负载",
"value": 5
},
{
"name": "负载",
"value": 2
},
{
"name": "负载",
"value": 3
},
{
"name": "负载",
"value": 3
},
{
"name": "负载",
"value": 3
},
{
"name": "负载",
"value": 1
},
{
"name": "负载",
"value": 3
},
{
"name": "负载",
"value": 5
},
{
"name": "负载",
"value": 2
},
{
"name": "负载",
"value": 2
},
{
"name": "负载",
"value": 5
},
{
"name": "负载",
"value": 5
}
]
]
const symbolWidth = 30
const symbolHeight = 10
let series = []
const resultTopPlus = _.map(_.zip(...data), (group) =>
_.sumBy(
group.filter((m) => m.value > 0),
'value',
),
)
const resultTopMinus = _.map(_.zip(...data), (group) =>
_.sumBy(
group.filter((m) => m.value < 0),
'value',
),
)
const resultBottomPlus = (index) => {
return _.map(_.zip(...data.slice(0, index)), (group) =>
_.sumBy(
group.filter((m) => m.value > 0),
'value',
),
)
}
const resultBottomMinus = (index) => {
return _.map(_.zip(...data.slice(0, index)), (group) =>
_.sumBy(
group.filter((m) => m.value < 0),
'value',
),
)
}
legends.forEach((item, index) => {
const markPointTop = data[index].map((m, sindex) => {
const value = m.value > 0 ? resultTopPlus[sindex] : resultTopMinus[sindex]
if (m.value === 0) return {}
return {
name: 'top',
coord: [sindex, value],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][0],
},
{
offset: 1,
color: colors[index][0],
},
],
},
},
}
})
const markPointBottom = data[index].map((m, sindex) => {
const value = m.value > 0 ? resultBottomPlus(index)[sindex] : resultBottomMinus(index)[sindex]
if (m.value === 0) return {}
return {
name: 'bottom',
coord: [sindex, value],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][1],
},
{
offset: 1,
color: colors[index][1],
},
],
},
},
}
})
series.push({
type: 'bar',
name: item,
stack: true,
data: data[index],
z: index + 1,
barMaxWidth: 'auto',
barWidth: symbolWidth,
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][0],
},
{
offset: 0.5,
color: colors[index][1],
},
{
offset: 1,
color: colors[index][1],
},
],
},
},
markPoint: {
silent: true,
symbol: 'diamond',
symbolSize: [symbolWidth, symbolHeight],
data: [...markPointTop, ...markPointBottom],
},
})
})
const option = {
backgroundColor: '#223759',
tooltip: {
trigger: 'axis',
},
legend: {
type: 'scroll',
textStyle: {
color: '#ffffff',
},
data: legends,
},
xAxis: {
type: 'category',
data: xData,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,1)',
},
},
axisTick: {
show: false,
},
axisLabel: {
margin: 20, //刻度标签与轴线之间的距离。
},
},
yAxis: [
{
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#B5B5B5',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)',
type: 'dashed',
},
},
axisLabel: {
show: true,
textStyle: {
fontFamily: 'Microsoft YaHei',
color: '#FFF',
},
},
},
],
series,
}