angularJs和echarts結合例項
阿新 • • 發佈:2019-02-05
最近在做圖示展示用到
不多說直接上程式碼了;
<!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>