AngularJS自定义Echarts标签 — 折线图Line_angularjs echart line-CSDN博客

本文链接：https://blog.csdn.net/u010870890/article/details/47832417

本文介绍如何在AngularJS中自定义Echarts折线图指令，实现图表的复用。通过创建一个简单的可配置标签，可以方便地在项目中应用。文章提供了必要的文件准备、HTML页面设置及line.js的编码示例，并展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候数据都要用图表的形式来展示，Echarts就是一款开源、功能强大的图表工具，但有些图表只是数据不同，不可能每一个图都单独画一个，所以我就考虑能不能把它封装起来？这使我瞄准了刚接触的AngularJS自定义指令directive，把两者结合一下，就有了一个简单可复用的图表标签了。

这些代码提供出来，大家可以拿来就用，在这里我不会解释的很详细，都是基于有AngualrJS基础和htm基础的，但由于笔者功力不足，大家如果有什么不明白或错误的地方可以回复留言，多多交流交流。

1、准备文件

AngularJS的js文件：angular.js

Echarts的js文件：echarts-all.js

2、html页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>折线图</title>
</head>
<!--加载AngularJS-->
<script src="js/angular/angular.js"></script>
<!--加载ECharts-->
<script src="js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="js/line.js"></script>

<body ng-app="app" ng-controller="lineCtrl">
	<line id="main" legend="legend" item="item" data="data"></line> 
</body>
</html>

3、line.js的编码

var app = angular.module('app', []);

app.controller('lineCtrl', function($scope) {
	$scope.legend = ["Berlin", "London",'New York','Tokyo'];
	$scope.item = ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	$scope.data = [
		[-1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2],	//Berlin
		[0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5],	//London
		[4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3],	//New York
		[7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10]	//Tokyo
	];
});


app.directive('line', function() {
	return {
		scope: {
			id: "@",
			legend: "=",
			item: "=",
			data: "="
		},
		restrict: 'E',
		template: '<div style="height:400px;"></div>',
		replace: true,
		link: function($scope, element, attrs, controller) {
			var option = {
				// 提示框，鼠标悬浮交互时的信息提示
				tooltip: {
					show: true,
					trigger: 'item'
				},
				// 图例
				legend: {
					data: $scope.legend
				},
				// 横轴坐标轴
				xAxis: [{
					type: 'category',
					data: $scope.item
				}],
				// 纵轴坐标轴
				yAxis: [{
					type: 'value'
				}],
				// 数据内容数组
				series: function(){
					var serie=[];
					for(var i=0;i<$scope.legend.length;i++){
						var item = {
							name : $scope.legend[i],
							type: 'line',
							data: $scope.data[i]
						};
						serie.push(item);
					}
					return serie;
				}()
			};
			var myChart = echarts.init(document.getElementById($scope.id),'macarons');
			myChart.setOption(option);
		}
	};
});