#echarts 学习之路

###学习思路

初识echarts
编写自己的echarts图表
编写工作中需求的echarts图表

####初识echarts

实例
1. 入门教程
2. 主要实例分析（折线为主，柱状次之，其他辅助）
3. 主题学习
文档
1. 简介
2. 名词解释
3. 图表类型
4. 引入ECharts
5. 自定义构建echarts单文件
6. 初始化
7. 实例方法
8. 选项
9. 图数据表示
10. 多级控制设计
知识点总结 ######添加多条图例多条数据

/**
* 添加多个图例，多条数据便可实现
*/
 legend: {
   data:['进口量','出口量']//多条数据
         }
  {
   "name":"进口量",
   "type":"bar",
   "data":[5, 20, 40, 10, 10, 20]//X轴对应的数值
    },
    {
   "name":"出口量",
    "type":"bar",
   "data":[50, 120, 10, 70, 40, 62]
                        }

参考页面 morelegend.html ######添加平均值，最大值最小值

/**
* 添加平均值，最大值最小值
*/
//最大值与最小值
  markPoint : {
  data : [
     {type : 'max', name: '最大值'},
     {type : 'min', name: '最小值'}
         ]
      },
//平均值
     markLine : {
     data : [
     {type : 'average', name: '平均值'}
            ]
     }

参考页面 average.html

######折线与柱状图混合

/**
* 折线与柱状图混合
*/
 yAxis : [
 {
type : 'value'
  },
   //第二个纵轴坐标
   {
    type : 'value',
    name:'%'
   }
   ],
   //设置数据
   series : [
   {
  "name":"今年国内生产总值",
  "type":"bar",
  "data":[5, 20, 40, 10, 10, 20]//X轴对应的数值
},
   {
   "name":"去年比例",
   "type":"line",
    //结合
    yAxisIndex: 1,//Y轴第二坐标的索引
    "data":[50, 80, 10, 70, 40, 62]//X轴对应的数值
    }
	    ]

参考页面 linebar.html

######响应式

/**
* 需结合jquery
*/
$(window).resize(function () {
 myChart.resize(option);
  });

####编写自己的echarts图表

要制作属于自己的图表首先一点就要应用到Ajax技术，因为每个图表中都有数据，而利用Ajax可以将数据与表现想分离，使工作进行模块化，便于协作开发。

根据option可知有三项数据可变分别如下

 legend: { data:['销量,产量']},
  xAxis : [{type : 'category',//种类
  data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]],
  series : [{
         "name":"销量",
          "type":"bar",
          "data":[5, 20, 40, 10, 10, 20]
          }，
		  {
         "name":"产量",
          "type":"bar",
          "data":[5, 80, 50, 20, 10, 20]
          }
]

所涉及的知识点

Ajax技术（可以去官网了解）
Json数据格式
eval()如何使用
each()如何使用

#####eval()如何使用？ 1.了解eval()方法参考 eval()基础使用。 2.使用eval()来解析数据。

#####each()如何使用？请参考 each()方法的使用

了解上述知识点开始实现一个自己的图表

1.一组json数据

{
"name":["销量","产量"],
"data":[
        [5, 20, 40, 10, 10, 20],
        [50, 80, 20, 15, 20, 24]
        ],
"xlist":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

2.运用Ajax获取数据。

var sql='json/data.json';
      var request = $.ajax({
          url: sql,
          type: "get",
		  dataType:"json",
          cache: false
          });
     request.done(function(data) {
          //获取数据后续操作
     });

3.将数据与配置项相结合

var series = eval(data);
//配置的名字等于由ajax获取的名字，坐标为获取的坐标
config.legend.data=series.name;
config.xAxis[0].data=series.xlist;
//设置数据
//根据每一个图例生成各组数据(**即一个图例的索引对应相应数据的索引)                   

$(series.name).each(function(index,value){
    var everyData=series.data[index];
    config.series.push(template(value,everyData));});
//生成图表
myChart.setOption(config);

参考页面 ajacecharts.html

####编写工作中需求的echarts图表

大家已经能够用ajax生成图表，但考虑到大量图表的问题，这就迫使我们不得不对其进行规划。 #####整体结构的规划 1.将javascript从html中剔除，在body中添加data-chart属性。 2.根据不同的data-chart值加载不同的javascript代码。

require.config({
    paths: {
    echarts: 'echarts-2.1.8/build/dist',
    jquery:'js/jquery-1.7.2.min'
    }
    //用paths来映射配置项echarts-2.1.8/build/dist 用echarts代替
    });
//获取body标签
var bodyElem = document.getElementsByTagName("body")[0];
//获取bodyElem属性data-chart的值
var chartName = bodyElem.getAttribute('data-chart');
//根据不同的值加载不同的javascript
require(['js/'+chartName]);

3.根据data-chart值命名javascript页面。

参考页面 ajax.html

#####根据不同需求设计不同方法在data-chart值的对应的javascript页面进行调用，根据时间和选择内容的多少主要分为以下4大需求。

简要介绍以下几个专属名词 1.时间段（1997-2012） 2.时间点（1997） 3.单选（选择单一项，如复选框中只选择一个选项） 4.多选（选择多项，如复选框中选择多个选项）

#####思路分析：用插件的方式封装方法进行调用。

ugo5/echarts-learn

#echarts 学习之路

###学习思路