简单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; 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>

 线条：

参考：

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