angularJs和echarts结合实例

最新推荐文章于 2024-09-06 10:41:19 发布

_Debug_debug

最新推荐文章于 2024-09-06 10:41:19 发布

阅读量8.7k

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/u010931123/article/details/56680093

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做图标展示用到

不多说直接上代码了；

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body ng-app="app">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div  style="height:400px">
		<div ng-controller="sexChart" style="height:1400px">
			<sexbar id="sexBarcharts" legend="legend"  data="data"></sexbar>
		</div>
	</div>
    <!-- ECharts单文件引入 -->
    <!--<script src="G:/1115zhuomian/3banben/echarts.min.js"></script> -->
	<script src="G:/1115zhuomian/angularJsAndEcharts/angular.js"></script>
<script src="G:/1115zhuomian/angularJsAndEcharts/echarts.js"></script>  
	
    <script type="text/javascript">
       
       var app = angular.module('app', []); 
	   console.log("ceshi输出");


	   app.controller('sexChart', function($scope) {  
    $scope.legend = ["男", "女"];  
   // $scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];  
    $scope.data = [  
        {value:78, name:'男'},{value:56,name:'女'} //Berlin  
    ];  
});  

app.directive('sexbar', function() {  
    return {  
        scope: {  
            id: "@",  
            legend: "=",  
            //item: "=",  
            data: "="  
        },  
        restrict: 'E',  
        template: '<div style="height:400px;"></div>',  
        replace: true,  
        link: function($scope, element, attrs, controller) {
			var a = []; 
            var option = { 
				
				title:{
						text : '性别比例',//标题说明
						x:'center'//居中
					},
                // 提示框，鼠标悬浮交互时的信息提示  

                tooltip: {  
                    show: true,  
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },  
                // 图例  
                legend: {
					 x : 'center',
					 y : 'bottom',
                    data: $scope.legend  
                },  
               
                // 数据内容数组  
                series:	[
				{
							name:'',
							type: 'pie', 
							radius:"55%",
							center:['50%','50%'],
				
				label: { 
		            	 normal: { 
		            		 position: 'inner' //内置文本标签 
		            	 } 
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
				

				data:$scope.data,

				
				 itemStyle : {
										normal: {
											label: {
											show: false
										},
											labelLine: {
												show: false
											}
										} ,
										emphasis: {
											label: {
												show: true,
												position: 'outer'
											},
											labelLine: {
												show: true,
												lineStyle: {
												color: 'red'
												},
												},
											}
									}
				}
				
				]
				  
            };  
            var myChart = echarts.init(document.getElementById($scope.id),'macarons');  
            myChart.setOption(option);  
        }  
    };  
}); 

    </script>
</body>