echart使用angularjs发送请求

需要做一个漏斗图，直接套用echart的模板，就可以实现

http://echarts.baidu.com/examples.html#chart-type-funnel

（图片来自官网）

漏斗图效果如上。配置参数如下：

option = {
    title: {
        text: '漏斗图',subtext: '纯属虚构'
    },tooltip: {
        trigger: 'item',formatter: "{a} <br/>{b} : {c}%"
    },toolbox: {
        feature: {
            dataView: {readOnly: false},restore: {},saveAsImage: {}
        }
    },legend: {
        data: ['展现','点击','访问','咨询','订单']
    },calculable: true,series: [
        {
            name:'漏斗图',type:'funnel',left: '10%',top: 60,//x2: 80,bottom: 60,width: '80%',// height: {totalHeight} - y - y2,min: 0,max: 100,minSize: '0%',maxSize: '100%',sort: 'descending',gap: 2,label: {
                normal: {
                    show: true,position: 'inside'
                },emphasis: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },labelLine: {
                normal: {
                    length: 10,lineStyle: {
                        width: 1,type: 'solid'
                    }
                }
            },itemStyle: {
                normal: {
                    borderColor: '#fff',borderWidth: 1
                }
            },data: [
                {value: 60,name: '访问'},{value: 40,name: '咨询'},{value: 20,name: '订单'},{value: 80,name: '点击'},{value: 100,name: '展现'}
            ]
        }
    ]
};

红色data部分的数据就是我们需要获取的。

----------------------------------------------------------------------------------------------------------------

html引入

<div ng-app='app' ng-controller='myctrl'>
<div id="container" style="height: 450px"></div>
</div>

app.controller('myctrl',function ($scope,$http,$q) {

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        "title": {
            "text": "n漏斗图","left": "center"
        },"tooltip": {
            "trigger": "item","formatter": "{a} <br/>{b} : {c}%"
        },"legend": {
            "bottom": 10,"left": 10,"orient": "vertical","data": [
                "展现","点击","访问","咨询","订单"
            ]
        },"series": [
            {
                "name": "漏斗图","type": "funnel","left": "20%","top": 80,"bottom": 20,"width": "60%","min": 0,"max": 100,"minSize": "0%","maxSize": "100%","sort": "descending","gap": 2,"label": {
                    "normal": {
                        "show": true,"position": "inside"
                    },"emphasis": {
                        "textStyle": {
                            "fontSize": 20
                        }
                    }
                },"labelLine": {
                    "normal": {
                        "length": 10,"lineStyle": {
                            "width": 1,"type": "solid"
                        }
                    }
                },"itemStyle": {
                    "normal": {
                        "borderColor": "#fff","borderWidth": 1
                    }
                },"data": ""
            }
        ]
    };

    //加载数据
    loadData(option).then(function (data) {

        if(data){
            option.series[0].data = data; //赋值
        }
        console.log(option.toString())
        if (option && typeof option === "object") {
            myChart.setOption(option,true);
        }
    })
   //请求后台
    function loadData(option) {
        var deferred = $q.defer();
        $http({
            method: 'GET',async : false,url: '/getData'
        }) .success(function(data) {
            deferred.resolve(data);
        })
            .error(function() {
                deferred.reject('Error get tags');
            });

        return deferred.promise;

    }

})

ok，到此就出来了

echart的参数配置具体可见官网

http://echarts.baidu.com/option.html

参考：

http://www.cnblogs.com/michaeljunlove/p/3870193.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!