Echarts 将值与 x 标签类别对齐

Question

我有一个散点图，其中对 x 个刻度标签进行了分类。有很多，图表数据点未与其对应的类别 x 刻度对齐。知道如何对齐它们吗？请参阅下面的图表快照。

到目前为止我有以下配置：

option = {
            xAxis: {
                type: 'category',
                name: 'x Axis',
                data: ["A", "B", "C"],
                nameLocation: 'middle',
                nameGap: 50,
                nameTextStyle: {
                    fontSize: 12},
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#999',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    rotate: 30
              },
            },
            yAxis: {
                type: 'value',
                name: 'y Axis',
                nameLocation: 'middle',
                nameGap: 70,
                nameTextStyle: {
                    fontSize: 12
                }
            },
            dataZoom: [{
                type: 'inside'
            }],
            legend: {
                show: true
            },
            grid: {
                    top: 80,
                    containLabel: true,
                },
            tooltip: {
                trigger: "item"
            },
            series: [
                {
                id: 'Series B',
                type: 'scatter',
                data: [[0.11], [-0.01, 0.08, 8.02], [0.06, 0.0, 0.03]]
                },
                {
                id: 'Series A',
                type: 'scatter',
                data: [[0.99, 12.76, 9.45], [9.45, 14.97], [10.66, 10.74, 10.22]...],
                }]
        };

Answer 1

表示数据点的符号实际上是居中的。只要您看到光学畸变，就很容易检查。如果我们增加符号那么失真也应该增加，对吧？我做到了。

失真消失了。为什么？因为您计算机的显示粒度太小，无法正确显示数据点。

当发生这种情况时，您的软件使用亚像素渲染来在保持数据点形式和其视觉正确位置之间取得平衡，但无论如何结果都会失真，因为不可能将三个像素正确地分成两个像素。

总的来说，问题不是很简单，可以explore the topic separately. If you want to compensate the distortion you can use symbolOffset方法。

P.S。另外可能对你有用。

Echarts 将值与 x 标签类别对齐

Echarts align values with x label categories

echarts