关于Echarts的填坑之旅
正如标题所说,这是Echarts的一遍填坑,如果你是一些echart的配置的话可以阅读
http://echarts.baidu.com/opti...的官网配置信息。今天我想给大家分享的是一些我前段时间从highchart改echart的时候所遇到的一些问题。希望能对大家有用。
1、echart 在使用的时候标签必须明确的定义其高度,不能让其自适应,否则会出现显示不出来的情况!
<div id="echart" style="width:100%;height:300px;"></div>
2、关于echart中Y坐标不完全等比例显示问题
当你遇到Y轴不是等分显示的时候,这时候你就应该看看你Y坐标配置中是否配置了max这个选项,当配置max这一项的时候,Y坐标的最大显示数会以你配置的最大值作为结束,也就可能出现Y坐标不能完全等分显示的情况
yAxis :{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false,
},
scale: true,
splitLine:{
show:true,
},
splitNumber: 3,
position:'left',
//max:_self.value,
axisLabel: {
inside: false,
interval: 0,
formatter: function(value, index) {
return value;
}
}
}
3、关于X轴type类型为time时如何自定义时间轴
有时候在项目中我们可能为遇到将X轴设置为时间轴的时候,但是又想自定义一定的规则来达到想要的效果。那么怎么办。我想echart官网中关于time的动态数据案例说的也够详细(http://echarts.baidu.com/demo...),但是它们的并不是我想要的格式,这时候怎么办,我们可以通过max和min和达到设置X坐标的效果,通过interval来设置间距。
xAxis :{
type:'time',
axisTick: { //坐标轴刻度相关设置
alignWithLabel: true,
lineStyle: {
color: '#ccc'
}
},
axisLine: { //坐标轴轴线相关设置
lineStyle: {
color: '#ccc'
}
},
axisLabel: { //坐标轴刻度标签的相关设置
textStyle: {
color: "#666"
}
},
splitLine: {
show: false
},
minInterval: 24 * 3600 * 1000,
interval: 24 * 3600 * 1000 * tickInterval,
min:_self.order_chart_data.order_chart_xAxis[0],
max:_self.order_chart_data.order_chart_xAxis[_self.order_chart_data.order_chart_xAxis.length-1]
},
效果:
时间选择为1天时,图表并以小时为单位更新数据:
时间选择为大于1天时,图表并以天为单位更新数据:
当设置X轴type类型为time的时候还有几点要注意的时:
(1)、x轴配置中不用配置data属性
(2)、series中的数据类型data属性要严格按照下面这种格式书写数据格式(否则数据会加载不出来)
series : {
name: 'echarts',
yAxisIndex: 0,
type:'line',
data : {
name:_self.order_chart_data.order_chart_xAxis[i],
value: [_self.order_chart_data.order_chart_xAxis[i],yAxis_one[i]]
},
showSymbol: false,
itemStyle: {
normal: {
color: '#5AAAEA',
lineStyle: {
color: '#5AAAEA'
}
}
}
}
要说的就这么多,总的来说echart相对来说还是比较简单的,官网的案例基本可以满足全部需要。希望以上问题对大家能有帮助!!!
关于Echarts的填坑之旅的更多相关文章
- bootstrap-table填坑之旅<一>认识bootstrap-table
应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
- stm32填坑之旅 - stm32f103c8t6点亮板载贴片蓝色LED
转载请注明:https://www.cnblogs.com/rockyf/p/11691622.html 开篇 开篇一定要精彩,不然路人不理睬!下述是笔者作为arm小白的填坑之旅 没错,这个之前一直从 ...
- React Native填坑之旅--Stateless组件
Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ re ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
随机推荐
- WPS:想让一个新标题后总跟着一种特定样式的文字
只需在这个后续段落样式中修改为你想要的那个样式即可
- WinRar:你需要从上一压缩卷启动解压命令以便解压
大文件被分解成许多个小的RAR文件,并按顺序排列好,解压时只需解压第一个RAR文件即可顺利解压所有文件,如果不按顺序解压就会出现上述问题,导致解压完一个子文件候无法解压剩下的文件
- 华山论剑之 PostgreSQL sequence (一)
前言 本文是 sequence 系列继三大数据库 sequence 之华山论剑 (Oracle PostgreSQL MySQL sequence 十年经验总结) 之后的第二篇,主要分享一下 Post ...
- 六、Java方法
Java方法 何为方法 System.out.println(),那么它是什么呢? System是一个类,out是一个对象,println()是一个方法 Java方法是语句的集合,它们在一起执行的 ...
- pep9伪代码
Set sum to 0 Read num 1 Set sum to sum + num1 Read num2 Set sum to sum + num2 Read num3 Set sum to s ...
- Typora使用教程 之 PicGo集成做图床
目录 一.Typora是什么 二.研究它的原因 三.需要解决的问题 四.解决图床问题 1.下载PicGo 2.安装下载的PicGo,并根据下图所示配置(必须安装nodejs,否则插件一直是" ...
- https 加密原理
转载于 https://www.cnblogs.com/imteck4713/p/12016313.html 补充: <图解HTTP> 1.引言 随着互联网安全意识的普遍提高,对安全要求稍 ...
- docker学习(三) - docker理解及命令
Docker 包括三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) 镜像 Docker 镜像就是一个只读的模板. 例如:一个镜像可以包含一个完整的 ubunt ...
- tensorflow源码解析之common_runtime-executor-下
目录 核心概念 executor.h Executor NewLocalExecutor ExecutorBarrier executor.cc structs GraphView ExecutorI ...
- Kotlin笔记小结(For Java Developer)
这篇文章为kotlin学习记录,主要针对的是自己的知识盲区,不适用于新手. 文中所有demo均来自于kotlin官网 类型 整形 Type Size (bits) Min value Max valu ...