最新ECharts调用笔记资料_第1页
最新ECharts调用笔记资料_第2页
最新ECharts调用笔记资料_第3页
最新ECharts调用笔记资料_第4页
最新ECharts调用笔记资料_第5页
已阅读5页，还剩17页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、精品文档精品文档一、三种方式引入文件1模块化包引入require.c on fig(packages:n ame: 'echarts', locati on: '././src', main: 'echarts',n ame: 'zre nder',location: './././zrender/src', / zrender 与 echarts在同一级目录 main: 'zre nder');注：由于echarts依赖底层zrender，你需要同时下载 zrender到本地 2、模块化单文件引入

2、(推荐)<body><div id="mai n" style="height:4OOpx;"></div><script src="./js/echarts.js"></script><script type="text/javascript">require.c on fig(paths: echarts: './js/dist');require('echarts',别忘'echarts/chart

3、/line', /按需加载所需图表，如需动态类型切换功能,了同时加载相应图表'echarts/chart/bar',fun ctio n (ec) var myChart = ec.i nit(docume nt.getEleme ntByld('mai n');var optio n = myChart.setOpti on( opti on); );</script></body> dist （文件夹）：经过合并、压缩的单文件echarts.js :这是包含 AMD加载器的echarts主文件，需要通过 script最先引入

4、chart （文件夹）：echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型 按需加载require 时还需要 echarts/chart/bar)require 时还需要 echarts/chart/line)require 时还需要 echarts/chart/funnel)echarts-line.js :折线图（如需折柱动态类型切换， echarts-bar.js :柱形图（如需折柱动态类型切换， echarts-scatter.js :散点图echarts-k.

5、js : K 线图echarts-pie.js :饼图（如需饼漏斗图动态类型切换, echarts-radar.js :雷达图echarts-map.js :地图require 时还需要require 时还需要echarts-force.js :力导向布局图（如需力导和弦动态类型切换, echarts/chart/chord)echarts-chord.js :和弦图（如需力导和弦动态类型切换， echarts/chart/force)echarts-fu nn el.js漏斗图（如需饼漏斗图动态类型切换，require 时还需要echarts/chart/pie）echarts-gauge.

6、js :仪表盘echarts-eventRiver.js :事件河流图source （文件夹）：经过合并，但并没有压缩的单文件，内容同 dist，可用于调试注：动态加载 echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句，当你确保同 一页面已经加载过 echarts,再使用时直接 require('echarts').init(dom)就行)3、标签式单文件引入<body><div id="mai n" style="height:400px;"></div><script src=&

7、quot;example/www2/js/dist/echarts-all.js"></script><script>var myChart = echarts.i nit(docume nt.getEleme ntByld('ma in');var opti on = myChart.setOpti on( opti on);</script></body>注：标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如:echarts.c onfig = require('echarts

8、/con fig') ， zren der.tool.color = require('zre nder/tool/color')dist/echarts-all.js :经过压缩，全图表，包含 world， china以及34个省市级地图数据 source/echarts-all.js :未压缩，全图表，包含 world，china以及34个省市级地图数据，可用 于调试二、参数说明1.timeli ne :时间轴，每个图表最多仅有一个时间轴控件controlstyle backgroundcolor borderColor borderWidth padding2Q1

9、M12013-02 201 M3symbol symbolSizecheckpointstylelineStyle label2013-042013-OT2013-04 MU-O? 2413-06201 HO201112.title:标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题textstyle backgroundcolorI paddingitemGap borderColor borderWidthsubtextstyle世界人口总量3. toolbox:工具箱，每个图表最多仅有一个工具箱4. tooltip:提示框，鼠标悬浮交互时的信息提示触发类型：item触发axis

10、触发2012 H H凤賦8RM： 65ege nd:图例，每个图表最多仅有一个图例axisPointer : linestylebackgroundcolorborderColor borderWidthpadding backgrou ndCol borderColor borderWidth borderRadiusitemGap蒸发重 1600 2000 1200-1$00 &00 U00400 ” $00/ 一0-400colorft7.dataZoom:数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表padding障氷重 一最高气温 一

11、最低气溫 一平均温匮上6.dataRa nge:值域选择，每个图表最多仅有一个值域控件backgroundcolor / borderColor borderwidth itemGap$ padding0 1WD 20001500 800- 1200400-8000-400 羸有效backgroundColordata BackgroundColor*7handleColorfillerColor8.roamCo ntroller:缩放漫游组件，仅对地图有效widthbackgroundcolorhandleColorfillerColorooborderColor borderWid hei

12、ghtpadding9.grid:直角坐标系内绘图网格6wiflth / heightx2y2lO.axis:坐标轴有三种类型，类目型、数值型和时间型，他们的区别在于：类目型：需要指定类目列表，坐标轴内有且仅有这些指定类目坐标数值型：需要指定数值区间，不指定时则自定计算数值范围，坐标轴内包含数值区 间内容全部坐标时间型：时间型坐标轴用法同数值型，只是目标处理和格式化显示时会自动转变为 时间，并且随着时间跨度的不同自动切换需要显示的时间粒度11.12.series:数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据三、图表类型说明图表类型图表库标准包含单图表类型的标准图表以及多图表类

13、型混合的混搭图表：单图表类型：折线图（面积图）、柱状图（条砒图）、敵点圈、K线圈L讲图（环、达图（填充达图）、和 Bar I Line I Scatter I K I Pie I Radar I Chord I Force I Ma 柱状图|折壤图|敲点图| K线图.餅图1雷达坯I和弦图I力导布局图I地呂直角坐标系单图表类型：line单图表类型：bar柱形图某地区蒸发量和降水量歎逼 降站 貳 01001月2月3月4月5月&月7月8月§月罚月H月12月单图表类型：scatter单图表类型：kK线图2013年上半年上证指数u) 口 0k/ iikOO2357.862329.762301.662,273.562,245.462,217362189.262,6it 11I I”2r470.02.4J9.82409.62379.42104.962.349.223M.02,285.8225&62,22842.198.22120B/4/320B/4/182013/5/62013/5/172013/5/30单图表类型：pie饼图某站点用户访问来源单图表类型：radar雷达图预算陌开销镉售0O瑁?I分配 < Allocated Budget; 0喜除其?开舸(Actua Spending ) Q单图表类型：force家人期凑人物关萦

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论