文档章节

Echarts图表选项_干货

ali安东尼
 ali安东尼
发布于 2017/05/15 14:49
字数 857
阅读 21
收藏 0

Echarts图表选项

一、Echarts图表组件 Echarts图表选项(option),包含了图表实例任何可配置的选项:公共选项,组件选项,数据选项。而组件选项又在一定程度上将公共选项以及,一般情况下,主要包括标题组件(title)、图例组件(legend)、网格组件(grid)、坐标轴组件(Axis)、提示框组件(tooltip)、工具栏组件(toolbox)以及数据列组件(series),除了上述的基础组件外,还有各大坐标系组件、区域缩放组件(dataZoom)、视觉映射组件(visualMap)、区域选择组件(brush)、时间轴组件(timeline)以及原生图形元素组件(graphic)等。

二、基础组件

一个基本的Echarts图表会包括下面的7大基础组件,也即是说下面的7大基础组件构成了一张基本的Echarts图表。

1、标题组件(title)

即图表的标题,包括主标题和副标题。可设置超链接及修改文本样式等。

2、图例组件(legend)

图例是图表中用来标志不同数据列的,点击图例可以显示或隐藏数据列。

3、网格组件(grid)

该组件是在直角坐标系内绘制网格,在网格上可以绘制其他图形,如折线图,柱形图,散点图等。

4、坐标轴组件(Axis)

直角坐标系组件,主要分为x轴和y轴,对应于网格组件中的x轴和y轴,可设置位置、偏移、极值、间隔等。

5、提示框组件(tooltip)

当鼠标悬浮在数据点或者数据项上时,会以框的形式提示该点的详细信息,提示框内的信息可以根据需求格 式化,支持字符串模板以及回调函数两种形式。

6、工具栏组件(toolbox)

内置了导出图片、数据视图、动态类型切换、数据区域缩放、重置等5个工具。

7、数据列组件(series)

数据列是一组数据集合,图表中所有点的数据都来自数据列对象,可以通过type来决定自己的图表类型。

三、其他组件

8、各大坐标系组件

包括极坐标系(polar)、雷达图坐标系(radar)、地理坐标系(geo)、平行坐标系(parallel)等。

9、区域缩放组件(dataZoom)

用于区域缩放,能自由关注细节的数据信息,也能概览数据整体或者去除离群点的影响。内部分为3种类型:内置型、滑动条型、框选型。

10、视觉映射组件(visualMap)

用于进行视觉编码,也就是将数据映射到视觉元素,该组件可以定义多个,以达到可以同时对数据中的多个维度进行视觉映射的效果。

11、区域选择组件(brush)

可以用于选择图中的一部分数据,从而便于向用户展示被选中的数据,或者一些用户的统计计算结果。

12、时间轴组件(timeline)

操作多个option,提供了多个option间进行切换、播放等操作功能。

13、原生图形元素组件(graphic)

可以用来做水印、文本块等,可以支持的图形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group等。

由睿江云开发人员提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
私信 提问
深入解析Vue开发动态刷新Echarts组件的教程

需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲...

peakedness丶
2018/12/19
815
0
.net图表之ECharts随笔01-最简单的使用步骤

找了几种绘制图表的办法,后面选定了ECharts 首先,从NuGet管理中添加ECharts包,然后就可以调用绘制图表啦! 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入 ...

DoKey713
2018/11/26
0
0
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
2018/06/26
0
0
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
2018/04/16
0
0
pyecharts v0.4.0, 使用 Python 生成 Echarts 图表

pyecharts v0.4.0 发布! 更新日志: EchartsEnvironment 类性增 render_chart_to_file issue#425 新增 pieces 配置项,为 visualMap 组件提供自定义分段标签的功能 新增 tooltip_border_wid...

开源中国首席机器人
2018/03/10
3.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

自建redis笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
18分钟前
2
0
vue+element之多表单验证

方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => { if(valid){ ......

沉迷代码我爱学习
20分钟前
2
0
golang 1.13 errors 包 新函数介绍

引 这次 errors 包算重量级更新。很有更能把以前的一些设计模式给推到。下面聊下用法。 error 装包 以前返回一个错误,想要保存 error 链,还要定义结构体保存以前的 error 信息。感兴趣看下...

guonaihong
29分钟前
50
0
并发编程之线程池

一、线程池 1、什么是线程池 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序 都可以使用线程池。在开发过程中,合理地使用线程池能够带来3个好处。 第一:降...

codeobj
32分钟前
4
0
知识点总结思维导图模板分享,良心安利,建议收藏

思维导图经常被用在学习中,对大脑思维进行发散,对知识进行记忆。使用思维导图可以让知识更加简单更有层次。下面是利用思维导图所绘制的几款知识点总结思维导图模板,大家可以进行进行参考使...

干货趣分享
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部