javascript - 在angular中使用echarts为什么总是报错Cannot use in operator to search for 啦？

问题描述

问 题

一开始以为路径错了，试了很多次，还是出现success is not a function，以下是我的代码：
html:
<div class="chart" echart-source="option"></div>

javascript:

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

    // //默认显示今日页面
    // $scope.init=function () {
    //     $scope.load();
    // };

        console.log($http,899)
        $http.get('json/data.json')
            .then(function (res) {
                console.log((res));
                $scope.option = formatData(res);
                //总访问量假设都放在一个json文件，以下是获取方法
                // $scope.tota =(res.dataThree+"");
            });

}]);
function formatData(data) {
    console.log((data.dataThree),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) {

            my_Chart.setOption(n);
        });

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

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

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

解决方案

在angularjs 1.5(还是1.6?)版本之后，$http就已经没有.success方法了，用.then代替，第一个参数为成功的回调，第二个为失败的

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

具体请点击

需要翻译的话请留言

这篇关于javascript - 在angular中使用echarts为什么总是报错Cannot use in operator to search for 啦？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！