一、引入JS文件
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.js"></script>
二、准備一個容器放圖表
<div id="ec1" style="width: 500px;height: 400px;"></div>
三、基於准備好的dom,初始化echarts實例(因為需要的是dom節點,所以要有[0])
var myEc1 = echarts.init($("#ec1")[0]);
四、ajax請求區域分區數據
$.post("${pageContext.request.contextPath }/subareaAction_findCountGroupByProvince.action",function(data){ myEc1.setOption({ title : { text: '區域分區分布圖', subtext: '每個省份的分區數', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'訪問來源', type:'pie', radius : '55%', center: ['50%', '60%'], data:data } ] }); });
影視前端demo,http://www.viuman.com 唔呦漫