angularjs通过指令方式引用echarts

1. index.html引入

2. directive.js 指令含饼图，柱图，折线图

.directive('pieCharts', function($parse, $interval){'use strict';return {restrict: 'AE',// replace: true,scope: {options: '=',},template: '这是饼图',controller: function ($scope) {},link: function(scope, element, attrs) {let chart = element.find('div')[0];let parent = element[0];//    console.log(parent.clientHeight+":"+parent.clientWidth);chart.style.width = parent.clientWidth + 'px';chart.style.height = parent.clientHeight + 'px';let myChart = echarts.init(element[0], 'walden');window.addEventListener('resize', function () {myChart.resize();//监测图表自适应});scope.$watch('options', function (n, o) {if (typeof (n) === 'object') {myChart.setOption(scope.options);}}, true);}};
}).directive('barCharts', function () {'use strict';return {restrict: 'AE',scope: {// source: '=',options: '=',parentwidth: '='},template: '这是柱图',controller: function ($scope) {},link: function (scope, element, attr) {// console.log(scope.source);let chart = element.find('div')[0];let parent = element[0];//    console.log(parent.clientHeight+":"+parent.clientWidth);if (scope.parentwidth) {parent.style.width = scope.parentwidth;}chart.style.width = parent.clientWidth + 'px';chart.style.height = parent.clientHeight + 'px';let myChart = echarts.init(chart, 'walden');window.addEventListener('resize', function () {myChart.resize();//监测图表自适应});scope.$watch('options', function (n, o) {if (typeof (n) === 'object') {myChart.setOption(scope.options);}}, true);}};
}).directive('lineCharts', function($parse, $interval){'use strict';return {restrict: 'AE',// replace: true,scope: {options: '=',parentwidth: '='},template: '这是折线图',controller: function ($scope) {},link: function(scope, element, attrs) {let chart = element.find('div')[0];let parent = element[0];//    console.log(parent.clientHeight+":"+parent.clientWidth);if (scope.parentwidth) {parent.style.width = scope.parentwidth;}chart.style.width = parent.clientWidth + 'px';chart.style.height = parent.clientHeight + 'px';let myChart = echarts.init(element[0], 'walden');window.addEventListener('resize', function () {myChart.resize();//监测图表自适应});scope.$watch('options', function (n, o) {if (typeof (n) === 'object') {myChart.setOption(scope.options);}}, true);}};
});

3. demo.js 添加配置

monthOptions: {// color: ['#a3d4ff'],tooltip : {trigger: 'axis'},xAxis : [{type : 'category',data: _.map(sourceMonth, item => {return `${item}月`;})}],yAxis : [{type : 'value'}],series : [{name:'按月查看',type:'bar',label: {normal: {formatter: '{c}人',show: true,position: 'top'}},data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']}]
};teamOptions: {title : {text: '当前在场人数:0',x:'center',y: 'bottom'},tooltip : {trigger: 'item',formatter: '{c}人 ({d}%) 
 {b}',confine: true,},minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互avoidLabelOverlap: true,   //是否启用防止标签重叠策略series : [{name: '按班组',type: 'pie',radius: ['25%', '45%'],label: {normal: {// formatter: '{c}人 ({d}%) \n {b}',formatter(v) {console.log(v.value);let name = v.name;let text = v.value + '人(' + v.percent + '%)' + '\n' if (name.length <= 8) {name = name;} else {name = `${name.slice(0, 8)}...`}return text + name;},textStyle: {fontSize: 8}},confine: true},data:[]}]
},options: {// color: ['#2f4554', '#d48265', '#61a0a8'],tooltip: {trigger: 'axis'},legend: {data:['实发总薪资','在线发放薪资', '台账小计薪资'],y: 'bottom'},xAxis: {type: 'category',data:  _.map(sourceMonth, item => {return `${item}月`;})},yAxis: {type: 'value'},series: [{name:'实发总薪资',type:'line',data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']},{name:'在线发放薪资',type:'line',data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']},{name:'台账小计薪资',type:'line',data:['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-']}]
},

4.demo.html 中使用指令可滚动

遇到的问题：
let parent = element[‘context’]; 需要引入jquery 1.x版本可正常显示echarts,但是会导致移动端其他组件的滑动事件失效
改为 let parent = element[0];不需要依赖jquery

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！