angular封装echarts

  echarts的官网推荐了几个基于angular的库，可能只是作者在实际开发中为了完善自己的项目而封装的，api不是那么友好，因为我的项目需要可视化的监控信息，而项目又是基于比较老的angular1.x，所以下面的这几个我只研究了第一个

  当然在项目里也是可以使用，但是因为api又进行了二次封装，很多的属性设置的时候不能直接从官网的api继承而来，使用起来很不方便，所以研究了一上午之后还是放弃了，转而自己封装自定义指令，后来发现其实封装自定义指令的方式更加直观和简单，我这个项目用的是官网common版本作为项目依赖。
  首先是我的页面，因为是演示，所以data和define-option的值暂且不传（.jade）

  接下来是我的echarts-bar.coffee文件，开始考虑过将常用的line,bar,pie，也就是折线图，柱状图和饼图封装成一个指令，但是为了更好的分离，我还是选择了分开封装，这里演示的是柱形图指令的封装

angular.module('zyClient.directives')
.directive('echartsBar', ['$timeout',($timeout)->
  return {
    restrict : 'AE'
    replace : true
    template: '<div id="echartdiv" style="width: 100%; height: 400px;"></div>',
    scope:
      data: '='
      defineOption: '='
    link: ($scope,$element,$attr) ->
      # echartElement = $('#echartdiv')[0]
      echartElement = $($element)[0]
      echartsEle = echarts.init(echartElement)

      option= 
        title: {
          text: 'Echarts'
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]

      echartsEle.setOption(option)
  }
])

  到这一步其实最基本的指令已经封装完成，后续接口有数据的时候将data和defineOption的值传入link函数，根据传入的值去设置指令的option就可以了。