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

最新推荐文章于 2023-12-05 16:27:27 发布
转载 最新推荐文章于 2023-12-05 16:27:27 发布 · 1w 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/orange2013/p/11065411.html
文章标签：

#javascript #ViewUI

博主在大屏项目中，遇到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 展示——指定 series 中的数据对应指定类型的X轴或Y轴
虎康的博客
05-31 877
下图中，既有折线又有柱状图，也就是说X轴既有 value 的类型，又有 category 类型的数据，如果都要在一张图中展示，因为数据来源不同，且数据所对应的 X 轴和 Y 轴也不同，所以需要在设置数据源时添加所对应的索引。
【echarts多y轴】通过接口获取参数后渲染echarts多y轴图
Li_Ning21的博客
01-17 264
【代码】【echarts多y轴】通过接口获取参数后渲染echarts多y轴图。
ECharts 基础概念 实例/series/组件
天天开心
01-15 1万+
1 ECharts实例 一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等等（用option来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 2 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 ec
根据需要的图表类型选择echarts对应的series类型
与望
01-09 1万+
折线型：line 条状型：bar 饼图：pie 散点图：scatter 涟漪特效散点图：effectScatter 雷达图：radar 树状图：tree treemap 旭日图sunburst 箱形图boxplot k线图 candlestick 热力图heatmap 地图map 平行坐标系parallel 线路图 lines 关系图graph 有向无环图 sank...
vue中使用eacharts柱状图
m0_57997609的博客
10-12 668
vue中使用eacharts 柱状图（重叠）， 折线图案例
vue中使用echarts(2)(折线图柱状图混用，双y轴问题)
cygdxcw的博客
07-26 6973
echarts导入问题 如果要查看echarts的详细引入步骤，请查看文档《vue中使用echarts(1)》。此处只分享echarts初始化遇到的一些问题和配置项的使用。 在一个页面的两个不同组件都用到echarts时会出现一个问题，第一个echarts可以正常显示，切换到另一个组件时，其中的echarts图表的宽高会变成100*100.解决办法是切换组件时初始化该组件中的echarts图表。（...
echarts中y轴（yAxis）& x轴（xAxis），配置参数详情的参数配置项释义
Jana Jing的分享
12-05 1万+
echarts中y轴（yAxis）的参数配置项释义
echarts多个x轴，多个y轴.zip
12-31
每个数据系列（series）都可以通过` xAxisIndex`和` yAxisIndex`属性指定其对应的x轴和y轴。例如： ```javascript option = { series: [ { name: '销量', type: 'bar', xAxisIndex: 0, yAxisIndex: 0, data:...
多图形单option指定图形双Y轴
01-22
当需要将不同的数据系列绑定到不同的Y轴时，只需在series中指定对应的数据系列的yAxisIndex为0或者1，这样就可以实现一个图表中同时展示两组不同量纲数据的目标。 通过ECharts提供的option对象，可以灵活配置多图形...
ECharts折线图-垂直折线图(Y轴为类目轴).rar
09-15
1. 系列（series）配置：这部分定义了数据系列的类型为"line"，并可设置数据项以及相应的样式等。 2. 轴（xAxis和yAxis）配置：设置Y轴为类目轴，X轴为数值轴，可以指定类目轴的分类名称。 3. 工具箱（toolbox）配置...
Category详解
CatStarXcode的博客
02-22 2395
类别是Objective-C的一项功能，可扩展类的接口，而无需对类进行子类化。
Echarts折线图平滑问题
热门推荐
nest9527的博客
04-20 2万+
Echarts3.0官网上的折线图不够平滑，有棱角、看着不舒服（个人感觉），解决办法：增加一个属性  smooth:true,
Echarts中折线图如何实现曲线是光滑的？
澜岚伊人的博客
10-29 1万+
摘要：最近也许总结Echarts和原生JS结合的知识会比较多点，因为最近在做大数据的开发。以前很多项目没总结的习惯，做完东西很多知识都忘记了。所以现在坚持写总结了。 需求：以前我实现的折线图曲线并没有要求是光滑的曲线，下面是如何实现折线图是光滑的曲线的。 实现： 1、先直接上代码了，代码中详细的注释呢 <!DOCTYPE html> <html> <hea...
ECharts - 4. ECharts 基础概念概览
HelloCode5110的博客
05-26 1226
ECharts 基础概念概览 本文介绍 echarts 最基本的名词和概念。 echarts 实例 一个网页中可以创建多个echarts 实例。每个echarts 实例中可以创建多个图表和坐标系等等（用option来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）...
ECharts基础概念
CodingmanNAN的博客
09-07 965
Hello ECharts 1.引入 ECharts <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 2.绘制一个简单的图表 <!-- 为ECharts准备一个具备大小（宽高）的 Dom -->
SAP中类型(Type)和类别(Category)详解及其区别
王小磊
05-02 1万+
文章目录一、概述二、系统示例1-订单三、系统示例2-凭证 一、概述 类型（Type）和类别（Category）是SAP常见的两个概念，大部分情况下都是一起出现。 如：SD凭证类型和SD凭证类别、订单类型和订单类别等。 类别（Category）：确定凭证或订单技术属性，并对类型进行分类（一个类别对应对个类型）， 确定凭证或订单数据存入的不同数据库表和不同的业务数据处理方法 类型（Type）：区别凭证...
vue-echarts 柱状图Y轴Name因为数据过小导致显示不全的问题& legend（图例）和Y轴文字自适应对齐
weixin_42623929的博客
05-17 5872
legend与Y轴name对齐的问题，项目中echart的数量少还好说，可以用legend 的 style来用像素进行定位对齐，但是数量多的时候就只能另辟蹊径了，也是用了一个取巧的方法，我们来改造一下上面的方法。来自定义name，对比上述的其他方法，优势就是不用改变echart图表的样式，保持页面较为美观。导致这个问题产生的原因是，当数据过小时，Y轴的宽度过小，导致Y轴的name无法全部显示。第二，如果Y轴有两个name，且显示legend的时候往往会出现一个问题。我使用的方法是使用echart中的。
echarts中图例以及tooltip过多、x轴文本过长处理、y轴区间设置
qq_40934617的博客
06-22 3830
处理echarts中图例以及tooltip过多时的样式
如何理解echarts中的系列series和维度dimensions
TreepoBear的博客
04-05 2842
当然这只是画图展示的维度，分组下钻可以无限钻下去的，举个例子，做AB实验，实验组别=》每个实验组别里面再分组。毕竟直角坐标系是个二维的图，把取值这个维度放在y轴，只剩下一个维度x轴。直角坐标系，自带两个维度，x和y。如果再分个组，有四个维度了，只能组合其中两个维度，比如x轴放年份，颜色是A组-MachaLatte这种组合的形式。官网的例子里，x轴的类型是类目轴category，而且含义就是类目，类目这个维度体现在x轴上。对于不同的坐标系，有不同的映射方式，最经典的，直角坐标系，指定x，y用哪个维度。
echart 多y轴
最新发布
03-29
### 如何在 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、付费专栏及课程。

余额充值