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

来源：https://www.cnblogs.com/goodbeypeterpan/p/5542389.html

标签

option

angular

element