option = {
backgroundColor: '#0f375f',
grid: {
top: "25%",
bottom: "10%"//也可设置left和right设置距离来控制图表的大小
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
show: false
}
}
},
legend: {
data: ["水", "水泥","粗骨料","细骨料","矿粉","粉煤灰","外加剂"],
top: "5%",
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
itemWidth: 14,
itemHeight: 14,
textStyle: {
inside: true,
color: '#fff',
padding: [11, 0, 10, 0],
align: 'left',
verticalAlign: 'center',
fontSize: 14,
rich: {},
},
},
xAxis: {
data: [
"2024-06-01",
"2024-06-02",
"2024-06-03",
"2024-06-04",
"2024-06-05",
"2024-06-06",
],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
"type": "shadow"
},
axisLabel: {
show: true,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
},
yAxis: [{
type: "value",
name: "使用量m³",
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#FFFFFF'
}
},
},
],
series: [{
name: "水",
type: "bar",
barWidth: 10,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
color: '#5470C6',
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [10,12,15,14,16,13,15]
},
{
name: "水泥",
type: "bar",
barWidth: 10,
color: "#91CC75",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [30,31,35,32,33,31,30]
},
{
name: "粗骨料",
type: "bar",
barWidth: 10,
color: "#FAC858",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [120,122,135,137,132,100,110]
},
{
name: "细骨料",
type: "bar",
barWidth: 10,
color: "#EE6666",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [45,48,35,50,45,38,43]
},{
name: "矿粉",
type: "bar",
barWidth: 10,
color: "#73C0DE",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [60,65,75,62,55,60,64]
},{
name: "粉煤灰",
type: "bar",
barWidth: 10,
color: "#3BA272",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [10,20,30,22,35,32,29]
},{
name: "外加剂",
type: "bar",
barWidth: 10,
color: "#FC8452",
itemStyle: {
normal: {
barBorderRadius: [3,3, 0, 0],
},
},
data: [80,60,75,68,63,58,63]
}
]
};