let option = {
backgroundColor: "transparent",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
data: ["本周事项数", "上周事项数"],
align: "left",
right: 30,
top: 10,
textStyle: {
color: "#fff"
},
itemWidth: 15,
itemHeight: 11,
itemGap: 35
},
grid: {
left: "60",
right: "10",
bottom: "60",
top: "40"
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#355b68"
}
},
axisLabel: {
color: "#fff",
fontSize: 14,
interval: 0,
formatter: function(params) {
let newParamsName = "";
let paramsNameNumber = params.length;
let provideNumber = 4;
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";
let start = p * provideNumber;
let end = start + provideNumber;
if (p === rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
if (p > 2) {
tempStr = "...";
newParamsName += tempStr;
break;
} else {
tempStr = params.substring(start, end);
if (p < 2) {
tempStr += "\n";
}
}
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
},
splitLine: {
lineStyle: {
color: "#00314a"
}
},
axisTick: {
show: false
},
data: _self.HighFreWeekly.listX
}
],
yAxis: [
{
type: "value",
name: "事项数(件)",
nameTextStyle: {
color: "#fff",
fontSize: 14
},
axisLine: {
lineStyle: {
color: "#355b68"
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: "#355b68"
}
},
axisLabel: {
color: "#fff",
fontSize: 14,
formatter: "{value}"
}
}
],
series: [
{
name: "本周事项数",
type: "bar",
data: _self.HighFreWeekly.listY,
barWidth: 20,
barGap: "100%", // 柱图间距
itemStyle: {
color: new _self.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#f4e106" },
{ offset: 0.5, color: "#f9bd14" },
{ offset: 1, color: "#ff9f2e" }
])
}
},
{
name: "上周事项数",
type: "bar",
data: _self.HighFreWeekly.listZ,
barWidth: 20,
barGap: "100%",
itemStyle: {
color: new _self.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#00fef6" },
{ offset: 0.5, color: "#00c5f9" },
{ offset: 1, color: "#188df0" }
])
}
}
]
};
Echart - 双柱状图(bar)
最新推荐文章于 2024-08-12 15:05:43 发布