let arr = [];
let list = [];
let series = [];
let legend = [];
let fontSize = 16;
let barWidth = 12;
let barGap = 60;
let maxList = [];
let volumeDetailData= [
{
name: "货物进境物流时间",
data: [269, 460, 200, 213, 342, 233, 123, 456],
},
{
name: "货物出境物流时间",
data: [369, 350, 269, 460, 200, 213, 342, 233],
},
{
name: "货班过站放行时间",
data: [359, 450, 269, 460, 200, 213, 342, 233],
},
]
let max = 460; //背景最大值取y轴刻度线（最后注释部分）
let colorStartList = ["transparent", "transparent"];
let colorLeftList = ["#000", "#000", "#000"];
let colorTopList = ["#ffa520", "#FFEBBC", "#73B0C7"];
let colorEndList = ["#ffa520", "#FFEBBC", "#73B0C7"];
let chartObj = {
series:volumeDetailData,
chartList: [
"1.16",
"1.23",
"1.30",
"2.6",
"2.13",
"2.20",
"2.27",
],
};
function colorRgba(str, alpha) {
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = str.toLowerCase();
if (sColor == "transparent") {
return "transparent";
}
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor
.slice(i, i + 1)
.concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
} else {
return sColor;
}
}
if (chartObj.series && chartObj.series.length) {
chartObj.series.forEach((ele, i) => {
arr = arr.concat(ele.data);
});
maxList = chartObj.series[0].data.map(() => {
return max;
});
list = chartObj.series[0].data.map((item, index) => {
return 1;
});
chartObj.series.forEach((item, index) => {
legend.push({
name: item.name,
bottom: "-1%",
itemStyle: {
color: colorEndList[index % colorEndList.length],
},
});
//背景顶部切片
series.push({
data: maxList,
type: "pictorialBar",
barMaxWidth: 12,
itemStyle: {
color: colorEndList[index],
opacity: 0.1,
},
tooltip: {
show: false,
},
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [
(-0.5 * (chartObj.series.length - 1) +
index +
-0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
barGap * 0.01 * index) *
barWidth,
"-50%",
],
symbolSize: [barWidth, barWidth * 0.4],
zlevel: -1,
});
//底部切片
series.push({
data: list,
color: colorStartList[index % colorStartList.length],
type: "pictorialBar",
tooltip: {
show: false,
},
barMaxWidth: 12,
symbol: "diamond",
symbolOffset: [
(-0.5 * (chartObj.series.length - 1) +
index +
-0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
barGap * 0.01 * index) *
barWidth,
"50%",
],
symbolSize: [barWidth, barWidth * 0.5],
});
//实际数据顶部切片
series.push({
data: item.data,
type: "pictorialBar",
tooltip: {
show: false,
},
barMaxWidth: 12,
color: colorTopList[index],
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [
(-0.5 * (chartObj.series.length - 1) +
index +
-0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
barGap * 0.01 * index) *
barWidth,
"-50%",
],
symbolSize: [barWidth, barWidth * 0.4],
zlevel: 2,
});
//实际数据侧边切片
series.push({
data: item.data,
type: "pictorialBar",
tooltip: {
show: false,
},
barMaxWidth: 12,
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "transparent",
},
{
offset: 0.2,
color: colorRgba(
colorLeftList[index % colorLeftList.length],
0.2
),
},
{
offset: 1,
color: colorRgba(
colorLeftList[index % colorLeftList.length],
0.3
),
},
],
},
symbolPosition: "end",
symbol: "rect",
symbolSize: [barWidth / 2, "100%"],
symbolOffset: [
(-0.5 * (chartObj.series.length - 1) +
index +
-0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
barGap * 0.01 * index -
0.25) *
barWidth,
0,
],
zlevel: 1,
});
//柱子
series.push({
data: item.data,
type: "bar",
name: item.name,
barGap: barGap + "%",
barWidth: barWidth,
barMaxWidth: 12,
label: {
show: false,
position: "top",
distance: fontSize * 0.3,
textStyle: {
color: colorEndList[index % colorEndList.length],
fontSize: fontSize,
},
// formatter: function (a, b) {
// return a.value==0?'':a.value;
// },
},
showBackground: false,
backgroundStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: colorStartList[index % colorStartList.length],
},
{
offset: 0.2,
color: colorRgba(
colorEndList[index % colorEndList.length],
0.2
),
},
{
offset: 1,
color: colorRgba(
colorEndList[index % colorEndList.length],
1
),
},
],
},
opacity: 0.1,
},
itemStyle: {
color: {
x: 0,
y: 1,
x2: 0,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: colorStartList[index % colorStartList.length],
},
{
offset: 0.2,
color: colorRgba(
colorEndList[index % colorEndList.length],
0.2
),
},
{
offset: 1,
color: colorRgba(
colorEndList[index % colorEndList.length],
1
),
},
],
},
},
});
});
}
option = {
backgroundColor: "#061326",
title: {
text: "",
top: 20,
left: "center",
textStyle: {
color: "#fff",
fontSize: 20,
},
},
tooltip: {
show: true,
trigger: "axis",
// backgroundColor: "rgba(116,176,222,0.5)",
extraCssText: "border: solid 1px #00ffea;",
borderWidth: 0,
confine: false,
appendToBody: true,
formatter: (params) => {
// console.log(params, "---paramsshopping");
let result =
"<div style='font-size: 12px;'>" +
params[0].name +
"</div>";
params.forEach((item, index) => {
var dotHtml = `<span style="display:inline-block;font-size: 12px;margin-right:5px;border-radius:50%;width:${fontSize}px;height:${fontSize}px;background:${colorEndList[index]}"></span>`;
result +=
"<div style='display:flex;align-items:center;font-size: 12px; width: 150px'>" +
dotHtml +
`<span style="color:${colorEndList[index]}; font-weight: bold">${item.seriesName}</span>` +
(item.seriesName
? "<span style='display:inline-block;margin-right:6px;color: #00b5eb;'></span>"
: "") +
`<span style="color:${colorEndList[index]}; font-weight: bold">${item.data}</span>` +
"</div>";
});
return result;
},
//轴触发提示才有效
axisPointer: {
type: "shadow",
shadowStyle: {
color: "rgba(35,49,77,0.01)",
},
},
textStyle: {
color: "#fff",
fontSize: fontSize,
},
},
grid: {
left: "3%",
right: "4%",
bottom: "20%",
top: "10%",
containLabel: true, //包括文本，居中
},
legend: {
itemHeight: 18.5,
itemWidth: 38.5,
itemGap: 16,
data: [
{
name: "货物进境物流时间",
icon: "rect",
itemStyle: {
color: "#E4BA25",
},
},
{
name: "货物出境物流时间",
icon: "rect",
itemStyle: {
color: "#FFEBBC",
},
},
{
name: "货班过站放行时间",
icon: "rect",
itemStyle: {
color: "#73B0C7",
},
},
],
left: "center",
top: "0",
itemGap: 50,
textStyle: {
//文字样式
color: "#fff",
fontSize: "16",
},
},
xAxis: {
data: chartObj.chartList,
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
show: true,
fontSize: fontSize,
color: "#FFFFFF",
interval: 0, //使x轴文字显示全
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
interval: 0,
},
yAxis: [
{
type: "value",
name: "",
nameGap: fontSize * 1.5,
nameTextStyle: {
align: "center",
fontSize: fontSize,
color: "#2869A9",
},
splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLine: {
show: true,
lineStyle: {
color: '#FFFFFF',
}
},
axisLabel: {
show: true,
margin: 10,
fontSize: fontSize,
color: "#FFFFFF",
},
axisTick: {
show: false,
lineStyle: {
color: "#2869A9",
},
},
},
],
series: series,
};