?
效果如上图所示：?
backgroundColor: "rgba(0,0,0,0)",
tooltip: {
show: true,
formatter: activeName.value == "电" ?"{b}:{c}kWh":"{b}:{c}m3",
},
grid: {
left: "5%",
top: "-6%",
right: "15%",
bottom: "8%",
containLabel: true,
},
xAxis: {
type: "value",
show: false,
position: "top",
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
},
yAxis: [
{
type: "category",
axisTick: {
show: false,
alignWithLabel: false,
length: 5,
},
splitLine: {
//网格线
show: false,
},
inverse: "true", //排序
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: [
activeName.value == "电"
? allyongdianTop5[0].mingzi
: allyongshuiTop5[0].mingzi,
activeName.value == "电"
? allyongdianTop5[1].mingzi
: allyongshuiTop5[1].mingzi,
activeName.value == "电"
? allyongdianTop5[2].mingzi
: allyongshuiTop5[2].mingzi,
activeName.value == "电"
? allyongdianTop5[3].mingzi
: allyongshuiTop5[3].mingzi,
activeName.value == "电"
? allyongdianTop5[4].mingzi
: allyongshuiTop5[4].mingzi,
],
// y轴坐标字体颜色以及大小
axisLabel: {
fontSize: 14,
textStyle: {
color: function (params, Index) {
// 标签国家字体颜色
var colorarrays = [
"#71A7FA",
"#41DDC7",
"#C96016",
"#71FA96",
"#6688D8",
];
return colorarrays[Index];
},
},
},
},
],
series: [
{
type: "bar",
label: {
normal: {
show: true,
position: "right",
formatter: activeName.value == "电" ? "{c}kWh" : "{c}m3",
textStyle: {
color: "#fff",
fontSize: "10",
},
},
},
itemStyle: {
normal: {
show: true,
color: function (params) {
let num = colorArray.length;
return {
type: "linear",
colorStops: [
{
offset: 0,
color: colorArray[params.dataIndex % num].bottom,
},
{
offset: 1,
color: colorArray[params.dataIndex % num].top,
},
],
};
},
barBorderRadius: 70,
borderWidth: 10,
},
},
barGap: "0%",
barCategoryGap: "60%",
data: [
activeName.value == "电"
? allyongdianTop5[0].value
: allyongshuiTop5[0].value,
activeName.value == "电"
? allyongdianTop5[1].value
: allyongshuiTop5[1].value,
activeName.value == "电"
? allyongdianTop5[2].value
: allyongshuiTop5[2].value,
activeName.value == "电"
? allyongdianTop5[3].value
: allyongshuiTop5[3].value,
activeName.value == "电"
? allyongdianTop5[4].value
: allyongshuiTop5[4].value,
],
},
],
