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

最新推荐文章于 2024-07-12 15:38:32 发布
最新推荐文章于 2024-07-12 15:38:32 发布
阅读量9.9k 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/orange2013/p/11065411.html
版权

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

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

 

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

 

 

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

 

 

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

weixin_30501857
关注
Echarts 展示——指定 series 中的数据对应指定类型的X轴或Y轴
虎康的博客
05-31 572
下图中，既有折线又有柱状图，也就是说X轴既有 value 的类型，又有 category 类型的数据，如果都要在一张图中展示，因为数据来源不同，且数据所对应的 X 轴和 Y 轴也不同，所以需要在设置数据源时添加所对应的索引。
echats条形图中y轴类型为类目时，y轴线的配置
打字员blog
02-15 1608
如上图所示的条形图，配置y轴方向的grid分割线的时候，耗费了很多时间，结果，被一句show:true打败了~~~~ 官方文档如图： 此例option代码： option = { grid: { left: 0, //距离外层box的上下左右边距 right: '4%', top: '6%', containLabe...
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...
echarts图表：类目轴
最新发布
ZhouJingID的博客
07-12 324
类目轴上的每个刻度代表一个类目，刻度之间没有量的关系，只是简单的分类。在类目轴上，数据点会对应到相应的类目上。类目轴，适用于离散的类目数据。例如商品名称、时间等。
vue中使用eacharts柱状图
m0_57997609的博客
10-12 603
vue中使用eacharts 柱状图（重叠）， 折线图案例
vue中使用echarts(2)(折线图柱状图混用，双y轴问题)
cygdxcw的博客
07-26 6744
echarts导入问题 如果要查看echarts的详细引入步骤，请查看文档《vue中使用echarts(1)》。此处只分享echarts初始化遇到的一些问题和配置项的使用。 在一个页面的两个不同组件都用到echarts时会出现一个问题，第一个echarts可以正常显示，切换到另一个组件时，其中的echarts图表的宽高会变成100*100.解决办法是切换组件时初始化该组件中的echarts图表。（...
Category详解
CatStarXcode的博客
02-22 2260
类别是Objective-C的一项功能，可扩展类的接口，而无需对类进行子类化。
echarts多个x轴，多个y轴.zip
12-31
每个数据系列（series）都可以通过` xAxisIndex`和` yAxisIndex`属性指定其对应的x轴和y轴。例如： ```javascript option = { series: [ { name: '销量', type: 'bar', xAxisIndex: 0, yAxisIndex: 0, data:...
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
weixin_33907300的博客
01-13 5680
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的，也就是说动态变化的，一开始的时候数据量不大不会出现问题，后面y轴的值越来越大的时候就出现了这个显示不全的情况。分析先贴一下页面代码HTML最近30天最近15周最近12个月CSS.row-wrapper {padding: 10px 15px;border-top: 8px #eee solid;font-size: 15px;c...
echart 折线图设置y轴单位_echartsY轴双坐标单位切换
weixin_39868248的博客
12-18 2201
话不多说直接上代码~option = {color:['#00c14f'],title: {text: 'RFM情况'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}},},legend: {data: ['购买时长(人均)天', '消费(人均)', '单价(人均)...
Echarts折线图平滑问题
热门推荐
nest9527的博客
04-20 2万+
Echarts3.0官网上的折线图不够平滑，有棱角、看着不舒服（个人感觉），解决办法：增加一个属性  smooth:true,
Echarts中折线图如何实现曲线是光滑的？
澜岚伊人的博客
10-29 1万+
摘要：最近也许总结Echarts和原生JS结合的知识会比较多点，因为最近在做大数据的开发。以前很多项目没总结的习惯，做完东西很多知识都忘记了。所以现在坚持写总结了。 需求：以前我实现的折线图曲线并没有要求是光滑的曲线，下面是如何实现折线图是光滑的曲线的。 实现： 1、先直接上代码了，代码中详细的注释呢 <!DOCTYPE html> <html> <hea...
ECharts - 4. ECharts 基础概念概览
YYDataV的博客
05-26 1110
ECharts 基础概念概览 本文介绍 echarts 最基本的名词和概念。 echarts 实例 一个网页中可以创建多个echarts 实例。每个echarts 实例中可以创建多个图表和坐标系等等（用option来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）...
ECharts基础概念
CodingmanNAN的博客
09-07 881
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 5382
legend与Y轴name对齐的问题，项目中echart的数量少还好说，可以用legend 的 style来用像素进行定位对齐，但是数量多的时候就只能另辟蹊径了，也是用了一个取巧的方法，我们来改造一下上面的方法。来自定义name，对比上述的其他方法，优势就是不用改变echart图表的样式，保持页面较为美观。导致这个问题产生的原因是，当数据过小时，Y轴的宽度过小，导致Y轴的name无法全部显示。第二，如果Y轴有两个name，且显示legend的时候往往会出现一个问题。我使用的方法是使用echart中的。
echarts中图例以及tooltip过多、x轴文本过长处理、y轴区间设置
qq_40934617的博客
06-22 3594
处理echarts中图例以及tooltip过多时的样式
Echarts将Y轴数据放入图表内，显示数据范围
牟云飞的博客
09-21 8685
将Y轴数据靠右，并且显示数据范围 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', axisLabel:{ ...
echart 数据使用不同y轴
06-02
可以使用 ECharts 提供的 `yAxisIndex` 属性来实现在同一个图表中使用不同的 y 轴。具体来说，需要在每个系列的配置中指定对应的 y 轴索引，如下所示： ```js option = { xAxis: { type: 'category', data: ['...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值