Design idea:

  1. Two grid;
  2. The bottom grid of labels is also a bar graph. Calculate the percentage of the total number of bars to contain. Set barWidth and add some styles to achieve the effect of inclusion relationship.
XData: [' of northwest area ', 'nanming', 'view mountain lakes',' Mr. Zhong area ', 'liuzhi', 'red flower district', 'inovance area', 'zunyi county', 'west show area', 'PingBa county', 'jade screen county], yData: [0.1, 0.15, 0.18, 0.25, 0.23, 0.32, 0.33, 0.36, 0.57, 0.72, 0.45]} / * * double X axis labels, pseudo implementation approach: */ option = {tooltip: {}, grid: [{bottom: 61}, {height: 60, bottom: 0 } ], xAxis: [{ type: 'category', data: data.xData, gridIndex: 0, axisLabel: { color: '#333' }, axisLine: { lineStyle: {color: '#e7e7e7'}}, axisTick: {color: '#e7e7e7'}}, zistick: {color: '#e7e7e7'}}, {type: 'category', gridIndex: 1, axisLine: { show: false }, 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: 'bar', label: { show: true, position: 'top', textStyle: { color: '#555' } }, itemStyle: { normal: { color: (params) => { let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1'] return colors[params.dataIndex] } } }, xAxisIndex: 0, yAxisIndex: 0},{data: [{name: ' ', value: 1}], label: {show: true, position: ' 'inside', formatter: ' '{b}', offset: [0, 10], textStyle: {color: '#777'}}, type: 'bar', barGap: 0, barWidth: '27.2727%', itemStyle: {normal: {color: 'rgba(134,176,237,.5)'}}, xAxisIndex: 1, yAxisIndex: 1},{data: [{name: 'liupanishi ', value: 1}], label: {show: true, position: 'inside', formatter: '{b}', offset: [0, 10], textStyle: { color: '#777' } }, type: 'bar', barGap: 0, barWidth: '18.1818%', itemStyle: {normal: {color: 'raxisindex (40,191,126,.5)'}}, xAxisIndex: 1, yAxisIndex: 1},{data: [{name: 'zunyizi ', value: 1}], label: {show: true, position: 'inside', formatter: '{b}', offset: [0, 10], textStyle: {color: '#777'}}, type: 'bar', barGap: 0, barWidth: '27.2727%', itemStyle: {normal: {color: 'rgba(237,124,47,.5)'}}, xAxisIndex: 1, yAxisIndex: 1},{data: [{name: 'anshon ', value: 1}], label: {show: true, position: 'inside', formatter: '{b}', offset: [0, 10], textStyle: { color: '#777' } }, type: 'bar', barGap: 0, barWidth: '18.1818%', itemStyle: {normal: {color: 'raxisindex'}}, xAxisIndex: 1, yAxisIndex: 1},{data: [{name: 'tongrun ', value: 1}], label: {show: true, position: 'inside', formatter: '{b}', offset: {name:' tongrun ', value: 1}], label: {show: true, position: 'inside', formatter: '{b}', offset: [0, 10], textStyle: {color: '#777'}}, type: 'bar', barGap: 0, barWidth: '9.0909%', itemStyle: {normal: {color: 'rgba(249,207,54,.5)'}}, xAxisIndex: 1, yAxisIndex: 1}]};Copy the code