AngularJS使用Echarts

在项目中用到了AngularJS结合Echarts，不能直接使用Echarts，需用directive指令来操作，记录一下。
代码如下：

angular.module('test')

.directive('line', function() {
    return {
        scope: {
            id: "@",
            legend: "=",
            item: "=",
            data: "="
        },
        restrict: 'E',
        template: '<div style="height:400px;width:598px; "></div>',
        replace: true,
        link: function($scope, element, attrs, controller) {
            myChart = echarts.init(document.getElementById($scope.id),'macarons');
            var option = {
                // 提示框，鼠标悬浮交互时的信息提示
                tooltip: {
                    show: true,
                    trigger: 'item'
                },
                // 图例
                legend: {
                    data: []
                },
                // 横轴坐标轴
                xAxis: [{
                    type: 'category',
                    data: [],
                    boundaryGap : false
                }],
                dataZoom: [{   // 这个dataZoom组件，默认控制x轴。
                    type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                    start: 40,      // 左边在 40% 的位置。
                    end: 100         // 右边在 100% 的位置。
                },
                {   // 这个dataZoom组件，也控制x轴。
                    type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                    start: 40,      // 左边在 40% 的位置。
                    end: 100         // 右边在 100% 的位置。
                }],
                // 纵轴坐标轴
                yAxis: [{
                    type: 'value'
                }],
                // 数据内容数组
                series: function(){
                    var serie=[];
                    return serie;
                }()
            };
            myChart.setOption(option);

            $scope.$watch('data',function(newValue, oldValue, scope){
                if(newValue.length == 0){
                    myChart.clear();
                    var option = {
                    // 提示框，鼠标悬浮交互时的信息提示
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    // 图例
                    legend: {
                    data: []
                    },
                    // 横轴坐标轴
                    xAxis: [{
                        type: 'category',
                        data: [],
                        boundaryGap : false
                    }],
                    dataZoom: [{   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 40,      // 左边在 40% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    },
                    {   // 这个dataZoom组件，也控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                        start: 40,      // 左边在 40% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    }],
                    // 纵轴坐标轴
                    yAxis: [{
                        type: 'value'
                    }],
                    // 数据内容数组
                    series: function(){
                        var serie=[];
                        return serie;
                    }()
                    };
                        myChart.setOption(option);
                }
                var option = {
                // 提示框，鼠标悬浮交互时的信息提示
                tooltip: {
                    show: true,
                    trigger: 'item'
                },
                // 图例
                legend: {
                    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
                    x: 'center',               // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderColor: '#ccc',       // 图例边框颜色
                    borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
                    padding: 30,               // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                    itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                    itemWidth: 20,             // 图例图形宽度
                    itemHeight: 14,            // 图例图形高度
                    textStyle: {
                        color: '#333'          // 图例文字颜色
                    },
                    data: $scope.legend
                },
                // 横轴坐标轴
                xAxis: [{
                    type: 'category',
                    data: $scope.item,
                    boundaryGap : false
                }],
                // 纵轴坐标轴
                yAxis: [{
                    type: 'value'
                }],
                // 数据内容数组
                series: function(){
                    var serie=[];
                    for(var i=0;i<$scope.legend.length;i++){
                        var item = {
                            name : $scope.legend[i],
                            type: 'line',
                            data: $scope.data[i]
                        };
                        serie.push(item);
                    }
                    return serie;
                }()
                };
                myChart.setOption(option);
            }, true);
        }
    };
});

注意事项：
1.

scope: {
        id: "@",
        legend: "=",
        item: "=",
        data: "="
},

@绑定：在子作用域重置属性内容前：父作用域的属性内容修改会使子作用域对应的属性内容也随之修改，子作用域属性内容变化不会影响到父作用域对应的属性内容。在子作用域重置属性内容后：子作用域仍然会根据父作用域变化而变化，但如果将scope属性设为true，则不会随之变化。
=绑定：创建一个父与子作用域可以同时共享的属性，完全共享和同步。
2.

$scope.$watch('data',function(newValue, oldValue, scope){},true)

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化，当为true时，若监控对象是数组，只要某位发生改变，就会调用到，否则无法监听到变化。

3.

myChart.setOption(option，true);

true的作用就是，清空Echarts的数据缓存，避免第二次加入数据的时候，会有一瞬间是错乱的。因为在别的地方做了处理，所以这里没有加true。

html使用：

<line id="charts" legend="legend" item="item" data="data"></line> 

参考： AngularJS自定义Echarts标签 — 折线图Line