javascript - 有三个按钮，点击不同的按钮出现不同的图表，当我打开页面的时候，默认出现第一个按钮点击时出现的图表，怎么样才能实现这个功能啦？

问题描述

问 题

当我从上一级路由跳转到如下这个页面的时候，默认让今日这个图表显示，而打开这个页面的时候却没有正常显示，现在我必须要点击才能实现图表：

结构：
<div class="btn-group">

                        <button type="button" class="btn btn-default active" onclick="btnClick(this)"  ng-click="load(1)">今日</button>
                        <button type="button" class="btn btn-default" onclick="btnClick(this)"  ng-click="load(2)">昨日</button>
                        <button type="button" class="btn btn-default" onclick="btnClick(this)" ng-click="load(3)">本月</button>
                    </div>

JS：

app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {

    // $scope.load=function (num) {
    //     $scope.index=num;
    // }
    $scope.load = function (type) {
        // console.log((type),1);
        // $scope.index=type;
        $http.get('./page_view/data' + type + '.json')
            .success(function (res) {
                console.log((res),2);
                $scope.option = formatData(res);
            });
         }
  }]);
function formatData(data) {
    console.log((data.dataOne),3);
    return {
        //... 拼装需要的option数据
        title: {
            text: '折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['总访问量', '会话量']
        },
        grid: {
            left: '1%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00点', '01点', '02点', '03点', '04点', '05点', '06点', '07点', '08点', '09点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点']
        },
        yAxis: [{
            type: 'value',
            boundaryGap: false,
            splitNumber: 6,
            scale: true,

// 控制y轴线是否显示

            axisLine: {show: false},

// 控制网格线是否显示

            splitLine: {
                show: true
            },

// 去除y轴上的刻度线

            axisTick: {
                show: false
            }
        }],
        series: [{
            name: '总访问量',
            type: 'line',
            stack: '总量',
            data: data.dataOne
        },
            {
                name: '会话量',
                type: 'line',
                stack: '总量',
                data: data.dataTwo
            }]
    };
}

// echarts （来源统计）
app.directive('echartSource', [function () {
    return {
        restrict: 'AE',
        scope: {
            echartSource: '='
        },
        link: link
    };

    function link(scope, element, attr) {
        var my_Chart = echarts.init(element[0]);

        // 双向传值
        scope.$watch('echartSource', function (n, o) {
            if (n === o || !n) return;
            my_Chart.setOption(n);
        });

        //当浏览器窗口发生变化的时候调用div的resize方法
        window.addEventListener('resize', chartResize);

        scope.$on('$destory', function () {
            window.removeEventListener('resize', chartResize);
        })

        function chartResize() {
            my_Chart.resize();
        }
    }
}]);

})(angular)

解决方案

进入这个页面之后，默认执行一次$scope.load(1)方法就可以了。还有html里如果用了angular就不用加onclick方法了。

这篇关于javascript - 有三个按钮，点击不同的按钮出现不同的图表，当我打开页面的时候，默认出现第一个按钮点击时出现的图表，怎么样才能实现这个功能啦？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！