前端（32）
Echarts（3）
通过require获得echarts接口（或命名空间）后可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的DOM节点后即可实例化出图标对象，图表库实现为多实例的，同一页面可在多个DOM上init出多个图表，同一个DOM上多次init将自动释放已有实例。
init方法：
{ECharts} init
{dom} dom,
{string | Object =} theme
初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象。如：
var myCharts = echarts.init(document.getElementById('main'), 'macarons')； & & & & & & & & & & & & & &&
引入ECharts后的初始化代码如下：
//作为入口
'echarts',
'echarts/chart/pie'
function (ec){
var myChart=ec.init(document.getElementById('main'));
myChart.setOption({........});
//---------------------------------------------------
//非入口或再次使用，图表已被加载注册
require('echarts').init(dom).setOption({......});
myChart.setOption({........});
//如果需要再再一次使用ECharts的图表实例，建议还是保存init返回的图表实例
var myChart=require('echarts').init(dom);
//var myChart=require('echarts').init(document.getElementById('main'));
mychart.setOption({......});
/******************不习惯模块化的话,把echarts加载后保存起来作为命名空间使用***************/
require(['echarts'],function (ec){
实例方法：
实例指的就是接口init（）返回的对象，即myChart，非get接口均返回自身self，支持链式调用。
{self} setOption
{Object} option,
{boolean=} notMerge
万能接口，配置图表实例任何可配置选项（详见），多次调用时option选项默认是合并（merge）的，merge的设计可以让setOption很方便的成为更新任何属性的万能方法，比如你仅需要改title文字，则仅需要：
&&&&setOption({title : {text : '新标题'}});
如果不需要，可以通过notMerger参数为true阻止与上次option的合并，如多次setOption间数据改变、长度不一致等的场景。
2.0.0起支持timeline组件，option中包含timeline（详见）时每一个独立的option应该放置到命名为options的数组内，如
myCharts.setOption({
timeline : {...},
options : [
// option1
title : {...},
series : [...]
// option2
{Object} getOption
返回内部持有的当前显示option克隆（拷贝）。
{self} setSeries
{Array} series,
{boolean=} notMerge
数据接口，驱动图表生成的数据内容（详见），效果等同调用 setOption({series : {...}}, notMerge)
{Object} getSeries
返回内部持有的当前显示series克隆（拷贝），效果同 getOption().series
{self} addData
单组数据：
{number} seriesIdx
{number | Object} data
{boolean=} isHead
{boolean=} dataGrow
{string=} additionData
多组数据添加：
{Array} params
动态数据接口，
seriesIdx 系列索引
data 增加数据
isHead 是否队头加入，默认，不指定或false时为队尾插入
dataGrow 是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据
additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和dataGrow
多组数据添加时参数为：
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{self} addMarkPoint
{number} seriesIdx
{Object} markData
新增标注接口，其中
seriesIdx 系列索引
markData [标注]对象，同，支持多个
{self} addMarkLine
{number} seriesIdx
{Object} markData
新增标线接口，其中
seriesIdx 系列索引
markData [标线]对象，同，支持多个
{self} delMarkPoint
{number} seriesIdx
{string} markName
删除单个标注接口，其中
seriesIdx 系列索引
markName [标注]名称
{self} delMarkLine
{number} seriesIdx
{string} markName
删除单个标线接口，其中
seriesIdx 系列索引
markName [标线]名称，已构建的标线名称默认为markLine数据中起始点的name，如果同时终点也有name属性，如地图标线，则标线名称等于“nameStart & nameEnd”，如markLine的data为
[{name:'北京', value:100}, {name:'上海'}]
则删除该标线时传入的markName为 &北京 & 上海&
{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（力导向布局结束）
{string} eventName,
{Function} eventListener
事件解绑定
{self} setTheme
{string | Object} theme
设置主题，内置主题（'macarons', 'infographic'）直接传入名称，自定义扩展主题可传入主题对象
{self} connect
{ECharts | Array &ECharts&} connectTarget
多图联动，传入联动目标为EChart实例，支持数组。多图联动支持直角系下tooltip联动，保存图片的自动拼接，同时支持的联动事件有：
REFRESH，RESTORE，MAGIC_TYPE_CHANGED
DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED
{self} disConnect
{ECharts | Array &ECharts&} connectTarget
解除已连结的多图联动
{self} showLoading
{Object} loadingOption
过渡控制（详见），显示loading（读取中）
{self} hideLoading
过渡控制，隐藏loading（读取中）
{ZRender} getZrender
获取当前图表所用ZRender实例，可用于添加额外图形或进行深度定制，zrender接口详见
{string} getDataURL
{string=} imgType
获取当前图表的Base64图片dataURL，IE8-不支持，imgType 图片类型，支持png|jpeg，默认为png
{Dom} getImage
{string=} imgType
获取一个当前图表的img，imgType 图片类型，支持png|jpeg，默认为png
{self} resize
ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，使用方可以根据自己的需求绑定关心的事件，主动调用resize达到自适应的效果，常见如window.onresize = myChart.resize。
{self} refresh
刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
{self} restore
还原图表，各种状态均被清除，还原为最初展现时的状态。
{self} clear
清空绘画内容，清空后实例可用
{void} dispose
释放图表实例，释放后实例不再可用&
{color} backgroundColor
全图默认背景，（详见），支持rgba，默认为无，透明
{Array} color
数值系列的颜色列表，（详见），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{boolean} renderAsImage
非IE8-支持渲染为图片，（详见）
{boolean} calculable
是否启用拖拽重计算特性，默认关闭，（详见，相关的还有
， ， ， ）
{boolean} animation
是否开启动画，默认开启，（详见 ，相关的还有 ， ， ， ， ）
{Object} timeline
时间轴（详见），每个图表最多仅有一个时间轴控件
{Object} title
标题（详见），每个图表最多仅有一个标题控件
{Object} toolbox
工具箱（详见），每个图表最多仅有一个工具箱
{Object} tooltip
提示框（详见），鼠标悬浮交互时的信息提示
{Object} legend
图例（详见），每个图表最多仅有一个图例，混搭图表共享
{Object} dataRange
值域选择（详见）,值域范围
{Object} dataZoom
数据区域缩放（详见）,数据展现范围选择
{Object} roamController
漫游缩放组件（详见）,搭配地图使用
{Object} grid
直角坐标系内绘图网格（详见）
{Array | Object} xAxis
直角坐标系中横轴数组（详见），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array | Object} yAxis
直角坐标系中纵轴数组（详见），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series
驱动图表生成的数据内容（详见），数组中每一项代表一个系列的特殊选项及数据
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：37967次
积分：2003
积分：2003
排名：第13751名
原创：147篇
转载：71篇
译文：11篇
(1)(9)(3)(25)(35)(20)(17)(12)(11)(22)(9)(20)(24)(18)(1)(1)Posts - 35,
Articles - 0,
Comments - 14
打不死的小小白~
18:20 by 半梦半醒。, ... 阅读,
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="barMain" style="height:400px"&&/div&
&div id="lineMain" style="height:400px"&&/div&
&!-- ECharts单文件引入 --&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
　　paths: {
　　　　echarts: '/build/dist'
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
function drawEcharts(ec){
　　drawBar(ec);
　　drawLine(ec);
function drawBar(ec){
　　var myBarChart = ec.init(document.getElementById('barMain'));
　　var option = {
　　　　tooltip: {
　　　　show: true
　　legend: {
　　　　data:['销量']
　　xAxis : [
　　　　　　type : 'category',
　　　　　　data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
　　yAxis : [
　　　　　　type : 'value'
　　series : [
　　　　　　"name":"销量",
　　　　　　"type":"bar",
　　　　　　"data":[5, 20, 40, 10, 10, 20]
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
function drawLine(ec){
　　var myLineChart = ec.init(document.getElementById('lineMain'));
　　var option2 = {
　　　　title : {
　　　　text: '未来一周气温变化',
　　　　subtext: '纯属虚构'
　　tooltip : {
　　　　trigger: 'axis'
　　legend: {
　　　　data:['最高气温','最低气温']
　　toolbox: {
　　　　show : true,
　　　　feature : {
　　　　　　mark : {show: true},
　　　　　　dataView : {show: true, readOnly: false},
　　　　　　magicType : {show: true, type: ['line', 'bar']},
　　　　　　restore : {show: true},
　　　　　　saveAsImage : {show: true}
　　calculable : true,
　　xAxis : [
　　　　　　type : 'category',
　　　　　　boundaryGap : false,
　　　　　　data : ['周一','周二','周三','周四','周五','周六','周日']
　　yAxis : [
　　　　　　type : 'value',
　　　　　　axisLabel : {
　　　　　　　　formatter: '{value} &C'
　　　　　　}
　　series : [
　　　　　　name:'最高气温',
　　　　　　type:'line',
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'max', name: '最大值'},
　　　　　　　　　　{type : 'min', name: '最小值'}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name: '平均值'}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　　　name:'最低气温',
　　　　　　type:'line',
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name : '平均值'}
　　　　　　　　]
　　　　　　}
myLineChart.setOption(option2,true);
补充：给图表绑定事件（以上面柱状图为例，绑定click事件）
　/* 给柱状图绑定click事件 */
　　var ecConfig = require('echarts/config');
　　function eConsole(param) {
　　　　alert(param.value); 　　 // 弹出当前柱子的数值
　　myBarChart.on(ecConfig.EVENT.CLICK, eConsole);
这段代码加在&myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并，这行代码上面。
-----------------------------------------------------------------------------------------------------------------------------------------------史上最强大的js图表库——ECharts带你入门(转) - ct - 博客园
PS：之前的那篇博客 ，评论中， 和
两位仁兄让我试试 ECharts ,去主页看到《》简单了解了一下之后，ECharts很快吸引了我。里面引自马云的那句话&互联网还没有搞清楚的时候，移动互联网来了，移动互联没有搞清楚的时候，大数据来了&我是第一次听到，实在震撼了我啊（孤陋寡闻...）。　
　　本来没打算写什么的。可是作为一个后端开发者，看了半天文档也迷迷糊糊，查了一堆资料也没搞懂Echarts那3个导入方法究竟是什么！我真是怒了！就有了下文。
（我相信本文对很多想要做图表的非前端开发者是有用的。不怪百度，就怪自己没有js项目经验。）
　　这个开源的图标库来自百度数据可视化团队。Highcharts 与之比起来简直不能看啊，人家做一个图表都开始往大数据方面思考了，你还在做功能，这产品差距就不是一个数量级的。 这里就不多废话：
　　Echarts 首页：
　　特性：
　　不贴地址了，想要了解的看一下特性就好了，想要入门的继续往下看。
　　ECharts 底层依赖于 Html5 的轻量级的Canvas类库 ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，
　　初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：
　　1、AMD规范的加载器&&esl.js，这是什么？
　　答：关于AMD规范可以参考阮一峰的这篇文章 简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器&假死&。
　　2、我们先来看一下echart的大概的包：　
echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
&　　看得出，这种分类非常有意义。
　　3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。
　　关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？
　　答：AMD规范的加载器&&esl.js的公共方法。（如有错误，请指正。）
　　4、require.config的作用是什么？
　　答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。
　　5、解释一下require方法？
　　答：require方法有2个参数。
　　第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！
　　第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。
　　OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种&&标签式单文件引入和模块化单文件引入）
　　因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。
　　6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：
　　（1）、标签式单文件引入.html：　　
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="height:400px"&&/div&
&!-- ECharts单文件引入 --&
&script src="js/echarts.js"&&/script&
&script type="text/javascript"&
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
data:['销量']
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
type : 'value'
series : [
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
// 为echarts对象加载数据
myChart.setOption(option);
&　　需要注意的是，可以直接引入的单文件只有：
echarts-plain.js : 经过压缩，包含除地图外的全部图表
echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
　　而除了这些带&plain&字眼的库，其他库都是含echarts这个变量的。导入其他库，会出现问题：echarts未定义。
　　（2）、模块化包引入.html，这个就需要用到2个src文件。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!--从当前页面，引入模块加载器esl.js--&
&script src="js/esl.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="height:400px"&&/div&
&script type="text/javascript"&
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
require.config({
packages: [
name: 'echarts',
location: 'js/src',
main: 'echarts'
name: 'zrender',
location: 'js/zrender/src',
main: 'zrender'
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
data:['销量']
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
type : 'value'
series : [
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
// 为echarts对象加载数据
myChart.setOption(option);
　　（3）、模块化单文件引入.html
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!--从当前页面，引入模块加载器esl.js--&
&script src="js/esl.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="height:400px"&&/div&
&script type="text/javascript"&
// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
require.config({
'echarts' : './js/echarts',
'echarts/chart/bar' : './js/echarts'
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
data:['销量']
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
type : 'value'
series : [
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
// 为echarts对象加载数据
myChart.setOption(option);
　　2、如果上面的还有不明白的，参考一下我的本地目录：
　　js中有如下的文件：
　　其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。
&　　最后吐槽一句：Echarts的这个文档做的真是太粗略了，实在是朦朦胧胧，含糊不清。跟Highcharts之类的比起来差远了。想要详细了解各种特性，多看实例吧。。。
　　附上文实例下载链接：
&　　转载请注明出处： 谢谢！查看: 21741|回复: 3
js图表库——ECharts带你入门
该用户从未签到
　　这个开源的图标库来自百度EFE数据可视化团队。Highcharts 与之比起来简直不能看啊，人家做一个图表都开始往大数据方面思考了，你还在做功能，这产品差距就不是一个数量级的。 这里就不多废话：
　　Echarts 首页：
　　特性：
　　不贴地址了，想要了解的看一下特性就好了，想要入门的继续往下看。
　　ECharts 底层依赖于 Html5 的轻量级的Canvas类库ZRender ，这也是它的效果这么绚丽的原因。它与 js charts类似，不依赖其他 js 类库，相比之下 Highcharts还要依赖JQuery等类库。不过，ECharts也不是什么缺点都没有的，在线演示平台、文档，
　　初学者可能会被ECharts那个带你入门的那2个示例弄晕，这里来一个个解释：
　　1、AMD规范的加载器——esl.js，这是什么？
　　答：关于AMD规范可以参考阮一峰的这篇文章Javascript模块化编程（二）：AMD规范 简单来说，AMD规范就是异步方式加载模块的一种方式，避免因为模块加载过慢而导致浏览器“假死”。
　　2、我们先来看一下echart的大概的包：　
oecharts.js : 经过压缩，包含除地图外的全部图表
oecharts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
oecharts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
oecharts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
　　看得出，这种分类非常有意义。
　　3、echarts更规范的一点，那就是模块化加载，需要哪个部分就是用哪个部分。
　　关于Echarts的那个入门图表，我想很多新手跟我一样的迷惑，require和require.config这个两个公共方法到底什么来的？
　　答：AMD规范的加载器——esl.js的公共方法。（如有错误，请指正。）
　　4、require.config的作用是什么？
　　答：为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径。一切尽在echarts-2.0.4文件夹下的src文件夹中。
　　5、解释一下require方法？
　　答：require方法有2个参数。
　　第一个参数为一个数组，数组元素是需要加载的echarts模块，需要哪个就加载哪个。（经本人测试，这个数组传入一个空数组都是可以的 !- -）莫非，传入不正确，会加载全部文件到内存，传入正确就加载部分模块到内存？求大神解答！
　　第二个参数为一个带一个参数的方法：function (ec){}, 这个ec对象就是echarts对象了。
　　OK，基本解释完了。可能初学者看了Eharts入门实例还是不太理解那Echarts3种导入方式的用法。（入门示例只有2种——标签式单文件引入和模块化单文件引入）
　　因为入门实例里，js文件指向的是百度服务器上的资源，而我们一般开发，js资源都是放在本地的。
　　6、来看一下，本地创建3种Echarts导入的例子，下面是那3个示例文件的源码（官网Demo粗略修改而成）：
　　（1）、标签式单文件引入.html：　　
&!DOCTYPE html&
&head&
& & &meta charset=&utf-8&&
& & &title&ECharts&/title&
&/head&
&body&
& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&
& & &div id=&main& style=&height:400px&&&/div&
& & &!-- ECharts单文件引入 --&
& & &script src=&js/echarts.js&&&/script&
& & &script type=&text/javascript&&
& && &&&// 基于准备好的dom，初始化echarts图表
& && &&&var myChart = echarts.init(document.getElementById('main'));
& && &&&
& && &&&var option = {
& && && && &tooltip: {
& && && && && & show: true
& && && && &},
& && && && &legend: {
& && && && && & data:['销量']
& && && && &},
& && && && &xAxis : [
& && && && && & {
& && && && && && &&&type : 'category',
& && && && && && &&&data : [&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&]
& && && && && & }
& && && && &],
& && && && &yAxis : [
& && && && && & {
& && && && && && &&&type : 'value'
& && && && && & }
& && && && &],
& && && && &series : [
& && && && && & {
& && && && && && &&&&name&:&销量&,
& && && && && && &&&&type&:&bar&,
& && && && && && &&&&data&:[5, 20, 40, 10, 10, 20]
& && && && && & }
& && && && &]
& && &&&};
& && &&&// 为echarts对象加载数据
& && &&&myChart.setOption(option);
& & &/script&
&/body&复制代码
　　（2）、模块化包引入.html，这个就需要用到2个src文件。
&!DOCTYPE html&
&head&
& & &meta charset=&utf-8&&
& & &title&ECharts&/title&
& & &!--从当前页面，引入模块加载器esl.js--&
& & &script src=&js/esl.js&&&/script&
&/head&
&body&
& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&
& & &div id=&main& style=&height:400px&&&/div&
& & &script type=&text/javascript&&
& && &&&// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
& && &&&require.config({
& && && && &packages: [
& && && && && & {
& && && && && && &&&name: 'echarts',
& && && && && && &&&location: 'js/src',& && &
& && && && && && &&&main: 'echarts'
& && && && && & },
& && && && && & {
& && && && && && &&&name: 'zrender',
& && && && && && &&&location: 'js/zrender/src',
& && && && && && &&&main: 'zrender'
& && && && && & }
& && && && &]
& && &&&});
& && &&&
& && &&&// 使用
& && &&&require(
& && && && &[
& && && && &],
& && && && &function (ec) {
& && && && && & // 基于准备好的dom，初始化echarts图表
& && && && && & var myChart = ec.init(document.getElementById('main'));
& && && && && &
& && && && && & var option = {
& && && && && && &&&tooltip: {
& && && && && && && && &show: true
& && && && && && &&&},
& && && && && && &&&legend: {
& && && && && && && && &data:['销量']
& && && && && && &&&},
& && && && && && &&&xAxis : [
& && && && && && && && &{
& && && && && && && && && & type : 'category',
& && && && && && && && && & data : [&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&]
& && && && && && && && &}
& && && && && && &&&],
& && && && && && &&&yAxis : [
& && && && && && && && &{
& && && && && && && && && & type : 'value'
& && && && && && && && &}
& && && && && && &&&],
& && && && && && &&&series : [
& && && && && && && && &{
& && && && && && && && && & &name&:&销量&,
& && && && && && && && && & &type&:&bar&,
& && && && && && && && && & &data&:[5, 20, 40, 10, 10, 20]
& && && && && && && && &}
& && && && && && &&&]
& && && && && & };
& && &&&
& && && && && & // 为echarts对象加载数据
& && && && && & myChart.setOption(option);
& && && && &}
& && &&&);
& & &/script&
&/body&复制代码
　　（3）、模块化单文件引入.html
&!DOCTYPE html&
&head&
& & &meta charset=&utf-8&&
& & &title&ECharts&/title&
& & &!--从当前页面，引入模块加载器esl.js--&
& & &script src=&js/esl.js&&&/script&
&/head&
&body&
& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&
& & &div id=&main& style=&height:400px&&&/div&
& & &script type=&text/javascript&&
& && &&&// 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
& && &&&require.config({
& && && && &paths:{
& && && && && & 'echarts' : './js/echarts',
& && && && && & 'echarts/chart/bar' : './js/echarts'
& && && && &}
& && &&&});
& && &&&
& && &&&// 使用
& && &&&require(
& && && && &[
& && && && && & 'echarts',
& && && && && & 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
& && && && &],
& && && && &function (ec) {
& && && && && & // 基于准备好的dom，初始化echarts图表
& && && && && & var myChart = ec.init(document.getElementById('main'));
& && && && && &
& && && && && & var option = {
& && && && && && &&&tooltip: {
& && && && && && && && &show: true
& && && && && && &&&},
& && && && && && &&&legend: {
& && && && && && && && &data:['销量']
& && && && && && &&&},
& && && && && && &&&xAxis : [
& && && && && && && && &{
& && && && && && && && && & type : 'category',
& && && && && && && && && & data : [&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&]
& && && && && && && && &}
& && && && && && &&&],
& && && && && && &&&yAxis : [
& && && && && && && && &{
& && && && && && && && && & type : 'value'
& && && && && && && && &}
& && && && && && &&&],
& && && && && && &&&series : [
& && && && && && && && &{
& && && && && && && && && & &name&:&销量&,
& && && && && && && && && & &type&:&bar&,
& && && && && && && && && & &data&:[5, 20, 40, 10, 10, 20]
& && && && && && && && &}
& && && && && && &&&]
& && && && && & };
& && &&&
& && && && && & // 为echarts对象加载数据
& && && && && & myChart.setOption(option);
& && && && &}
& && &&&);
& & &/script&
&/body&复制代码
　　2、如果上面的还有不明白的，参考一下我的本地目录：
untitled.png (4.14 KB, 下载次数: 567)
10:49 上传
　　js中有如下的文件：
23.png (5.9 KB, 下载次数: 652)
10:49 上传
　　其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。
作者：钱书康
TA的每日心情开心 21:32签到天数: 1 天[LV.1]初来乍到
本帖最后由 yetaoaiueo 于
11:09 编辑
感谢分享。
该用户从未签到
AMD规范的加载器——esl.js的公共方法。不明白，能具体说说嘛，谢谢！
该用户从未签到
echarts-2.0.4这个还需要下载安装吗？
Powered by}