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> 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