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
                     }]
                 });
             });
         }
     };
 });

Angularjs动态加载ECharts(二）

1.问题

2.解决

3.其余代码

HTML

ECharts dircetive整体代码