文档章节

echarts学习

Marlon520
 Marlon520
发布于 2016/12/04 14:26
字数 1659
阅读 39
收藏 1

引入ECharts

1:模块化包引入

只需要配置好packages路径指向src即可

//from echarts example require.config({ packages: [ { name: 'echarts', location: '../../src', main: 'echarts' }, { name: 'zrender', location: '../../../zrender/src', // zrender与echarts在同一级目录 main: 'zrender' } ] });

 

2:模块化单文件引入(推荐)

  • dist(文件夹) : 经过合并、压缩的单文件
    • echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
    • chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
      • line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
      • bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
      • scatter.js : 散点图
      • k.js : K线图
      • pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
      • radar.js : 雷达图
      • map.js : 地图
      • force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
      • chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
      • funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
      • gauge.js : 仪表盘
      • eventRiver.js : 事件河流图
      • treemap.js : 矩阵树图
      • venn.js : 韦恩图
  • source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试

//from echarts example <body> <div id="main" style="height:400px;"></div> /*包含AMD加载器的echarts主文件*/ <script src="./js/echarts.js"></script> <script type="text/javascript">

/*配置require.conifg*/ require.config({ paths: { echarts: './js/dist' } });

/*动态加载使用echarts*/ require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = {}; myChart.setOption(option); } ); </script> </body>

总结:模块化单文件引入ECharts,你需要如下4步:

  1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
  2. 通过script标签引入echarts主文件
  3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
  4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)

3:标签式单文件引入

需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持,如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)

标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如:

echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color')

//from echarts example <body> <div id="main" style="height:400px;"></div> <script src="/js/dist/echarts-all.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = {}; myChart.setOption(option); </script> </body>

可以直接引入的单文件如下:

  • dist/echarts-all.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
  • source/echarts-all.js : 未压缩,全图表,包含world,china以及34个省市级地图数据,可用于调试

初始化

通过require获得echarts接口(或者命名空间)后可实例化图表,echarts接口仅有一个方法init,执行init时传入一个具备大小的dom节点(width、height可被计算得到即可,不一定可见)后即可实例化出图表对象,图表库实现为多实例的

名称 参数 描述
{ECharts}init {dom} dom,
{string | Object =} theme
初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象。如:
var myCharts = echarts.init(document.getElementById('main'), 'macarons');

实例方法

实例指的就是接口init()返回的对象,即上述代码中的“myChart”,非get接口均返回自身self支持链式调用

名称 参数 描述
{self}setOption {Object} option, 
{boolean=}notMerge
万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项默认是合并(merge)的,merge的设计可以让setOption很方便的成为更新任何属性的万能方法,比如你仅需要改title文字,则仅需要:
    setOption({title : {text : '新标题'}}); 
如果不需要,可以通过notMerger参数为true阻止与上次option的合并,如多次setOption间数据改变、长度不一致等的场景。 

2.0.0起支持timeline组件,option中包含timeline(详见timeline)时每一个独立的option应该放置到命名为options的数组内,如myCharts.setOption({
timeline : {...},
options : [
{ // option1
title : {...},
series : [...]
},
{...}, // option2
...
]
});
{Object}getOption {void} 返回内部持有的当前显示option克隆(拷贝)。
{self} setSeries {Array} series, 
{boolean=}notMerge
数据接口,驱动图表生成的数据内容(详见series),效果等同调用 setOption({series : {...}}, notMerge)
{Object}getSeries {void} 返回内部持有的当前显示series克隆(拷贝),效果同 getOption().series
{self} addData 单组数据: 
{number} seriesIdx 
{number | Object}data 
{boolean=} isHead 
{boolean=} dataGrow
{string=}additionData 
多组数据添加: 
{Array} params
动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) » 
seriesIdx 系列索引 
data 增加数据 
isHead 是否队头加入,默认,不指定或false时为队尾插入 
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据 
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow 
多组数据添加时参数为: 
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{self} on {string} eventName, 
{Function}eventListener
事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有: 
-----------------------基础事件----------------------- 
REFRESH(刷新), 
RESTORE(还原), 
RESIZE(显示空间变化), 
CLICK(点击), 
DBLCLICK(双击), 
HOVER(悬浮), 
MOUSEOUT(鼠标离开数据图形), 
---------------------交互逻辑事件-------------------- 
DATA_CHANGED(数据修改,如拖拽重计算), 
DATA_VIEW_CHANGED(数据视图修改), 
MAGIC_TYPE_CHANGED(动态类型切换), 
TIMELINE_CHANGED(时间轴变化), 
DATA_ZOOM(数据区域缩放), 
DATA_RANGE(值域漫游), 
DATA_RANGE_SELECTED(值域开关选择), 
DATA_RANGE_HOVERLINK(值域漫游hover), 
LEGEND_SELECTED(图例开关选择), 
LEGEND_HOVERLINK(图例hover), 
MAP_ROAM(地图漫游), 
MAP_SELECTED(地图选择), 
PIE_SELECTED(饼图选择), 
FORCE_LAYOUT_END(力导向布局结束)

改变柱状图颜色:

series : [ { name:‘蒸发量‘, type:‘bar‘, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘, ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘, ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘ ]; return colorList[params.dataIndex] } } } } ]

© 著作权归作者所有

共有 人打赏支持
Marlon520
粉丝 0
博文 49
码字总数 15035
作品 0
平凉
程序员
Echarts视频教程从入门到实战

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

放风筝好不
04/16
0
0
43.echarts 入门学习

1.效果 2.代码 2.1 注意点: 2.2 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- 1.为ECharts准备一个具备大小(宽高)的Dom --> <div ......

Lucky_Me
2017/09/27
0
0
前端知识 | 浅谈在React中使用echarts

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

海说软件
06/26
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13
Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉
05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
15分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
49分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部