echarts：条形图从值开始？答案

【问题标题】：echarts: bar chart start at value?echarts：条形图从值开始？
【发布时间】：2020-12-19 16:24:46
【问题描述】：

echarts：条形图条位于类别轴上数值的左右：

如何告诉 echarts 以类别轴上的值开始 bar？像这样：

为了澄清问题，这里是另一个例子。这是每小时降水总和的图表。每个条形应显示从底部到顶部的总和，数据值与小时的每个底部相连。

如您所见，这些条形图并非从 8:00 开始，而是从 7:30 开始。

数据：（时间戳显示在 CET 中）

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

应该是这样的：

【问题讨论】：

标签： echarts

【解决方案1】：

此处的条形起点无所谓，您需要将标签左对齐：https://echarts.apache.org/en/option.html#series-bar.label.align

【讨论】：

不，这只会移动标签，不会移动轴上的值
你到底是什么意思？轴值在正确的位置。图片未描述问题。
也许使用 Mon 到 Sun 会产生误导，希望其他示例能澄清问题。
haha) 在这里，在俄罗斯，一周从星期一开始。见第二个答案。

【解决方案2】：

您需要一个隐藏的 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)'
    }
}]
};

【讨论】：

【解决方案3】：

您还没有提供完整的图表配置，所以我建议使用这个。还要注意方法useUTC，你需要知道“By default, echarts uses local timezone to formate time labels”

所以我通过偏移量 -180 的数据看到了 Chart 的这种状态：

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>

【讨论】：

恐怕你还是没明白重点。您的示例显示了同样的问题：酒吧在半小时开始，而不是整小时。