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)'
    }
}]
};

echarts：条形图从值开始？

3 个答案: