echarts directive

echarts directive

标签（空格分隔）： echarts angularjs directive

---

文本为简单的echarts图指令，具体配置项可查看官方文档API进行配置。

一、柱状图指令

directive.js

/**
 * ngEchartsLine
 */
'use strict';
angular.module("MetronicApp").directive('ngEchartsLine', function () {
    return {
        template: '<div style="height:400px"></div>',
        restrict: 'E',
        scope: {
            id: "@",
            item: "=",//数据源，每项的数值
            data: "=",//x轴的提示文字，即统计的分类
            text:"@",//主标题
            subtext:"@"//附标题（灰）
        },
        replace: true,
        link: function ($scope, $element, $attrs) {
            var initOptions = function () {
                var dataAxis = $scope.data;
                var data = $scope.item;
                var yMax = 1000;
                var dataShadow = [];
                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }
                return {
                    title: {
                        text: $scope.text,
                        subtext: $scope.subtext
                    },
                    tooltip: {
                        //提示框触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
                        trigger: 'item'
                    },
                    xAxis: {
                        data: dataAxis,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: '#999'
                            },
                            rotate: 40,//倾斜角度
                            interval :0
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                normal: {color: 'rgba(0,0,0,0.05)'}
                            },
                            barGap:'-100%',
                            barCategoryGap:'40%',
                            data: dataShadow
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#83bff6'},
                                            {offset: 0.5, color: '#188df0'},
                                            {offset: 1, color: '#188df0'}
                                        ]
                                    ),
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}'
                                    }
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                            data: data
                        }
                    ]
                };
            };
            var myChart = echarts.init(document.getElementById($scope.id));
            myChart.setOption(initOptions());
            //动态监听数据的变化
            $scope.$watch('data', function (newVal, oldVal) {
                if(angular.equals(newVal,oldVal)){
                    return;
                }
                myChart.setOption(initOptions());
            },true);

            $scope.$watch('item', function (newVal, oldVal) {
                if(angular.equals(newVal,oldVal)){
                    return;
                }
                myChart.setOption(initOptions());
            },true);

        }
    };
});

html:

 <ng-echarts-line
        id="xxxid"
        item="xxxx"
        data="xxxx"
        text="柱状图示例"
        subtext="Zoom">
</ng-echarts-line>

二、饼图指令

directive.js

/**
 * ngEchartsPie
 */
'use strict';
angular.module("MetronicApp").directive('ngEchartsPie', function () {
    return {
        template:"<div style='height: 400px'></div>",
        restrict: 'E',
        scope: {
            id: "@",
            data: "=",//数据源
            text:"@",//主标题
            subtext:"@",//附标题（灰）
            name:"@"//提示框title
        },
        replace: true,
        link: function ($scope, $element, $attrs) {
            var initOptions  =function() {
                $scope.nameList = [];//颜色区划提示文字列表
                for (var index in $scope.data) {
                    $scope.nameList.push($scope.data[index].name);
                }
                return {
                    title : {
                        text: $scope.text,
                        subtext: $scope.subtext,
                        x:'left'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: $scope.nameList//颜色区划方块
                    },
                    series : [
                        {
                            name: $scope.name,
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:$scope.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            };
            var myChart = echarts.init(document.getElementById($scope.id));
            myChart.setOption(initOptions());
            //动态监听数据的变化
            $scope.$watch('data', function (newVal, oldVal) {
                if (angular.equals(newVal,oldVal)) {
                    return;
                }
                myChart.setOption(initOptions());
            },true);
        }
    };
});

html

<ng-echarts-pie
        id="xxxxid"
        data="xxxx"
        text="饼状图示例"
        subtext="Pie"
        name="所占比重">
</ng-echarts-pie>

---

本文图片均来自网络
如有错误多多指正