echarts 如何实现如下效果

2023-10-09 11:15:39 +08:00
 zficode

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

我的 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'],
        },
      ],
}

1504 次点击
所在节点    程序员
5 条回复
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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/980158

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX