echarts:条形图从值开始？

Question

echarts:条形图条形图位于类别轴上值的左侧和右侧：

​

如何告诉echarts以类别轴上的值开始条形图？如下所示：

​

为了澄清这个问题，这里有另一个例子。这是每小时降水量总和的图表。每条柱子应该显示从小时的底部到顶部的总和，数据值包含在该小时的每个底部。

​

如你所见，酒吧不是8:00开始营业，而是7:30开始营业。

数据：(时间戳以CET表示)

series: [
  {
    name: "Niederschlag",
    type: "bar",
    data: [[1608534000000, 3], [1608537600000, 5], [1608541200000, 2], [1608544800000, 0], [1608548400000, 1] ],
    barWidth: '100%'
  }
]

它应该看起来像这样：

​

​

Answer 1

条的起始点并不重要，您需要将标签左对齐：https://echarts.apache.org/en/option.html#series-bar.label.align

Answer 2

您尚未提供完整的图表配置，因此我建议使用此配置。还要注意useUTC方法，您需要知道"By default, echarts uses local timezone to formate time labels“

我可以通过偏移量为-180的数据来查看图表的状态：

​

​

var myChart = echarts.init(document.getElementById('chart'));
var chartData = [
  [1608534000000, 3],
  [1608537600000, 5],
  [1608541200000, 2],
  [1608544800000, 0],
  [1608548400000, 1],
];

var option = {
  tooltip: {},
  xAxis: {
    type: 'time',
    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    splitNumber: 24,
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: "Niederschlag",
    type: "bar",
    data: chartData,
    barWidth: '100%',
  }],
  useUTC: false,
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 1024px;height:400px;"></div>

​

Answer 3

您需要一个隐藏的xAxis，如下所示：

option = {
   xAxis: [{
    type: 'category',
    data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
    show: false
}, {
    type: 'category',
    data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
    boundaryGap: false,
    axisTick: { alignWithLabel: true },
    position: 'bottom'
}],
yAxis: {
    type: 'value'
},
series: [{
    data: [120, 200, 150, 80, 70, 110, 130,120,210,110,210],
    type: 'bar',
    barCategoryGap:'20%',
    itemStyle: {
    },        
    xAxisIndex: 0,
    backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
    }
}]
};