实现效果:
1. 需要多少层类目，就写几层xAxis，offset控制标签位置，length控制分割线长度；
2. series数组添加最底层图表数据；
3. 获取option并赋值；
上代码：
var option = {
title: {
show: false,
text: "昨日各省市运行车辆数&&累计运营里程（按车辆类型分布）"
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
x: 60,
y: 40,
x2: 60,
y2: 90
},
xAxis: [
{
type: 'category',
data: ["黑龙江省", "青海省", "陕西省"],
axisPointer: {
type: 'shadow'
},
position: 'bottom',
offset: 60,
axisTick: {
show: true,
length: 80,
lineStyle: {
type: 'dotted'
}
},
axisLine: {
show: false
},
axisLabel: {
rotate: 0,
textStyle: {
color: '#999',
fontSize: 12,
}
}
},
{
type: 'category',
data: ["20200312", "20200312", "20200312"],
axisPointer: {
type: 'shadow'
},
position: 'bottom',
offset: 40,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
rotate: 0,
textStyle: {
color: '#999',
fontSize: 12,
}
}
},
{
type: 'category',
data: ["其他", "牵引车", "载货车", "专用车", "自卸车", "其他", "牵引车", "载货车", "专用车", "自卸车", "其他", "牵引车", "载货车", "专用车", "自卸车"],
position: 'bottom',
axisPointer: {
type: 'shadow'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
rotate: 70,
textStyle: {
color: '#999',
fontSize: 10,
}
}
}
],
yAxis: [
{
type: 'value',
//name: '累计里程',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
formatter: '{value} km',
rotate: 0,
textStyle: {
color: '#999',
fontSize: 12,
},
formatter: function (value) {
var val = value;
if (val >= 10000 && val < 10000000) {
val = val / 10000 + "万";
} else if (val >= 10000000) {
val = val / 1000000 + "千万";
}
return val;
}
}
},
{
type: 'value',
//name: '车辆数',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
rotate: 0,
textStyle: {
color: '#999',
fontSize: 12,
},
formatter: function (value) {
var val = value;
if (val >= 0 && val < 1000) {
val = val / 1000 + "千";
} else if (val >= 10000) {
val = val / 10000 + "万";
}
return val;
}
},
}
],
series: [
{
name: '牵引车',
type: 'bar',
//barWidth: 14,
data: ["18451.4", "513.8", "28246.3"]
},
{
name: '载货车',
type: 'bar',
//barWidth: 14,
data: ["2774", "1656", "499"]
},
{
name: '专用车',
type: 'bar',
//barWidth: 14,
data: ["454", "161", "792"]
},
{
name: '自卸车',
type: 'bar',
//barWidth: 14,
data: ["73", "1632.4", "12383.3"]
},
{
name: '其他',
type: 'bar',
//barWidth: 14,
data: ["240.3", "144.2", "282.4"]
},
{
name: '车辆数',
type: 'line',
smooth: true,
xAxisIndex: 2,
yAxisIndex: 1,
data: [57,22,123,34,567,57,22,123,34,567,57,22,123,34,567]
}
]
};
注意事项：
1. 顶层各个区域类目数量必须一致，顺序可不一致；
2. 指定xAxis和yAxis;
3. 如果类目过多，将图表宽度调大，负责会导致类目乱掉；
4. 动态添加数据，注意数据的顺序及数量；