文档章节

echarts学习

Marlon520
 Marlon520
发布于 2016/12/04 14:26
字数 1659
阅读 37
收藏 1
点赞 0
评论 0

引入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
博文 48
码字总数 14803
作品 0
平凉
程序员
Echarts视频教程从入门到实战

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

放风筝好不 ⋅ 04/16 ⋅ 0

Echarts-百度地图省分着色

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

莫显辉 ⋅ 05/04 ⋅ 0

NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw ⋅ 05/14 ⋅ 0

Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木 ⋅ 04/20 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

echarts3.0在IE9中,bar图在使用datazoom时,数据显示不完全的问题

我在swt控件中调用browser,然后用echarts来展现我的数据,IE是IE9,柱状图设置了dataZoom,但是当我拖动dataZoom滑竿时,展现的数据没有全部展现出来,只有当dataZoom覆盖全部时,数据才全部...

kmust123 ⋅ 04/26 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

【前端图表】echarts散点图鼠标划过散点显示信息

在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过...

祈澈姑娘 ⋅ 06/19 ⋅ 0

基于 Vue2.0 和 ECharts 封装的图表组件 - v-charts

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一...

匿名 ⋅ 05/22 ⋅ 5

乱炖“简书交友”数据之代码(1)

上一篇文章乱炖数据之2700余篇“简书交友”专题文章数据的花式玩法发布后,不少人想学习下代码,由于此前不曾在GitHub上开源过,流程还不熟悉,再者本项目中很多尝试性的代码,异常杂乱,因而...

Deserts_X ⋅ 06/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 44分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部