使用echarts展示分區分布圖
阿新 • • 發佈：2018-05-27
context tool java too 實例 使用 toolbox 分區 show
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
}
]
});
});
第一步：引入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
}
]
});
});
使用echarts展示分區分布圖