&&国之画&&布布分享&&&& &&&&
版权所有 京ICP备号-2
迷上了代码！当前位置：首页 <
echarts做的一个地图省市县三级
摘要：在百度上搜到了echarts地图。用的时候发现只有省市二级和全国和省份的地图，没办法在网上找了很久的也没有省市县三级的。后来没招了，就想着把echarts地图省市二级的扩展到三级，经过漫长的研究代码终于找到了解决办法。省市县三echarts地图终于搞定。不过有个BUG ，进入下一级后不能返回上一级。
&&&&&客户要求做的一个地图本来说好的是要全国，山东省，济宁市三级的。做完了之后结果客户不干了，非得要全国所有省市县的。做的第一版是SVG+js 做的在网上也找到SVG的数据了，整理SVG的数据的时候，弄烦了就在网上找有没有现成的地图。很偶然的机会，在百度上搜到了echarts地图。用的时候发现只有省市二级和全国和省份的地图，没办法在网上找了很久的也没有省市县三级的。后来没招了，就想着把echarts地图省市二级的扩展到三级，经过漫长的研究代码终于找到了解决办法。省市县三echarts地图终于搞定。不过有个BUG ，进入下一级后不能返回上一级。希望有高手能够解决这一BUG。&&& 现将免费源码分享到网上供大家参考！&&&&百度网盘：&&& 提取密码：kemf
您可能感兴趣的文章Echarts使用地图报表时，实现不了动画效果
[问题点数：100分]
Echarts使用地图报表时，实现不了动画效果
[问题点数：100分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。PHP与echarts读取地图数据并显示例子-Php常用代码-Php教程-壹聚教程网PHP与echarts读取地图数据并显示例子
echarts是一个jquery插件了可以实现地图上标数据了，我信下面一起来看一篇关于PHP与echarts读取地图数据并显示例子，希望例子能够对各位有用了。
&div id=&myChart& style=&width:700height:560px&&&/div&
引入echarts百度图表插件和全国各地数据china.js
&script type=&text/& src=&js/echarts.min.js&&&/script&
&script type=&text/javascript& src=&/js/jquery/1.9.0/jquery.min.js&&&/script&
&script type=&text/javascript& src=&js/china.js&&&/script&
接下来设置echarts相关属性和api接口
option = {
&&& title: {
&&&&&&& text: '2015年GDP统计数据',
&&&&&&& subtext: '数据来源网络（单位：万亿元）',
&&&&&&& left: 'center'
&&& tooltip: {
&&&&&&& trigger: 'item',
&&&&&&& formatter: &{a} &br/&{b} : {c}万亿元&
&&& visualMap: {
&&&&&&& min: 0,
&&&&&&& max: 10,
&&&&&&& left: 'left',
&&&&&&& top: 'bottom',
&&&&&&& orient: 'horizontal',
&&&&&&& text: ['高', '低'], // 文本，默认为数值文本
&&&&&&& calculable: true& //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。
&&& toolbox: {//工具栏
&&&&&&& show: true,
&&&&&&& orient: 'vertical', //垂直
&&&&&&& left: 'right',
&&&&&&& top: 'center',
&&&&&&& feature: {
&&&&&&&&&&& mark: {show: true},
&&&&&&&&&&& saveAsImage: {show: true} //保存为图片
&&& series: [
&&&&&&&&&&& name: '2015年GDP',
&&&&&&&&&&& type: 'map',
&&&&&&&&&&& mapType: 'china',
&&&&&&&&&&& roam: false, //是否开启鼠标缩放和平移
&&&&&&&&&&& itemStyle: {
&&&&&&&&&&&&&&& normal: {label: {show: true}},
&&&&&&&&&&&&&&& emphasis: {label: {show: true}}
&&&&&&&&&&& },
&&&&&&&&&&& data: []
var myChart = echarts.init(document.getElementById('myChart'));
myChart.showLoading();
myChart.setOption(option);
最后远程加载中国地图数据
&&& type: &post&,
&&& async: false, //同步执行&
&&& url: &mapdata.php&,
&&& dataType: &json&, //返回数据形式为json&
&&& success: function(result) {
&&&&&&& myChart.hideLoading(); //隐藏加载动画&
&&&&&&& myChart.setOption({//渲染数据&
&&&&&&&&&&& series: [{
&&&&&&&&&&&&&&&&&&& // 根据名字对应到相应的系列&
&&&&&&&&&&&&&&&&&&& name: '2015年GDP',
&&&&&&&&&&&&&&&&&&& data: result
&&&&&&&&&&&&&&& }]
&&&&&&& });
&&& error: function() {
&&&&&&& alert(&请求数据失败!&);
PHP读取中国省份表
$sql = & * from echarts_map&;
$query = mysql_query($sql);
while($row=mysql_fetch_array($query)){
&&& $arr[] = array(
&&&&&&& 'name' =& $row['province'],
&&&&&&& 'value' =& $row['gdp']
最后附上中国省份地图表
CREATE TABLE IF NOT EXISTS `echarts_map` (&
& `id` int(11) NOT NULL AUTO_INCREMENT,&
& `province` varchar(45) NOT NULL,&
& `gdp` decimal(10,2) NOT NULL,&
& PRIMARY KEY (`id`)&
) ENGINE=MyISAM& DEFAULT CHARSET=utf8;
上一页： &&&&&下一页：相关内容
暂无与此文章相关内容最新内容}