let legendData = ["电力", "煤炭","石油","天然气","非化石能源"];
let data1 = [
{ name: "当前", value: 7.5 },
{ name: "2025", value: 8.1 },
{ name: "2030", value: 7.6 }
];
let data2 = [
{ name: "当前", value: 7.6 },
{ name: "2025", value: 8.2 },
{ name: "2030", value: 8.1 }
];
let data3 = [
{ name: "当前", value: 7.7 },
{ name: "2025", value: 8.3 },
{ name: "2030", value: 7.9 }
];
let data4 = [
{ name: "当前", value: 26 },
{ name: "2025", value: 28 },
{ name: "2030", value: 24 }
];
let data5= [
{ name: "当前", value: 11 },
{ name: "2025", value: 12 },
{ name: "2030", value: 17 }
];
option = {
// color: ["#00BFFF", "#7FFFAA", "#FFD700", "#FA8072"],
legend: {
top: "0%",
left: "9%",
itemWidth: 10,
itemHeight: 8,
itemGap: 15,
textStyle: {
fontFamily: "MicrosoftYaHei",
fontSize: 12,
color: "#fff"
},
data: legendData,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function (params) {
var str =
// params[0].name +
// '</br>' +
params[0].marker.replace('border-radius:10px;', '') +
params[0].seriesName +
'：' +
params[0].value +
'</br>' +
params[0].marker.replace('border-radius:10px;', '') +
params[0].seriesName +
'占比：' +
(params[0].value/(params[0].value+params[1].value)*100).toFixed(2)+'%' +
'</br>' +
params[1].marker.replace('border-radius:10px;', '') +
params[1].seriesName +
'：' +
params[1].value +
'</br>' +
params[1].marker.replace('border-radius:10px;', '') +
params[1].seriesName +
'占比：' +
(params[1].value/(params[0].value+params[1].value)*100).toFixed(2)+'%' +
'</br>'+
params[2].marker.replace('border-radius:10px;', '') +
params[2].seriesName +
'：' +
params[2].value +
'</br>' +
params[2].marker.replace('border-radius:10px;', '') +
params[2].seriesName +
'占比：' +
(params[2].value/(params[0].value+params[1].value)*100).toFixed(2)+'%' +
'</br>';
return str;
},
},
grid: {
left: "-5%",
top: "15%",
right: "1%",
bottom: "5%",
containLabel: true
},
xAxis: {
type: "category",
data: ["当前(2022年)", "2025年能源目标","2030年能源目标"],
interval: true,
axisLine:{
show:false,
},
splitLine: {
show: false
},
axisLabel: {
margin: 14,
fontFamily: "MicrosoftYaHei",
fontSize: 12,
color: "rgba(255,255,255,.8)"
},
axisTick: {
show: false
}
},
yAxis: {
type: "value",
nameTextStyle: {
fontFamily: "PingFangSC-Regular, PingFang SC",
fontSize: 12,
color: "#999999"
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(52, 51, 51, 1)"
}
},
splitLine: {
show: false
},
axisLabel: {
show:false,
margin: 10,
fontFamily: "MicrosoftYaHei",
fontSize: 12,
color: "rgba(113, 113, 113, 1)"
},
axisTick: {
show: false
}
},
series: [,
{
name: legendData[0],
type: "bar",
stack: "truck",
barWidth: 60,
itemStyle: {
borderColor: "#fff",
borderWidth: 3,
normal: {
label: {
show: true,
position: "inside",
color:"#fff"
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(56, 248, 212, .8)" },
{ offset: 1, color: "rgba(67, 234, 128, .8)" }
])
}
},
label: {
show: false
},
data: data2
},
{
name: legendData[1],
type: "bar",
stack: "truck",
barWidth: 60,
itemStyle: {
borderColor: "#fff",
borderWidth: 3,
normal: {
label: {
show: true,
position: "inside",
color:"#fff"
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(39, 39, 213, .8)" },
{ offset: 1, color: "rgba(136, 208, 207, .8)" }
])
}
},
label: {
show: false
},
data: data1
},
{
name: legendData[2],
type: "bar",
stack: "truck",
barWidth: 60,
itemStyle: {
borderColor: "#fff",
borderWidth: 3,
normal: {
label: {
show: true,
position: "inside",
color:"#fff"
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(247, 114, 209, .8)" },
{ offset: 1, color: "rgba(200, 114, 242, .8)" }
])
}
},
label: {
show: false
},
data: data3
},
{
name: legendData[3],
type: "bar",
stack: "truck",
barWidth: 60,
itemStyle: {
borderColor: "#fff",
borderWidth: 3,
normal: {
label: {
show: true,
position: "inside",
color:"#fff"
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(251, 169, 128,.8)" },
{ offset: 1, color: "rgba(247, 203, 107, .8)" }
])
}
},
label: {
show: false
},
data: data4
},
{
name: legendData[4],
type: "bar",
stack: "truck",
barWidth: 60,
itemStyle: {
borderColor: "#fff",
borderWidth: 3,
normal: {
label: {
show: true,
position: "inside",
color:"#fff"
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(102, 166, 255, 1)" },
{ offset: 1, color: "rgba(137, 247, 254, 1)" }
])
}
},
label: {
show: false
},
data: data5
}
]
};