今天有个需求,就是需要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轴均使用数值类型的更多相关文章

  1. R par yaxp xaxp 显示x轴和y轴的刻度线

    R语言会自动根据数据的范围,在X轴和Y轴上标记合适的刻度 > options(scipen = ) > plot(sample(:, )) 生成的图片如下 通过par("yaxp ...

  2. par函数的las参数-控制x轴和y轴标签的方向

    las 参数控制x轴和y轴的刻度线上的标签与两条轴的防线,可选值为0,1,2,3 0为默认值,代表始终与刻度线平行,代码示例: par(las = 0) plot(1:5, 1:5, main = & ...

  3. Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图

    Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', ...

  4. Hdu 5862 Counting Intersections(有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点+树状数组区间求和单点跟新)

    传送门:Hdu 5862 Counting Intersections 题意:有n条线段,每一条线段都是平行于x轴或者y轴,问有多少个交点 分析: 基本的操作流程是:先将所有的线段按照横树坐标x按小的 ...

  5. 统制Highcharts中x轴和y轴坐标值的密度

    统制Highcharts中x轴和y轴坐标值的密度 www.MyException.Cn 发布于:2012-06-26 10:04:13 浏览:688次 1 控制Highcharts中x轴和y轴坐标值的 ...

  6. WInform中实现设置ZedGraph中曲线的X轴与Y轴的上限与下限

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  7. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

  8. Winform中设置ZedGraph的X轴与Y轴的刻度不在对面显示

    场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...

  9. echart-如何将x轴和y轴的原点进行重合???

    设计稿突然让x轴 和y轴重合,我们可以设置图中的这个属性. 不知道还有没有别的设置属性,欢迎评论指出谢谢

随机推荐

  1. fstab 解析

    某些时候当Linux系统下划分了新的分区后,需要将这些分区设置为开机自动挂载,否则,Linux是无法使用新建的分区的. /etc/fstab 文件负责配置Linux开机时自动挂载的分区. Window ...

  2. centos6.2安装内核

    http://vault.centos.org/6.2/updates/Source/SPackages/ yum install rpm-build redhat-rpm-config unifde ...

  3. Mysql数据库学习总结(一)

    数据库概念 数据库(Database)是按照数据结构来组织.存储和管理数据,建立在计算机存储设备上的仓库. 简单说,数据库就是存放数据的仓库.和图书馆存放书籍.粮仓存放粮食类似. 数据库分类 分为 关 ...

  4. C# ,通用内存集合对象分页、筛选(lambda那点事)

    通常呢我们需要翻页的数据大多都是从数据库中取,翻页.筛选.排序啥的都是通过SQL语句由数据库帮我搞定,那么有些需求没有数据库呢?或者有些数据只存在于内存中不存到数据库呢?怎么实现内存里面的对象集合的通 ...

  5. IP地址与数字地址相互转换

    /// <summary> /// IP地址转换成数字 /// </summary> /// <param name="addr">IP地址&l ...

  6. HDU5124 lines

    离散化 + 树状数组. 这些东西自己都是刚接触不久的,所以需要多写点题练练手. 题目描述: 一维坐标中有N条线段,其中有一个点上面覆盖的线段数是最多的,求该点上面的线段数目. 这道题和HDU1556特 ...

  7. matlplotlib 为折线图填充渐变颜色

    概要   本篇记录绘图时填充颜色时的一些常用设置,主要用到了 imshow,fill 函数.   填充图实例   填充的效果图如下: 图 1:渐变色效果图 可根据下方给出的代码进行自定义. #!/us ...

  8. 题解P3951【小凯的疑惑】

    相信参加OI的oiers都是数学高手吧 我好像不是 (滑稽 那应该大家都接触过邮资问题吧! 所谓邮资问题,就类似于这一题,给定a和b两种邮资数,求最大的不能凑出的邮资 数.这里给出公式:最大的不能集出 ...

  9. SpringBoot学习记录(一)

    1. Spring的Java配置方式 Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1.1. @Configuration 和 @Bean Spring的Java配置方式是 ...

  10. 表格和网页ico图标

    表格: 表格格式: <table> <tr> 表格的行 <th >表头</th> <th>表头 </th> </tr> ...