echarts 如何实现如下效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 418 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在我有一个折线图，如何可以让点位于两个坐标中间呢？相当于整个折线图向右平移半格

我的 options:

{
xAxis: [
        {
          type: 'category',
          splitLine: {
            // 网格线
            lineStyle: {
              // 设置网格线类型 dotted：虚线   solid:实线
              type: 'dashed',
            },
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d8d8d8',
            },
          },
          axisLabel: {
            lineStyle: {
              color: '#8c8c8c',
            },
          },
          boundaryGap: false,
          // min: 0,
          // max: 24,
          data: ['0', '4', '8', '12', '16', '20', '24'],
        },
      ],
}

linestyle

折线

type

color

5 条回复 • 2023-10-09 15:36:44 +08:00

learninining

2023-10-09 11:19:28 +08:00

https://www.makeapie.cn/echarts 看看这上面有没有类似你要找的效果

Cooooooode

2023-10-09 14:00:53 +08:00

boundaryGap ？

bladey

2023-10-09 14:24:42 +08:00

option = {
xAxis: [{
type: "value",
min:0,
max:24,
interval: 4,
}],
yAxis: [{
type: "value"
}],
series: [{
name: "",
type: "line",
data: [[2, 10], [6,52]]
}]
}

x 轴设置成 value 类型，并按你的数据集强制设置 interval ；
series 中 data 改为坐标的形式的二维数组[[x,y], ...]，x 与 x 轴对应，y 是 line 对应的值

bladey

2023-10-09 14:31:40 +08:00

@bladey #3 试试支持代码片段不
```js
option = {
xAxis: [{ type: 'value', min: 0, max: 24, interval: 4 }],
yAxis: [{ type: 'value' }],
series: [
{
name: '',
type: 'line',
data: [
[2, 10],
[6, 52]
]
}
]
};
```

zficode

2023-10-09 15:36:44 +08:00

@bladey nice