const resdata = ['210','100','350','200','80','120']
option = {
grid: {
top: '20%',
left: '5%',
bottom: '5%',
right: '5%',
containLabel: true,
},
"xAxis": {
"data": [
"总发电/总备用",
"带电负荷/停电负荷",
"直流受入",
"交流受入"
],
"type": "category",
"axisLine": {
"show": true,
"lineStyle": {
"color": "#ccc"
}
},
"axisLabel": {
"fontSize": 16,
"color": "#87CCFF" ,
padding: [0,-20, 0, 0], // 上方留白10像素，其余方向不留白
},
"axisTick": {
"show": false
},
"interval": 0,
offset: 10, // 将标签向右移动10个像素
},
"yAxis": [
{
"type": "value",
"name": "单位:MW",
"nameGap": 24,
"showLine": true, // 显示 x 轴线
"nameTextStyle": {
"align": "center",
"fontSize": 16,
"color": "#2869A9"
},
"splitNumber": 4,
"splitLine": {
"show": true,
"lineStyle": {
"color": "rgba(255,255,255,0.1)"
}
},
"axisLine": {
"show": false
},
"axisLabel": {
"margin": 10,
"fontSize": 16,
"color": "#2869A9"
},
"axisTick": {
"show": true,
"lineStyle": {
"color": "#2869A9"
}
},
axisLine: {
show: false, // 修改为 true 显示 y 轴线条
lineStyle: {
color: '#ddd',
},
},
axisLabel: {
textStyle: {
color: '#ddd',
},
},
splitLine: {
show: true, // 修改为 true 显示 y 轴分隔线
lineStyle: {
color: '#ddd',
type: 'dashed', // 将分隔线设置为虚线
},
},
}
],
"series": [
{
"data": [
// 269,
// 460,
// 400,
// 170
],
"type": "bar",
"name": "总发电/总备用",
"barGap": "20%",
"barWidth": 26,
"barMaxWidth": 48,
"label": {
"show": true,
"position": "top",
"distance": 4.8,
"textStyle": {
"color": "#4084EE",
"fontSize": 16
}
},
},
//第一个底
{
"data": [
resdata[0],
0,
0,
0
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(32, 147, 240, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
2,
"-50%"
],
"symbolSize": [
18,
7.4
],
// "zlevel": 1
},
//第二个上底
{
"data": [
0,
resdata[2],
0,
0
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(0, 99, 232, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
2.3,
"-50%"
],
"symbolSize": [
15,
7
],
// "zlevel": 1
},
//第三个上底
{
"data": [
0,
0,
resdata[4],
0
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(69, 224, 248, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
2,
"-50%"
],
"symbolSize": [
18,
7.4
],
// "zlevel": 2
},
//第四个上底
{
"data": [
0,
0,
0,
resdata[5],
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(0, 255, 0, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
2,
"-50%"
],
"symbolSize": [
17,
7.2
],
},
//中间阴影
{
"data": [
resdata[0],
resdata[2],
resdata[4],
resdata[5]
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(0,0,0,0.1)"
},
{
"offset": 1,
"color": "rgba(0,0,0,0.2)"
}
]
},
"symbolPosition": "end",
"symbol": "rect",
"symbolSize": [
7.5,
"100%"
],
"symbolOffset": [
-0.5,
0
],
"zlevel": 1
},
//中间部分
{
"data": [
{"value": resdata[0], "itemStyle": {"color": "rgba(32, 147, 240, 0.5)" } },
{"value": resdata[2], "itemStyle": {"color": "rgba(0, 99, 232, 0.5)" } },
{"value": resdata[4], "itemStyle": {"color": "rgba(69, 224, 248, 0.5)" } },
{"value": resdata[5], "itemStyle": {"color": "rgba(0, 255, 0, 0.7)" } }
],
"type": "bar",
"name": "其他资源",
"barWidth": 16,
"barMaxWidth": 40,
"showBackground": false,
},
//第二列柱子
//第二列第一个上盖
{
"data": [
resdata[1],
0
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(255, 179, 121, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
26.200000000000003,
"-50%"
],
"symbolSize": [
18,
7.4
],
// "zlevel": 2
},
//第二列第二个上盖
{
"data": [
0,
resdata[3],
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 48,
"color": "rgba(255, 70, 70, 1)",
"symbolPosition": "end",
"symbol": "diamond",
"symbolOffset": [
26.200000000000003,
"-50%"
],
"symbolSize": [
18,
7.4
],
// "zlevel": 2
},
//第二列阴影
{
"data": [
resdata[1],
resdata[3]
],
"type": "pictorialBar",
"tooltip": {
"show": false
},
"barMaxWidth": 38,
"color": {
"x": 0,
"y": 1,
"x2": 0,
"y2": 0,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(0,0,0,0.2)"
},
{
"offset": 1,
"color": "rgba(0,0,0,0.3)"
}
]
},
"symbolPosition": "end",
"symbol": "rect",
"symbolSize": [
7.5,
"100%"
],
"symbolOffset": [
27.700000000000003,
0
],
// "zlevel": 1
},
{
"data": [
{"value": resdata[1], "itemStyle": {"color": "rgba(255, 179, 121, 0.5)" } },
{"value": resdata[3], "itemStyle": {"color": "rgba(255, 70, 70, 0.5)" } }
],
"type": "bar",
"name": "资源",
"barGap": "50%",
"barWidth": 16,
"barMaxWidth": 48,
}
]
}