Echarts在线免费图表

 
            const barWidthGap = {
   type: 'bar',
   barGap: 0.05,
   barWidth: '12%',
}
option = {
   backgroundColor:"#fff",
   //你的代码
   xAxis: [
      {
         data: ['a', 'b', 'c'],
      },
      {
         data: ['a', 'b', 'c', 'd'],
         boundaryGap: false,
         show: false,
         position: 'bottom',
      },
   ],
   yAxis: [
      {
         type: 'value',
      }
   ],
   grid: {
      top: 40,
      bottom: 10,
      left: 10,
      right: 10,
      containLabel: true
   },
   legend: {},
   tooltip:{},
   color: ['#34a466', '#0173e7', 'rgba(0,0,0,1)','rgba(0,0,0,1)', '#34a466', '#0173e7'],
   series: [
      {
         ...barWidthGap,
         name: '原交通组织供需差值',
         xlabel: '进口方向',
         data: [
            100, 200, 300
         ]
      },
      {
         ...barWidthGap,
         name: '潮汐车道下供需差值',
         xlabel: '出口方向',
         data: [
            100, 200, 300
         ]
      },
      {
         type: 'bar',
         barWidth: 5,
         data: [0.000001, 0.000001, 0.000001],
         id: 'smallXlabel1',
         label: {
            show: false,
            offset: [-10, 0],
            position: 'bottom',
            formatter: (v) => {
               return `{a|进\n口\n方\n向}`
            },
            rich: {
               a: {
                  width: 16,
               },
            }
         }
      },
      {
         type: 'bar',
         barWidth: 5,
         data: [0.000001, 0.000001, 0.000001],
         id: 'smallXlabel2',
         label: {
            show: false,
            offset: [10, 0],
            position: 'bottom',
            formatter: (v) => {
               return `{b|进\n口\n方\n向}`
            },
            rich: {
               b: {
                  width: 16,
               }
            }
         }
      },
      {
         ...barWidthGap,
         name: '原交通组织供需差值',
         xlabel: '进口方向',
         data: [
            100, 200, 300
         ]
      },
      {
         ...barWidthGap,
         name: '潮汐车道下供需差值',
         xlabel: '出口方向',
         data: [
            100, 200, -300
         ]
      },

      {
         type: 'bar',
         xAxisIndex: 1,
         yAxisIndex: 0,
         markLine: {
            lineStyle: {
               color: '#333',
               type: 'solid'
            },
            symbolSize: 0,
            data: [
               [
                  {
                     coord: ['a', 0]
                  },
                  {
                     coord: ['a', -300]
                  }
               ],

               [
                  {
                     coord: ['b', 0]
                  },
                  {
                     coord: ['b', -300]
                  }
               ],

               [
                  {
                     coord: ['c', 0]
                  },
                  {
                     coord: ['c', -300]
                  }
               ],

               [
                  {
                     coord: ['d', 0]
                  },
                  {
                     coord: ['d', -300]
                  }
               ]
            ]
         }
      }
   ]
};

requestAnimationFrame(() => {
   let echartLayout = myChart._chartsViews[0]._data._layout;
   let bandWidth = echartLayout.bandWidth;
   let barWidthUnitToFloat = parseFloat(barWidthGap.barWidth) / 100;
   let dif1 = bandWidth - 5 * 2 - bandWidth * barWidthUnitToFloat * 4 + bandWidth * barWidthGap.barGap;
   myChart.setOption({
      series: [
         {
            id: "smallXlabel1",
            label: {
               show: true,
               offset: [-dif1 / 4, 0]
            }
         },
         {
            id: "smallXlabel2",
            label: {
               show: true,
               offset: [dif1 / 4, 0]
            }
         }
      ]
   })
   console.log(dif1);
})