Angularjs动态加载ECharts(二）
1.问题
今早操作的时候又有了问题，我需要做的是select下拉框选择时间，然后将对应时间的数据显示到ECharts上
如图所示
图片.png
2.解决
由于ECharts是写在指令里的，所以每次设置controller里的变量时，虽然改变了，但是directive中没有改变。当然数据通过$http请求的，所以要使用ng-if来判断数据是否获取到
所以使用$watch来动态监听
$scope.$watch('data', function(newData, oldData) {
$scope.data = newData
myChart.setOption({
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: $scope.data
}]
});
});3.其余代码
HTML
<bound-equipment ng-if="data" id="boundEquipment" data="data"></bound-equipment>ECharts dircetive整体代码
app.directive('boundDevices', function() {
return {
scope: {
id: "@",
data: "="
},
restrict: 'E',
template: '<div class="bound-devices-charts"></div>',
replace: true,
link: function($scope, element, attrs, controller) {
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1-3台', '4-6台', '7-9台', '10-12台', '12台以上'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: $scope.data
}]
};
var myChart = echarts.init(document.getElementById($scope.id), 'macarons');
myChart.setOption(option);
$scope.$watch('data', function(n, o) {
$scope.data = n
myChart.setOption({
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: $scope.data
}]
});
});
}
};
});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录