如何使用echarts库设置每个条形左侧的x轴刻度？

Question

我想在栏的左侧显示每个 x 轴刻度，而不是在中心，但我不确定哪个设置可以帮助我，我尝试将

boundaryGap

设置为 false，但没有运气。请注意 x 轴类型是

time

。

http://jsfiddle.net/ztcyhwr9/

Answer 1

您可以通过不显示“值”xAxis（用于放置条形图）并显示“图例”xAxis来解决此问题

option = {
    xAxis: [
      {
        type: 'category',
        data: ['0:00-0:30', '0:30-1:00', '1:00-1:30', '1:30-2:00', '2:00-2:30', '2:30-3:00', '3:00-3:30'],
        show:false
      },
      {
        type: 'category',
        data: ['0:00', '0:30', '1:00', '1:30', '2:00', '2:30', '3:00','3:30'],
      position:'bottom',
      boundaryGap:false,
      },
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- Include the ECharts file you just downloaded -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- Prepare a DOM with a defined width and height for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // Initialize the echarts instance based on the prepared dom
      var myChart = echarts.init(document.getElementById('main'));

      // Specify the configuration items and data for the chart
      var option = {
  xAxis: [{
      type: 'category',
      data: [
        '0:00-0:30',
        '0:30-1:00',
        '1:00-1:30',
        '1:30-2:00',
        '2:00-2:30',
        '2:30-3:00',
        '3:00-3:30'
      ],
      show: false
    },
    {
      type: 'category',
      data: ['0:00', '0:30', '1:00', '1:30', '2:00', '2:30', '3:00', '3:30'],
      position: 'bottom',
      boundaryGap: false
    }
  ],
  yAxis: [{
    type: 'value'
  }],
  series: [{
    type: 'bar',
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

      // Display the chart using the configuration items and data just specified.
      myChart.setOption(option);
    </script>
  </body>
</html>

Answer 2

let xAxis = historyTheft.map(item => moment(item[0]).format('HH:mm'));
let series = historyTheft.map(item => item[1]);

....
option = {
   color: ["#009C95","#21ba45"],
   title : {
       text: 'Fuel History',
       textStyle: {
           fontFamily: 'lato'
       }
   },
   tooltip : {
       trigger: 'axis'
   },
   xAxis: {
       type: 'category',
       data: xAxis
   },
   yAxis : {
       type: 'value'
   },
   series : [
       {
           name:'Fuel Theft',
           type:'bar',
           itemStyle: {normal: {areaStyle: {type: 'default'}}},
           data: series
       }
   ]
}

希望对您有帮助。

如何使用echarts库设置每个条形左侧的x轴刻度？

问题描述投票：0回答：2

2个回答

最新问题

如何使用echarts库设置每个条形左侧的x轴刻度？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2