Echart的angularjs封装

http://www.cnblogs.com/goodbeypeterpan/p/5542389.html

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收集 就可以了