使用echarts展示分区分布图

Posted bofeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用echarts展示分区分布图相关的知识,希望对你有一定的参考价值。

第一步:引入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展示分区分布图的主要内容,如果未能解决你的问题,请参考以下文章

vue使用echart百度地图做数据分布图聚合图层

echarts图表——矩形树图&仪表盘

如何将全国各省份人口数据绘制成地域分布图?Python 轻松解决

DemoPython + Echarts 简易实现一个数据分布图

echarts 关系图的力引导图,怎么调节距离,设置成圆形分布?

Echarts或HighCharts如何绘制非均匀分布X轴