let myData4 = [
"AAA",
"BBB",
"CCC",
"DDD",
"EEE",
"FFF",
"GGG",
"HHH",
];
let hc = [1100, 1200, 800, 900, 1000, 400, 500, 1200];
let qc = [1500, 1600, 1200, 1300, 1400, 800, 700, 1600];
let llc = [1200, 1400, 800, 1000, 1100, 1000, 1200, 1000];
let option = {
backgroundColor: "#091224",
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
textStyle: {
color: "#fff",
},
backgroundColor: "rgba(0, 58, 99, 0.8)", //设置背景颜色
borderColor: "rgba(0, 58, 99, 0.8)",
confine: true,
},
legend: {
icon: "rect",
itemWidth: 14,
itemHeight: 10,
itemGap: 20,
right: "2%",
top: "2%",
textStyle: {
fontSize: 14,
color: "#fff",
},
data: ["火车", "汽车", "冷链车"],
selectedMode: false,
},
grid: {
top: "14%",
left: "2%",
right: "2%",
bottom: "6%",
containLabel: true,
},
dataZoom: [
{
show: true,
height: 8,
bottom: "2%",
right: "3%",
showDetail: false,
brushSelect: false,
backgroundColor: "#1F7ECE", // 背景颜色
showDataShadow: false,
borderColor: "transparent",
fillerColor: "#00C0FF", //拉动框的颜色
startValue: 0,
endValue: 5,
brushSelect: false,
handleSize: "60%",
zoomLock: true,
// 画一个圆形
// handleIcon:
// "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
handleStyle: {
// 两侧缩放手柄的样式配置。
borderColor: "#fff",
borderWidth: "5",
shadowBlur: 1,
background: "#fff",
shadowColor: "#fff",
},
},
],
xAxis: {
type: "category",
data: myData4,
axisPointer: {
type: "shadow",
},
axisLabel: {
color: "#A4A7AA",
interval: 0,
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(127, 214, 255, .4)",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
name: "",
nameTextStyle: {
color: "#A4A7AA",
fontSize: 12,
},
axisLine: {
show: false,
lineStyle: {
color: "rgba(127, 214, 255, .4)",
},
},
min: 0,
axisLabel: {
show: true,
color: "#A4A7AA",
fontSize: 12,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
width: 0.8,
color: "rgba(127, 214, 255, .4)",
type: "dashed",
},
},
},
series: [
{
data: hc,
name: "火车",
type: "bar",
barWidth: "10px",
barGap: "60%",
itemStyle: {
normal: {
borderColor: "rgba(54, 129, 255, 1)",
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(15, 51, 82, 1)",
},
{
offset: 1,
color: "rgba(0, 168, 255, 1)",
},
]),
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
{
data: qc,
name: "汽车",
type: "bar",
barWidth: "10px",
barGap: "60%",
itemStyle: {
normal: {
borderColor: "rgba(255, 207, 91, 1)",
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(63, 51, 22, 1)",
},
{
offset: 1,
color: "rgba(215, 158, 20, 1)",
},
]),
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
{
data: llc,
name: "冷链车",
type: "bar",
barWidth: "10px",
barGap: "60%",
itemStyle: {
normal: {
borderColor: "rgba(54, 234, 255, 1)",
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(15, 51, 82, 1)",
},
{
offset: 1,
color: "rgba(21, 219, 203, 1)",
},
]),
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
],
};
// window.addEventListener("resize", function () {
// myChart4.resize();
// });
// if (option4 && typeof option4 === "object") {
// myChart4.setOption(option4, true);
// var i4 = 0; //播放所在下标
// var mTime = setInterval(function () {
// myChart4.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: i4,
// });
// i4++;
// if (i4 >= myData4.length) {
// //console.log('data4', fxdata.length)
// i4 = 0;
// //console.log(fxdata)
// }
// }, 3000);
// }