简单echars说明和使用

　官方API：http://echarts.baidu.com/echarts2/doc/doc.htm

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="" />

参考：

http://echarts.baidu.com/demo.html#line-marker