博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECharts的x轴和y轴均使用数值类型
阅读量:4563 次
发布时间:2019-06-08

本文共 1797 字,大约阅读时间需要 5 分钟。

今天有个需求,就是需要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、再定位到,里面有提到

通常来说,数据用一个二维数组表示。如下,每一列被称为一个『维度』

特别地,当只有一个轴为类目轴(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、还可以使用来设置,代码如下,效果和上图一致

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]        ]    }};

 

转载于:https://www.cnblogs.com/kumu/p/10931362.html

你可能感兴趣的文章
编程迷茫时候看一看
查看>>
“ORA-00913: 值过多”、“ORA-00911: 无效字符”
查看>>
编程中的那些容易迷糊的小知识
查看>>
Sizzle前奏
查看>>
Paint Chain HDU - 3980(sg)
查看>>
Chales常用操作
查看>>
C++ 运算符重载<<
查看>>
windows镜像
查看>>
Flask 模板语法
查看>>
ZOJ FatMouse' Trade 贪心
查看>>
音乐播放器
查看>>
SQL COOKBOOK (Ch.1-10)
查看>>
创建数组
查看>>
dict使用
查看>>
[转] 移动平台Html5的viewport使用经验
查看>>
ASP.NET MVC的帮助类HtmlHelper和UrlHelper
查看>>
《Python数据科学手册》第五章机器学习的笔记
查看>>
ubuntu16.04 配置爬虫环境
查看>>
Centos7,PHP7安装swoole
查看>>
02_ListActive中响应事件 并LogCat输出
查看>>