<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body >
<body ng-app="app" ng-controller="lineCtrl">
<line id="main" legend="legend" item="item" data="data"></line>
<script type="text/javascript">
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:300px;width:600px;margin-top: 30px;margin-left: 30%;"></div>',
replace:true,
link:function($scope, element, attrs, controller) {
var option = {
//背景颜色
backgroundColor:'#f16651',
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show:true,
trigger:'item' //item:折线图上每一个点，axis:在x轴上某个点上的所以y轴的数据
},
//工具箱
/* toolbox:{
show: true,
x: 'right',
backgroundColor: 'rgba(0,0,0,0)'
},*/
//标题
title:{
text:'一年四季变更折线图',
x:'center',
padding:20,
textStyle :{
fontSize:18,
fontWeight:'bolder',
color:'#2ff'
}
},
// 图例
legend: {
backgroundColor:'#190',
data: $scope.legend
},
// 横轴坐标轴
xAxis: [{
//类目型
type:'category',
name:'月份',
lineStyle:{
color:'#48b',
width:2,
type:'solid'
},
data: $scope.item
}],
// 纵轴坐标轴
yAxis: [{
type:'value',
name:'数值'
}],
// 数据内容数组,驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据，其中个别选项仅在部分图表类型中有效
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("main"));
myChart.setOption(option);
}
};
});
</script>
</body>
</html>
网友评论