1、AMD规范的加载器——esl.js,这是什么?

  答:关于AMD规范可以参考阮一峰的这篇文章

Javascript模块化编程(二):AMD规范 简单来说,AMD规范就是异步方式加载模块的一种方式,避免因为模块加载过慢而导致浏览器“假死”。

  2、我们先来看一下echart的大概的包: 

  • echarts.js : 经过压缩,包含除地图外的全部图表
  • echarts-original.js : 未压缩,可用于调试,包含除地图外的全部图表
  • echarts-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
  • echarts-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据

  看得出,这种分类非常有意义。

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对象了。

参考网址:http://echarts.baidu.com/doc/start.html

 使用需要一下几步:

一、制作一个图表容器
<div id="main" style="height:400px;"></div>

二、引入echarts.js文件
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

三、配置图表路径
require.config({
    paths:{echarts:".../dist"}
});

四、加载图表js文件
require(["echarts", "echarts/chart/bar"], loadComplete);

五、绘制图表
function loadComplete(ec) {
    var myChart = ec.init(document.getElementById("main"));
    var option = { ... }; // 图表配置信息
    myChart.setOption(option);
}

上代码:

$lineGraph是JSON字符串,

下面案例的格式:

xdatas :X轴数据
title:标题
dataLis:{[data],数据类型}//List<Data>
Data :  list<String> data,String title(数据类型)
</div>
<div class="mod-hd" align="center">
<div class="ibox-content">
<div id="line88" style="height: 400px;width: 95%" align="center"></div>
</div>
$control.setTemplate('order/LineGraph.vm').setParameter('line', $lineGraph).setParameter('type','88')
</div>
</div>
lineGraph.vm :下面的script;
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var lineId="line"+ "$!type";
myChart = ec.init(document.getElementById(lineId));
lineList[$!type] = myChart;
var charJson = '$!line'.replace(new RegExp("&quot;","g"),"\"");
fareGraphLine(charJson, myChart, $!type);

}
);
function BuildLineOption(chartData){
var seriesList = [],lengend = [];
var dataList = chartData.dataList;
var jxdata = chartData.xdatas;
var jtitle = chartData.title;
for(var data in dataList){
lengend.push(dataList[data].title);
var series = {
name : dataList[data].title,
type:'line',
smooth:true,
symbol: 'emptyCircle',
symbolSize : 1,
clickable: true,
// markPoint : {
// data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
// ]
// },
markLine : {
precision: 0,
data : [
{type : 'average', name: '平均值'}
]
}
};
series.data = dataList[data].values;
series.name = dataList[data].title;
seriesList.push(series);
}
var option = {
tooltip : {
trigger: 'axis',
position : [0,0],
position : function(p) {
// 位置回调
// console.log && console.log(p);
return [p[0] + 10, p[1] - 10];
},
formatter: function (params,ticket,callback) {
var res = '' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
setTimeout(function (){
// 异步回调
callback(ticket, res);
}, 600)
return "<b style='color:#00FFFF;'>点击焦点可查看详情</b>";
}
},
grid: {
x: 60,
y: 40,
x2: 60,
y2: 30
},
legend: {
data: lengend, //线条,数据类型轴
selected: {
'是否显示':true
},
},
xAxis : [
{
type : 'category',
boundaryGap : true,
min:"00:00",
max : "23:59",
data : jxdata //X轴数据
}
],
yAxis : [
{
type : 'value',
name : jtitle, //Y轴数据
boundaryGap: [0,0.1]
}
],
calculable : true,
dataZoom : {
show : false,
realtime : true
},
toolbox: {
show : true,
orient: 'vertical',
x: 'left',
y: 'center',
feature : {
//mark : {show: true},
// dataView : {show: true, readOnly: false},
dataZoom : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : seriesList
};
return option;

}

function fareGraphLine(chartData, chartObj, type){
chartObj.clear();
chartData = JSON.parse(chartData);
var option = BuildLineOption(chartData);//开始画图
chartObj.setOption(option);
var ecConfig = require('echarts/config');
if(type!=99){ //99代表线不绑定click
chartObj.on(ecConfig.EVENT.CLICK, function (param){
if (param.type == 'click') {
clickPaintLine(param);//点击事件
}
});
}
}

</script>

线条:aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOcAAAAeCAIAAABYC56mAAAFAUlEQVR4nO2a7U/bRhzH+wdVqjZWaRJv0pWITnuxSATIpm7S1GXzGo1QlpQs4aGtXFTIHrs5wDQiESUs0FGsrZpAyFrLStIaKpU0WQOYQhhsCgS7XrYXrNK8F6eeUj/FSTynlu4jv8iD73d33983v7tLcuToyG4RgTAPR0d2j9R7DAhExSDXIswHci3CfCDXIswHci3CfCDXIswHci3CfCDXIsyH0a7NzVxfcWFJ64mk9ZUVF7ZNzlQageM4m83WIKGxsTGdTkvvJwgiEonIhqJpWukt8K7FYsnn8zzPd3d3i7pTaahxFoPEWIuz611Pf4uzazA09pjnK42gRQeapnEcL20IpwOnUEcdqsNQ1z7wdjHBQTax+A/LHrIsm1hcuzKQ8XdXFITjOJ/Px7Ks6PXh4eF0Oi2rrAgMw1iWVb+ToijQV2trayqV6unpyefzsC/1NJfX4eFqw6uO+YXk6saWIAirG1vzC8kXm9sy2TW9dIBPCYKgKIogCKkC4IY66lA1xrn2115/bjwsSMiNfZvpC2iPo6XG8DwfCAREpVeUZoZhgsGglh71rTH3Upm3OvxSHQRBOP3hx/fTDzXG0aIDwzCdnZ0sy0IrS31WLx1qwSDXbn43wXw6JJsqQRDWBwe2piY1htJSY5TqB6wxwNbxeFylwMCtBc/zOtaY1952HXCPZXXIFw5ef6dDLx2ACGCcSq6tow61YJBrl99sK65mlVz7ZyazfPqNskG0r/5lQ0l3e7KQJInjuI415ifqVkfvFSUdBEFwBS7P3bytHkSjDtPT0y6XS9219dKhRvR3bX55aXMiKroWjr+gkqp/nzz55eWXpK3yy0vS+CRJws2WbLFRWjoBYAEdHR2NxWKyN0izWHWNiU7/KLrO+vHQeFxFiqvhCZf/srRhFTrMzMwkEgkwTtG+Fjo7FAoZoIPu6O/anbnZzMX+Z66+noT1hEqqBEFINlnS/b2ihjtzs9L4JElCZZ1Op9vthk/BUVcpiwDRYUWEaJOnsRQp0Rf8WnS1ve+JTt9Q0WF86od2zCNtWIUOxRJXwVlr3MXqq4PuGLRDWLLb/t58pJSqv5j15Xa7xlCiGpPNZoG+UGjo2tK8NjzdPFTkWnAAp2laWoqgMyqCnKW8+Gcqrv3o0ic35m/qokNRzrXqH2nDdKgRg1y7HiJ2r00ppWp3Mr7xzYjGUCBbcMmzWCyxWCwcDjscDiBfqWtBXotyp2lZQNu9vT2fz1coFMAXESD3IJHwBthdRezt7zs+8Kq4tg3zHGjYl2vRoShxLcMw8XgcPOY4TmUK/7cONWLcN19Ldht79440TweLtysqtCBJFEVBdzIMY7Va4TmslloLDhzRaDQYDEKj65stcpZ67/xFWcue8fRrL7RldSg+61rwRQGO4zRNYxgGHKlUdA3QoRYM/ZWBbrH9cf37w8I+SNJhYf/3a5PaLSuC4ziv1+t2u0GeQM5wHJddBOERreyKBtbBSCQCDs4i60s/BlWM/OfFu46z5x9t70C/bmz91o55biXpKqIp6VB86lpgwdJXwKTUt6oG6FA1Rv+iu3b18+SppmTzyWTzyTunmta/+tLgATwnLN1/cO7C0DGr3TfwxTGr/dyFoXsriisAQkR9/j3D5XLc9nZdun7eSGWy9R6C+UD/+UKYD+RahPlArkWYD+RahPlArkWYD+RahPlArkWYD+RahPn4Dx4sOEKVu/JIAAAAAElFTkSuQmCC" alt="" />

参考:

简单echars说明和使用的更多相关文章

  1. HCharts随笔之简单入门

    此处可以对比我的另一个Echars简单入门 直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  2. SNF快速开发平台MVC-集成了百度开源项目echars

    百度开源项目echars图表样式非常丰富,而且开源免费.非常好.所以在我们框架当中也进行了集成echars完成图表任务. 我们进行了两次封装,利于我们开发使用.我也看到过有些架构师 按echars里的 ...

  3. jquery中的插件EChars的使用

    首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html    下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...

  4. 【造轮子】打造一个简单的万能Excel读写工具

    大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...

  5. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  6. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  7. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  8. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  9. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

随机推荐

  1. C语言-字符串操作函数

    gets(char buffer[]) 从标准输入读取一行, 并去掉换行符, 在字符串末尾增加 '\0' 字符, 写入到缓冲区 成功则返回 buffer 的地址, 出错或者遇到文件结尾则返回空指针, ...

  2. Android内存优化大全(中)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 写在最前: 本文的思路主要借鉴了2014年AnDevCon开发者大会的一个演讲PPT,加上 ...

  3. Vue + Webpack 坑爹锦集

    1.css中的转义符号 “\”  在编译[npm run build]的时候可能不通过.需要删修掉.这种情况可能会出现在svg中,如图

  4. Atitit。sql2016标准化的规划方案 v3 q2a

    Atitit.sql2016标准化的规划方案 v3 q2a 1. Sql标准化的历史3 1.1. Sql92标准4 1.2. Sql99标准4 1.3. SQL:2003为例,它包括以下9个部分 5 ...

  5. VS2013-解决VS2013 4996错误

    由于微软在VS2013中不建议再使用C的传统库函数scanf,strcpy,sprintf等,所以直接使用这些库函数会提示C4996错误,在源文件中添加以下指令就可以避免这个错误提示. )

  6. 如何在Linux下统计高速网络中的流量

    参考: http://www.geekfan.net/5558/ http://blog.jobbole.com/23638/ http://www.csdn.net/article/2014-03- ...

  7. CentOS统的7个运行级别的含义

    原文: http://blog.csdn.net/liansehai/article/details/45370965 CentOS系统有7个运行级别(runlevel) 运行级别就是操作系统当前正在 ...

  8. c++如何new构造函数是protected的对象

    如果确实要new的话,可以继承这个类,然后new派生类,再转换为基类指针

  9. 域名出售(www.shopbao.com)

    www.shopbao.com 前有淘宝,今有商宝. 商宝网站,精彩无限. 因经济原因,忍痛割爱,欲出售该商业域名. 有意者,请联系:18610310405 MAIL: jieisme@163.com

  10. springMVC集成mybatis-paginator实现分页

    mybatis-paginator下载地址:https://github.com/miemiedev/mybatis-paginator 1.引入maven依赖 <dependency> ...