Our project needs to achieve an effect like this:
the first method:
Original address: https://blog.csdn.net/u013270065/article/details/105073901/
Code:
option = {
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
length:20
},
},
{
type: 'category',
data: [
{
value: 'First week',
textStyle: {
fontSize: 18,
lineHeight: 70
}
},{
value: 'Second weeks',
textStyle: {
fontSize: 18,
lineHeight: 70
}
}
],
position : 'bottom',
axisTick: {
length:50
}
},
],
yAxis: {
type: 'value'
},
series: [{
data: [220, 332, 301, 334, 690, 730, 720, 220, 332, 301, 334, 690, 730, 720],
type: 'line'
}]
};
The disadvantage of this method is that the second level of the x-axis cannot set the interval by itself, only the interval will be evenly distributed, and the scale of the first level of the x-axis will be staggered.
So I went to find the official instance of ECharts and finally found a useful one.
The second method:
Official example address: https://gallery.echartsjs.com/editor.html?c=xnUHWTiDTY
Code:
let data = {
xData: ['花溪区', '南明区', '观山湖区', '钟山区', '六枝特区', '红花岗区', '汇川区', '遵义县', '西秀区', '平坝县', '玉屏县'],
yData: [0.1, 0.15, 0.18, 0.25, 0.23, 0.32, 0.33, 0.36, 0.57, 0.72, 0.45]
}
option = {
tooltip: {},
grid: [
{
top: 100,
bottom: 101
},
{
height: 60,
bottom: 40
}
],
xAxis: [{
type: 'category',
data: data.xData,
gridIndex: 0,
axisLabel: {
color: '#000'
},
axisLine: {
lineStyle: {
color: '#000'
}
},
axisTick: {
lineStyle: {
color: '#000'
}
},
zlevel: 2
}, {
type: 'category',
gridIndex: 1,
axisLine: {
show: false
,
},
axisTick: {
length:60,
},
zlevel: 1
}],
yAxis: [{
type: 'value',
gridIndex: 0,
axisLabel: {
color: '#333'
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
lineStyle: {
color: '#ccc'
}
}
},{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
data: data.yData,
type: 'line',
label: {
show: true,
position: 'bottom',
textStyle: {
color: '#000'
}
},
xAxisIndex: 0,
yAxisIndex: 0
},{
data: [{
name: '贵阳市',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#000'
}
},
type: 'bar',
barGap: 0,
barWidth: '27.2727%',
itemStyle: {
normal: {
color: 'rgba(134,176,237, 0)',
borderColor:'#000',
borderWidth:0.5,
},
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '六盘水市',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#000'
}
},
type: 'bar',
barGap: 0,
barWidth: '18.1818%',
itemStyle: {
normal: {
color: 'rgba(40,191,126, 0)',
borderColor:'#000',
borderWidth:0.5,
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '遵义市',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#000'
}
},
type: 'bar',
barGap: 0,
barWidth: '27.2727%',
itemStyle: {
normal: {
color: 'rgba(237,124,47, 0)',
borderColor:'#000',
borderWidth:0.5,
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '安顺市',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#000'
}
},
type: 'bar',
barGap: 0,
barWidth: '18.1818%',
itemStyle: {
normal: {
show:false,
color: 'rgba(242,169,59, 0)',
borderColor:'#000',
borderWidth:0.5,
}
},
xAxisIndex: 1,
yAxisIndex: 1
},{
data: [{
name: '铜仁市',
value: 1
}],
label: {
show: true,
position: 'inside',
formatter: '{b}',
offset: [0, 10],
textStyle: {
color: '#000'
}
},
type: 'bar',
barCategoryGap: 0,
barGap: 0,
barWidth: '9.0909%',
itemStyle: {
normal: {
color: 'rgba(249,207,54, 0',
borderColor:'#000',
borderWidth:0.5,
}
},
xAxisIndex: 1,
yAxisIndex: 1
}]
};
Effect picture:
The disadvantage of this method is that although the column chart can be added with a border, the border cannot only be set in one direction, but only in all four directions.
