angular1与echarts关联（onmovemouse出现新图片）
<!DOCTYPE html>
<html lang="en" ng-app="myModel">
<head>
<meta charset="UTF-8">
<title>select</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.2/angular.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
<div style="width:100%;display:flex;">
<div style="width:50%;display:flex;flex-direction:column;" id="left">
</div>
<div style="width:50%;display:flex;flex-direction:column;" id="right">
</div>
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myModel', []);
app.controller('firstCtrl', function ($scope,$compile,$rootScope) {
var array = [0, 0, 0, 0];
angular.element('#left').empty();
for (var j = 0; j < array.length; j++) {
angular.element('#left').append(
$compile(angular.element('<div id="left' + j + '" style="width:100%;height:200px;"> <div>'))(angular.extend($rootScope.$new()))
);
eval('var totalFlowRate' + j + '= echarts.init(document.getElementById("left' + j + '"))');
}
var xAxisData = [];
var yAxisData = [];
for (var i = 100; i > 0; i--) {
xAxisData.push(i + '秒前');
}
for (i = 1; i < 101; i++) {
yAxisData.push(Math.round(Math.random() * 1000));
}
yAxisData.push(Math.round(Math.random() * 1000));
yAxisData.shift();
var fullOption = {
backgroundColor: '#ffffff',
animation: false,
title: {
bottom: '150px',
text: '',
textStyle: {
fontWeight: 'lighter',
fontSize: '14px'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: 50,
right: 15
},
legend: {
/*
data: ['当前流量'],
textStyle: { color: '#66b3ff' } *//*图例(legend)说明文字的颜色
*/
},
xAxis: {
boundaryGap: false,
data: xAxisData,
splitLine: { show: true }/*网格线*/
},
yAxis: {
boundaryGap: false,
splitLine: { show: true }/*网格线*/
},
series: {
/*itemStyle: {normal: {areaStyle: {type: 'default'}}},*/
itemStyle: {
normal: {
lineStyle: {
color: '#92c2ff'/*折线的颜色*/
},
color: '#66b3ff'/*图例(legend)的颜色,不是图例说明文字的颜色*/
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#66b3ff' },
{ offset: 1, color: '#ecf5ff' }
]
)
}
},
symbol: 'none',/*去掉小圆点*/
name: '当前流量',
type: 'line',
data: yAxisData/*,
smooth:true//显示为平滑的曲线*/
}
};
//节流，无bug
var title = ['总流量（kbps）1', '总流量（kbps）2', '总流量（kbps）3', '总流量（kbps）4', '总流量（kbps）5'];
var throttle = function (delay, action) {
var last = 0;
return function () {
var curr = +new Date();
if (curr - last > delay) {
action.apply(this, arguments);
last = curr;
}
};
};
var action = function () {
var index = this.painterRoot.id.replace('left', '');
eval('fullOption' + index).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
for (var j = 10; j < array.length + 11; j++) {
angular.element('#right').append(
$compile(angular.element('<div id="right' + j + '" style="width:100%;height:200px;"> <div>'))(angular.extend($rootScope.$new()))
);
eval('var totalFlowRate' + j + '= echarts.init(document.getElementById("right' + j + '"))');
}
//此处向后台发送请求：开始
$scope.sendserver = function () {
for (var jj = 10; jj < array.length + 11; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj).title.text = title[jj - 10];
eval('fullOption' + jj).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
}
};
$scope.sendserver();
//此处向后台发送请求：结束
/* } */
};
var fn = throttle(200, action);
for (var jj = 0; jj < array.length; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj + '.title.text = title[jj]');
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
eval('totalFlowRate' + jj).getZr().on('mousemove', fn);
eval('totalFlowRate' + jj).getZr().on('mouseout', function () {
var index = this.painterRoot.id.replace('left', '');
eval('fullOption' + index).backgroundColor = '#ffffff';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
/* } */
});
}
/*
//节流，有bug
var title = ['总流量（kbps）1', '总流量（kbps）2', '总流量（kbps）3', '总流量（kbps）4', '总流量（kbps）5'];
var throttle = function (delay, action) {
var last = 0;
return function () {
var curr = +new Date();
if (curr - last > delay) {
action.apply(this, arguments);
last = curr;
}
};
};
var action = function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
var index = this.painterRoot.id.replace('left', '');
if (eval('totalFlowRate' + index).containPixel('grid', pointInPixel)) {
eval('fullOption' + index).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
for (var j = 10; j < array.length + 11; j++) {
angular.element('#right').append(
$compile(angular.element('<div id="right' + j + '" style="width:100%;height:200px;"> <div>'))(angular.extend($rootScope.$new()))
);
eval('var totalFlowRate' + j + '= echarts.init(document.getElementById("right' + j + '"))');
}
//此处向后台发送请求：开始
$scope.sendserver = function () {
for (var jj = 10; jj < array.length + 11; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj).title.text = title[jj - 10];
eval('fullOption' + jj).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
}
};
$scope.sendserver();
//此处向后台发送请求：结束
}
};
var fn = throttle(200, action);
for (var jj = 0; jj < array.length; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj + '.title.text = title[jj]');
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
eval('totalFlowRate' + jj).getZr().on('mousemove', fn);
eval('totalFlowRate' + jj).getZr().on('mouseout', function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
var index = this.painterRoot.id.replace('left', '');
if (!eval('totalFlowRate' + index).containPixel('grid', pointInPixel)) {
eval('fullOption' + index).backgroundColor = '#ffffff';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
}
});
} */
/*
//不节流，有bug
var title = ['总流量（kbps）1', '总流量（kbps）2', '总流量（kbps）3', '总流量（kbps）4', '总流量（kbps）5'];
for (var jj = 0; jj < array.length; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj + '.title.text = title[jj]');
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
eval('totalFlowRate' + jj).getZr().on('mousemove', function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
var index = this.painterRoot.id.replace('left', '');
if (eval('totalFlowRate' + index).containPixel('grid', pointInPixel)) {
eval('fullOption' + index).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
for (var j = 10; j < array.length + 11; j++) {
angular.element('#right').append(
$compile(angular.element('<div id="right' + j + '" style="width:100%;height:200px;"> <div>'))(angular.extend($rootScope.$new()))
);
eval('var totalFlowRate' + j + '= echarts.init(document.getElementById("right' + j + '"))');
}
//此处向后台发送请求：开始
$scope.sendserver = function () {
for (var jj = 10; jj < array.length + 11; jj++) {
eval('var fullOption' + jj + '=angular.copy(fullOption)');
eval('fullOption' + jj).title.text = title[jj - 10];
eval('fullOption' + jj).backgroundColor = '#F6F8FC';
eval('totalFlowRate' + jj).setOption(eval('fullOption' + jj));
}
};
$scope.sendserver();
//此处向后台发送请求：结束
}
});
eval('totalFlowRate' + jj).getZr().on('mouseout', function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
var index = this.painterRoot.id.replace('left', '');
if (!eval('totalFlowRate' + index).containPixel('grid', pointInPixel)) {
eval('fullOption' + index).backgroundColor = '#ffffff';
eval('totalFlowRate' + index).setOption(eval('fullOption' + index));
angular.element('#right').empty();
}
});
} */
});
</script>