echart使用angularjs发送请求

来源：互联网发布：世界杯小组抽签软件编辑：程序博客网时间：2024/06/11 12:57

需要做一个漏斗图，直接套用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>

controller代码如下

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

0 0