实现效果:

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
},

本文介绍了如何使用Echarts创建包含多层类目的柱状图和折线图。通过设置多个xAxis,调整offset和length属性控制类目标签的位置和分割线长度。同时展示了如何配置series数组以添加底层图表数据,并提供了完整的Echarts配置代码示例,包括数据处理和图表样式设置。注意,类目数量需保持一致,且要正确指定xAxis和yAxis。
最低0.47元/天 解锁文章
2473

被折叠的 条评论
为什么被折叠?



