ECharts的x轴和y轴均使用数值类型
今天有个需求,就是需要ECharts的x轴和y轴都要使用数值类型,即xAxis.type和yAxis.type均为value,然后我按照我以为的方式修改了下,发现图崩了
发现问题:
然后我打开了ECharts的官方在线编辑器做测试,首先写了自认为对的代码
option = {
xAxis: {
type: 'value',
data: [1, 2, 3, 4, 5, 6, 7],
name: 'x轴'
},
yAxis: {
type: 'value',
name: 'y轴'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
然后实际的图是有问题的,如下图,可以发现柱状图的左上角那个点的x和y的值是相等的,从左往右分别是70,80,110,120,130,150,200(没错,就是series里的那一组数据)

解决问题:
1、首先打开ECharts的官方文档
2、我看到xAxis.data[i]的文档内容,它里面提到xAxis的data是类目数据。那这也就意味着,当type='value'时,data里面存放的数据是无效的
类目数据,在类目轴(type:
'category')中有效。如果没有设置 type,但是设置了
axis.data,则认为type是'category'。如果设置了 type 是
'category',但没有设置axis.data,则axis.data的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data指明的是'category'轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。
3、再定位到type='line'的series.data,里面有提到
通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』
特别地,当只有一个轴为类目轴(axis.type 为
'category')的时候,数据可以简化用一个一维数组表示

4、那么也就是说,我需要在xAxis.type='value'的时候,把x轴的数据存放到series.data里面去。我按这个思路修改了代码,效果立马显现
option = {
xAxis: {
type: 'value',
name: 'x轴'
},
yAxis: {
type: 'value',
name: 'y轴'
},
series: [{
data: [
[1,120],
[2,200],
[3,150],
[4,80],
[5,70],
[6,110],
[7,130]
],
type: 'bar'
}]
};

5、还可以使用新特性dataset来设置,代码如下,效果和上图一致
option = {
xAxis: {
type: 'value',
name: 'x轴'
},
yAxis: {
type: 'value',
name: 'y轴'
},
series: [{
type: 'bar'
}],
dataset: {
source: [
[1, 120],
[2, 200],
[3,150],
[4,80],
[5,70],
[6,110],
[7,130]
]
}
};
ECharts的x轴和y轴均使用数值类型的更多相关文章
- R par yaxp xaxp 显示x轴和y轴的刻度线
R语言会自动根据数据的范围,在X轴和Y轴上标记合适的刻度 > options(scipen = ) > plot(sample(:, )) 生成的图片如下 通过par("yaxp ...
- par函数的las参数-控制x轴和y轴标签的方向
las 参数控制x轴和y轴的刻度线上的标签与两条轴的防线,可选值为0,1,2,3 0为默认值,代表始终与刻度线平行,代码示例: par(las = 0) plot(1:5, 1:5, main = & ...
- Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图
Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', ...
- Hdu 5862 Counting Intersections(有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点+树状数组区间求和单点跟新)
传送门:Hdu 5862 Counting Intersections 题意:有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点 分析: 基本的操作流程是:先将所有的线段按照横树坐标x按小的 ...
- 统制Highcharts中x轴和y轴坐标值的密度
统制Highcharts中x轴和y轴坐标值的密度 www.MyException.Cn 发布于:2012-06-26 10:04:13 浏览:688次 1 控制Highcharts中x轴和y轴坐标值的 ...
- WInform中实现设置ZedGraph中曲线的X轴与Y轴的上限与下限
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题
场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
- Winform中设置ZedGraph的X轴与Y轴的刻度不在对面显示
场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...
- echart-如何将x轴和y轴的原点进行重合???
设计稿突然让x轴 和y轴重合,我们可以设置图中的这个属性. 不知道还有没有别的设置属性,欢迎评论指出谢谢
随机推荐
- CSS实现下拉菜单的几种方法
PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...
- Vue日历
Vue生成日历,根据返回值将日期标红 HTML: <h1>CSS 日历</h1> <div id="calendar"> <div cla ...
- Java正则表达式—小应用—简易爬虫
在上一篇中,学习了正则表达式的四个功能.即匹配.分割.替换.获取. 利用获取功能,可以实现简单的网页爬虫. 4,获取:将字符串中的符合规则的子串取出. 获取功能的操作步骤: 1,将正则表达式 ...
- 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统:0.概述
欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 序言 帖主和队友仿制了一个简单版的微信,其中,队友是用Unity3D做前段,帖主用Java的Mina.Hiberna ...
- linux 命令——56 netstat(转)
netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...
- iOS内存探秘
http://www.cocoachina.com/ios/20170216/18689.html iOS 内存机制特点 有限的可用内存 iPhone 设备的 RAM 一直非常紧缺,iPhone 一代 ...
- 【洛谷3796】【模板】AC自动机(加强版)
点此看题面 大致题意: 一道模板题,给你\(N\)个模式串和一个文本串,要你求出在文本串中出现次数最多的若干个模式串并输出它们. \(AC\)自动机 都说了是\(AC\)自动机的模板题,做法肯定是\( ...
- 【转】iOS开发4:关闭键盘
在 iOS 程序中当想要在文本框中输入数据,轻触文本框会打开键盘.对于 iPad 程序,其键盘有一个按钮可以用来关闭键盘,但是 iPhone 程序中的键盘却没有这样的按钮,不过我们可以采取一些方法关闭 ...
- Mybatis-动态 SQL语句
if标签 判断语句,用户单条件分支判断 where标签 为了简化上面where 1=1的条件拼装,我们可以采用标签来简化开发 同 foreach标签 场景:传入多个 id 查询用户信息 标签用于遍历集 ...
- RobotFramework:钉钉扫码登录UI自动化
背景: 遇到一个项目,使用的是钉钉扫码登录,一时间不知道该怎么下手了,还是先F12抓包看下都有什么数据传输吧. 分析: 先熟悉下钉钉扫码登录的逻辑,参考官文:https://open-doc.ding ...