207467人阅读
Chart（1）
ECharts使用心得
上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。
1.&&& 插件的下载
以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。
ECharts下载地址：
ZRender下载地址：
下载之后解压各自的文件目录结构如下：
& & & & & & & & & & & &
2.&&& 插件的引用
首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：
这里有以下几点需要说明：
l& 所有的跟ECharts有关的文件全部都在echarts文件夹下
l& echarts文件夹的内容分为两部分
1)&&&&&& 一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：
2)&&&&&& 另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：
3.&&& 在页面中的具体使用
按照上边的步骤配置过之后，我们就可以在页面中引用了，这里我主要是演示地图控件的使用方式，因为地图的引用跟其他的基本图形的引用不太一样。其他的图形的呈现也会做一个简要的演示。
3.1&&&&&&&&& MapChart
首先在跟2中的echarts文件夹同一个目录（也就是Modules文件夹）下添加一个aspx页或html页，需要注意的是，如果是在aspx页中使用echarts时，需要把要渲染的div放在form标签之外，否则图形是显示不出来的。
3.1.1 在head标签中添加对echarts的引用如下：
&head runat=&server&&
&title&&/title&
&script src=&echarts/esl.js& type=&text/javascript&&&/script&
3.1.2 在body标记中，form标记之外，添加一个div，用来做图表渲染的容器。如下：
&div id=&main&style=&height:500border:1px solid #padding:10&&&/div&
……………
……………
3.1.3 在3.1.3中添加的div标记下，添加如下的js代码段，如下：
&script type=&text/javascript&&
//为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。
这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。
require.config({
echarts:'./echarts/echarts',
'echarts/chart/map':'./echarts/echarts-map'
//动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径
'echarts',
'echarts/chart/map'
function (ec) {
varmyChart=ec.init(document.getElementById('main'));
//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
text:'iphone销¨?量??',
subtext:'纯??属??虚¨?构1',
x:'center'
tooltip: {
trigger:'item'
orient:'vertical',
data: ['iphone3','iphone4','iphone5']
dataRange: {
text: ['高?','低?¨?'],
// 文?本??，ê?默?认¨?为a数?y值??文?本??
calculable:true,
textStyle: {
color:'orange'
toolbox: {
show:true,
orient:'vertical',
x:'right',
y:'center',
feature: {
mark:true,
dataView: { readOnly:false },
restore:true,
saveAsImage:true
name:'iphone3',
type:'map',
mapType:'china',
selectedMode: 'single',
itemStyle: {
normal: { label: { show:true },color:'#ffd700' },// for legend
emphasis: { label: { show:true} }
{ name:'北???京?',value:Math.round(Math.random() *1000) },
{ name:'天?¨?津¨°',value:Math.round(Math.random() *1000) },
{ name:'上??海?ê',value:Math.round(Math.random() *1000) },
{ name:'重?庆¨?',value:Math.round(Math.random() *1000) },
{ name:'河¨(R)北???',value:Math.round(Math.random() *1000) },
{ name:'河¨(R)南?',value:Math.round(Math.random() *1000) },
{ name:'云?南?',value:Math.round(Math.random() *1000) },
{ name:'辽?¨?宁t',value:Math.round(Math.random() *1000) },
{ name:'黑¨?龙?¨?江-',value:Math.round(Math.random() *1000) },
{ name:'湖t南?',value:Math.round(Math.random() *1000) },
{ name:'安?2徽?',value:Math.round(Math.random() *1000) },
{ name:'山??东?',value:Math.round(Math.random() *1000) },
{ name:'新?疆?',value:Math.round(Math.random() *1000) },
{ name:'江-苏?',value:Math.round(Math.random() *1000) },
{ name:'浙?江-',value:Math.round(Math.random() *1000) },
{ name:'江-西??',value:Math.round(Math.random() *1000) },
{ name:'湖t北???',value:Math.round(Math.random() *1000) },
{ name:'广?西??',value:Math.round(Math.random() *1000) },
{ name:'甘¨?肃¨¤',value:Math.round(Math.random() *1000) },
{ name:'山??西??',value:Math.round(Math.random() *1000) },
{ name:'内¨?蒙¨?古?',value:Math.round(Math.random() *1000) },
{ name:'陕??西??',value:Math.round(Math.random() *1000) },
{ name:'吉a林??',value:Math.round(Math.random() *1000) },
{ name:'福?ê建?§',value:Math.round(Math.random() *1000) },
{ name:'贵¨(R)州Y',value:Math.round(Math.random() *1000) },
{ name:'广?东?',value:Math.round(Math.random() *1000) },
{ name:'青¨¤海?ê',value:Math.round(Math.random() *1000) },
{ name:'西??藏?',value:Math.round(Math.random() *1000) },
{ name:'四?川??§',value:Math.round(Math.random() *1000) },
{ name:'宁t夏?',value:Math.round(Math.random() *1000) },
{ name:'海?ê南?',value:Math.round(Math.random() *1000) },
{ name:'台??§湾??',value:Math.round(Math.random() *1000) },
{ name:'香?港?',value:Math.round(Math.random() *1000) },
{ name:'澳??门?',value:Math.round(Math.random() *1000) }
name:'iphone4',
type:'map',
mapType:'china',
selectedMode: 'single',
itemStyle: {
normal: { label: { show:true },color:'#ff8c00' },// for legend
emphasis: { label: { show:true} }
{ name:'北???京?',value:Math.round(Math.random() *1000) },
{ name:'天?¨?津¨°',value:Math.round(Math.random() *1000) },
{ name:'上??海?ê',value:Math.round(Math.random() *1000) },
{ name:'重?庆¨?',value:Math.round(Math.random() *1000) },
{ name:'河¨(R)北???',value:Math.round(Math.random() *1000) },
{ name:'安?2徽?',value:Math.round(Math.random() *1000) },
{ name:'新?疆?',value:Math.round(Math.random() *1000) },
{ name:'浙?江-',value:Math.round(Math.random() *1000) },
{ name:'江-西??',value:Math.round(Math.random() *1000) },
{ name:'山??西??',value:Math.round(Math.random() *1000) },
{ name:'内¨?蒙¨?古?',value:Math.round(Math.random() *1000) },
{ name:'吉a林??',value:Math.round(Math.random() *1000) },
{ name:'福?ê建?§',value:Math.round(Math.random() *1000) },
{ name:'广?东?',value:Math.round(Math.random() *1000) },
{ name:'西??藏?',value:Math.round(Math.random() *1000) },
{ name:'四?川??§',value:Math.round(Math.random() *1000) },
{ name:'宁t夏?',value:Math.round(Math.random() *1000) },
{ name:'香?港?',value:Math.round(Math.random() *1000) },
{ name:'澳??门?',value:Math.round(Math.random() *1000) }
name:'iphone5',
type:'map',
mapType:'china',
selectedMode: 'single',
itemStyle: {
normal: { label: { show:true },color:'#da70d6' },// for legend
emphasis: { label: { show:true} }
{ name:'北???京?',value:Math.round(Math.random() *1000) },
{ name:'天?¨?津¨°',value:Math.round(Math.random() *1000) },
{ name:'上??海?ê',value:Math.round(Math.random() *1000) },
{ name:'广?东?',value:Math.round(Math.random() *1000) },
{ name:'台??§湾??',value:Math.round(Math.random() *1000) },
{ name:'香?港?',value:Math.round(Math.random() *1000) },
{ name:'澳??门?',value:Math.round(Math.random() *1000) }
//以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。
//需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选
varecConfig= require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED,function (param) {
varselected=param.
varmapSeries=option.series[0];
vardata= [];
varlegendData= [];
for (varp=0,len=mapSeries.data. p& p++) {
name=mapSeries.data[p].
mapSeries.data[p].selected=selected[name];
if (selected[name]) {
alert(name); //这里只是简单的做一个事例说明，弹出用户所选的省，如需做其他的扩展，可以在这里边添加相应的操作
myChart.setOption(option);
3.1.4 &完成以上操作之后，效果如下图所示：
3.2 LineChart
除了地图图表之外的其他的图标的使用方式都差不多。事实上其他的图表跟地图图表的区别在于对配置文件的引用。这里只做一个折线图的示例，其它的示例都是一样的。
3.2.1 跟3.1.1一样，引入echarts脚本
3.2.2 跟3.2.2一样，添加渲染图表的div容器
3.2.3 在3.2.2添加的div下添加如下js代码块
&scripttype=&text/javascript&&
require.config({
echarts:'./echarts/echarts',
'echarts/chart/bar':'./echarts/echarts',//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，
其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别
'echarts/chart/line':'./echarts/echarts'
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
function (ec) {
varmyChart=ec.init(document.getElementById('main'));
tooltip: {
trigger:'axis'
data: ['邮(R)¨?件t营(R)a销¨?','联?a盟?广?告?','视?¨(R)频??广?告?','直??接¨(R)访¤?问¨?','搜?索??引°y擎?']
toolbox: {
show:true,
feature: {
mark:true,
dataView: { readOnly:false },
magicType: ['line','bar'],
restore:true,
saveAsImage:true
calculable:true,
type:'category',
boundaryGap:false,
data: ['周¨?一°?','周¨?二t','周¨?三¨y','周¨?四?','周¨?五?','周¨?六?¨?','周¨?日¨?']
type:'value',
splitArea: { show:true }
name:'邮(R)¨?件t营(R)a销¨?',
type:'line',
stack:'总?¨?量??',
data: [120,132,101,134,90,230,210]
name:'联?a盟?广?告?',
type:'line',
stack:'总?¨?量??',
data: [220,182,191,234,290,330,310]
name:'视?¨(R)频??广?告?',
type:'line',
stack:'总?¨?量??',
data: [150,232,201,154,190,330,410]
name:'直??接¨(R)访¤?问¨?',
type:'line',
stack:'总?¨?量??',
data: [320,332,301,334,390,330,320]
name:'搜?索??引°y擎?',
type:'line',
stack:'总?¨?量??',
data: [820,932,901,934,20]
myChart.setOption(option);
&divid=&main1&style=&height:500border:1px solid #padding:10&&&/div&
&scripttype=&text/javascript&&
require.config({
echarts:'./echarts/echarts',
'echarts/chart/bar':'./echarts/echarts',
'echarts/chart/line':'./echarts/echarts'
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
function (ec) {
varmyChart=ec.init(document.getElementById('main1'));
text:'未??来¤??一°?周¨?气?温?变??化??',
subtext:'纯??属??虚¨?构1'
tooltip: {
trigger:'axis'
data: ['最??高?气?温?','最??低?¨?气?温?']
toolbox: {
show:true,
feature: {
mark:true,
dataView: { readOnly:false },
magicType: ['line','bar'],
restore:true,
saveAsImage:true
calculable:true,
type:'category',
boundaryGap:false,
data: ['周¨?一°?','周¨?二t','周¨?三¨y','周¨?四?','周¨?五?','周¨?六?¨?','周¨?日¨?']
type:'value',
axisLabel: {
formatter:'{value} °?C'
splitArea: { show:true }
name:'最??高?气?温?',
type:'line',
itemStyle: {
lineStyle: {
shadowColor:'rgba(0,0,0,0.4)'
data: [11,11,15,13,12,13,10]
name:'最??低?¨?气?温?',
type:'line',
itemStyle: {
lineStyle: {
shadowColor:'rgba(0,0,0,0.4)'
data: [-2,1,2,5,3,2,0]
myChart.setOption(option);
&divid=&main2&style=&height:500border:1px solid #padding:10&&&/div&
&scripttype=&text/javascript&&
require.config({
echarts:'./echarts/echarts',
'echarts/chart/bar':'./echarts/echarts',
'echarts/chart/line':'./echarts/echarts'
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
function (ec) {
varmyChart=ec.init(document.getElementById('main2'));
text:'某3楼?¤盘¨?销¨?售??情¨?况?',
subtext:'纯??属??虚¨?构1'
tooltip: {
trigger:'axis'
data: ['意°a向¨°','预?è购o','成¨?交?']
toolbox: {
show:true,
feature: {
mark:true,
dataView: { readOnly:false },
magicType: ['line','bar'],
restore:true,
saveAsImage:true
calculable:true,
type:'category',
boundaryGap:false,
data: ['周¨?一°?','周¨?二t','周¨?三¨y','周¨?四?','周¨?五?','周¨?六?¨?','周¨?日¨?']
type:'value'
name:'成¨?交?',
type:'line',
smooth:true,
itemStyle: { normal: { areaStyle: { type:'default'}} },
data: [10,12,21,54,260,830,710]
name:'预?è购o',
type:'line',
smooth:true,
itemStyle: { normal: { areaStyle: { type:'default'}} },
data: [30,182,434,791,390,30,10]
name:'意°a向¨°',
type:'line',
smooth:true,
itemStyle: { normal: { areaStyle: { type:'default'}} },
data: [1,234,120,90,20]
myChart.setOption(option);
3.2.4 完成以上操作之后效果图如下：
&&& 好了，今天就总结到这里了，希望能给大家带来一些帮助。这里主要是介绍地图控件的使用，因为其官方文档上关于路径的配置写的很不清楚，所以才会想把这些走的弯路给总结一下。对于其他的图表控件的使用都很简单，大家可以参考官方的文档。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：662686次
积分：4805
积分：4805
排名：第4497名
原创：123篇
评论：241条
(1)(4)(2)(1)(2)(1)(1)(1)(1)(2)(1)(3)(3)(1)(1)(6)(3)(5)(12)(3)(11)(2)(3)(9)(29)(12)(2)(2)(1)查看: 26321|回复: 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, 下载次数: 607)
10:49 上传
　　js中有如下的文件：
23.png (5.9 KB, 下载次数: 706)
10:49 上传
　　其中，src是echarts-2.0.4文件夹下的src文件夹，zrender里面也有一个src文件夹，是zrender-2.0.4文件夹下面的src文件夹。
作者：钱书康
TA的每日心情开心 09:49签到天数: 6 天[LV.2]偶尔看看I
本帖最后由 yetaoaiueo 于
11:09 编辑
感谢分享。
该用户从未签到
AMD规范的加载器——esl.js的公共方法。不明白，能具体说说嘛，谢谢！
该用户从未签到
echarts-2.0.4这个还需要下载安装吗？
Powered by