echart y轴 type为"category"类型,series 为多组数据时遇到的Y轴的数据不连续

博主在大屏项目中,遇到Y轴类目轴时间点不连续问题。经查找,type为category时表示离散数据,需通过data设置类目数据。解决办法是将series的Y轴数据集合,添加不重复数据到data,再对Ytime数组排序,使Y轴数据按顺序排列。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前两天做一个大屏的项目,遇到了Y轴的type为'category' 类目轴,表示了时间点,结果遇到的是时间点不连续的问题:如下图

查找问题,结果是type为category这个类型时,表示的是离散的数据,必须通过 data 设置类目数据。就是将series 的表示的Y轴的数据集合起来,在进行排序

 

将所有的数据不重复的数据添加到data中,然后再对Ytime的数组进行排序

 

 

这样出来的Y轴的数据就是按照顺序排序的

 

 

转载于:https://www.cnblogs.com/orange2013/p/11065411.html

### 如何在 ECharts 中实现多 Y 图表 在 ECharts 中,可以通过 `yAxis` 的数组配置来定义多个 Y 。每个 Y 可以独立设置其位置、样式以及其他属性。为了使同系列的数据对应同的 Y ,需通过 `series.yAxisIndex` 属性指定该系列所使用的 Y 索引。 以下是具体的配置方法和示例: #### 配置说明 - **`yAxis` 数组**:用于定义多个 Y 。每个对象代表一条 Y 。 - **`position` 属性**:控制 Y 的位置,可选值为 `'left'` 或 `'right'`[^1]。 - **`offset` 属性**:调整 Y 相对于默认位置的偏移量。 - **`name` 属性**:为每条 Y 命名以便区分。 - **`series.yAxisIndex`**:指定某个数据系列对应的 Y 索引。 #### 示例代码 以下是一个完整的双 Y 折线图示例: ```javascript option = { tooltip: { trigger: 'axis' }, legend: { data: ['数据A', '数据B'] }, grid: { left: '10%', right: '20%', // 为右侧 Y 留出空间 containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], yAxis: [ { type: 'value', name: '数据A单位', position: 'left', alignTicks: true, // 对齐刻度 axisLine: { show: true }, // 显示坐标线条 axisLabel: { formatter: '{value}' } // 自定义标签格式 }, { type: 'value', name: '数据B单位', position: 'right', offset: 20, // 偏移量 axisLine: { show: true }, axisLabel: { formatter: '{value}%' } // 百分数显示 } ], series: [ { name: '数据A', type: 'line', yAxisIndex: 0, // 使用左侧 Y data: [120, 132, 101, 134, 90, 230, 210] }, { name: '数据B', type: 'line', yAxisIndex: 1, // 使用右侧 Y data: [2.0, 2.2, 3.3, 2.8, 2.6, 2.7, 2.4] } ] }; ``` #### 关键点解析 - **网格布局 (`grid`)** - 设置 `left`, `right` 参数以确保两侧 Y 有足够的显示空间。 - **Y 对齐 (`alignTicks`)** - 如果两个 Y 需要保持相同的刻度间隔,则启用此选项[^2]。 - **自定义标签格式** - 利用 `formatter` 函数可以根据需求动态修改 Y 上的数值显示方式[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值