angular中怎么使用echarts

末蓝、 2022-09-26 15:58 148阅读 0赞

这是我第一写angular项目的时候写的文档现在重新整理一下分享出来

首先我们我们要有一个容器

说明一下 e-chart表示自定义指令 e-data是我们要显示的数据（如下图中的$scope.option1）

e-data中的数据可以直接参考echarts官网的写法

这段数据是我在echarts官网找的

$scope.option1= {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }

这里就是创建自定指令

directive('eChart', ['$window',function($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);//设置数据到eChart中
                            window.addEventListener("resize", function () {
                                myChart.resize();//重绘
                            });
                        }
                    }, true);
                    $scope.getDom = function() {
                        return {
                            'height': element[0].offsetHeight,
                            'width': element[0].offsetWidth
                        };
                    };
                    $scope.$watch($scope.getDom, function() {
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    }, true);
                }
                return {
                    restrict: 'A',
                    link: link
                };
            }]);

不知道现在还有没有参考意义很久没写了（欢迎留言交流）