环境:Angularjs1.6.5
html代码
<equipment-analysis ng-if="equipdata" id="equipanalysis" equipdata="equipdata"></equipment-analysis>
图表的javascript代码
app.directive('equipmentAnalysis', function() {
return {
scope: {
id: "@",
equipdata: "="
},
restrict: 'E',
template: '<div class="equipment-analysis-charts"></div>',
link: function($scope, element, attrs, controller) {
console.log($scope.equipdata)
var option = {
color: ['#9966FF', '#0099FF'],
// 提示框,鼠标悬浮交互时的信息提示
tooltip: {
show: true,
trigger: 'item'
},
// 图例
legend: {
data: ['在线设备', '活跃设备']
},
// 横轴坐标轴
xAxis: [{
type: 'category',
data: $scope.equipdata.date
}],
// 纵轴坐标轴
yAxis: [{
type: 'value'
}],
// 数据内容数组
series: [{
name: '在线设备',
type: 'line',
data: $scope.equipdata.newEquip
}, {
name: '活跃设备',
type: 'line',
data: $scope.equipdata.activeEquip
}]
};
var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
myChart.setOption(option);
}
};
});
请求数据的javascript代码
$scope.equipdata = {}
$scope.equipdata.newEquip = $scope.newEquip.reverse()
$scope.equipdata.date = $scope.date.reverse()
$scope.equipdata.activeEquip = $scope.activeEquip.reverse()
chrome 下报错没,看看echarts容器的宽高