Echart的angularjs封裝

ehcart是百度做的數據圖表，基於原生js。接口和配置都寫的很好很易讀，還可以用於商用。

下面正題

用原生js的話，引入echarts.js

無論是圖表的樣式設置，圖表渲染，數據填充都是基於echart對象的option的，官網給出使用方法：

var dom = document.getElementById('intro-chart');
var chart = echarts.init(dom);

chart.setOption({
    backgroundColor: '#08263a',
    title: {
        text: 'ECharts Example',
        textStyle: {
            color: '#b1cfa5',
            fontSize: 18
        },
        left: 'center',
        top: 25
    },
    xAxis: {
        show: false,
        data: ...
    },
    ...
    series: [{
        type: 'bar',
        data: ...,
        itemStyle: {
            normal: {
                barBorderRadius: 5,
                shadowBlur: 10,
                shadowColor: '#111'
            }
        },
        ...
    }]
});

　　使用angular配置其實只要給ng對象綁定$scope里不同圖表的option就行，html像這樣：

<div e-chart e-data="option1"></div>
<div e-chart e-data="option2"></div>
<div e-chart e-data="option3"></div>

　　在對用controller里面聲明一下option，你可以直接去官網復制，這里就只配置一個tooltips：

$scope.option1 = {
        tooltip: {
            trigger: 'axis'
        },
        series: [這里是數據]
    };

　　接下來就是我們的directive

app.directive('eChart', function($http, $window) {
    function link($scope, element, attrs) {
        var myChart = echarts.init(element[0]);
        $scope.$watch(attrs['eData'], function() {
            var option = $scope.$eval(attrs.eData);
            if (angular.isObject(option)) {
                myChart.setOption(option);
            }
        }, true);
        $scope.getDom = function() {
            return {
                'height': element[0].offsetHeight,
                'width': element[0].offsetWidth
            };
        };
        $scope.$watch($scope.getDom, function() {
            // resize echarts圖表
            myChart.resize();
        }, true);
    }
    return {
        restrict: 'A',
        link: link
    };
});

　　先echarts.init(element[0])將圖表初始化在准備好的dom上，

　　繪制圖表直接調用echart的API去setOption，然后就是兩個watch啦，最重要的是$scope.$watch(attrs['eData']，當option里的配置或者數據變化的時候，繪制圖表

　　而$scope.$watch($scope.getDom為了響應式准備的，當dom的width或者height變化的時候調用api里的resize()方法就可以了。

　　當然如果還有其他你的需要，直接寫 watch 或者 watch收集 就可以了