PHP与echarts读取地图数据并显示例子

<div id="myChart" style="width:700px;height:560px"></div>

引入echarts百度图表插件和全国各地数据china.js

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/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);

最后远程加载中国地图数据

$.ajax({
    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 = "select * 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;

时间: 2025-01-26 13:40:39

PHP与echarts读取地图数据并显示例子的相关文章

利用Python读取外部数据文件的例子

不论是数据分析,数据可视化,还是数据挖掘,一切的一切全都是以数据作为最基础的元素.利用Python进行数据分析,同样最重要的一步就是如何将数据导入到Python中,然后才可以实现后面的数据分析.数据可视化.数据挖掘等.   在本期的Python学习中,我们将针对Python如何获取外部数据做一个详细的介绍,从中我们将会学习以下4个方面的数据获取:   1.读取文本文件的数据,如txt文件和csv文件   2.读取电子表格文件,如Excel文件   3.读取统计软件生成的数据文件,如SAS数据集.

c# 循环从文本文档中读取一个数据,如何删除后继续循环

问题描述 做了个循环从文本文档中读取随机数据并显示在textbox中,如何去除显示出来的数据继续循环?就是说不能出现重复的数据,应该用什么语句删除掉该显示在textbox中的数据呢?我做出来的是把文档的内容全删掉了.麻烦高手给予解答. 解决方案 解决方案二:不懂..仅仅是个练习?还是什么具体的需求?为什么要随机数据显示到textbox?解决方案三:文件修改需要重写文件的,除非内存映射解决方案四:楼主贴现有的代码看看按理说应该一次性把文件内容都读到byte[]里,等处理好了再一次性写回去解决方案五

把sql读取的数据用echarts显示出来

问题描述 把sql读取的数据用echarts显示出来 用echarts制作的地图,各省份有不同的数据要显示,数据是在sql数据库中读取的 解决方案 http://jingyan.baidu.com/article/925f8cb8fb372dc0dde05619.html 解决方案二: ajax异步查询取数,然后在前端展示

谁会echarts实现地图省市县的钻取分别单独显示

问题描述 谁会echarts实现地图省市县的钻取分别单独显示 echarts地图现已实现省市县的钻取,可市到县的显示是在同一界面,怎样把市的去掉只显示县的 解决方案 有代码吗?把你的实现代码发一下看看 解决方案二: <!DOCTYPE html> 解决方案三: 您好,您的地图可以省份与全国切换的demo能发我一份吗?小弟先谢过了,我的qq 461815049 相关文章 php-请问怎么获取比较权威的全国各省份,市,县的行政区划信息呢? scale-echarts地图缩放级别问题 echart-

【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. -------------------------------------------------------------------------------------------------------------- 成品图:     工具描述: 移动地图时(或改变地图级别时),只显示

如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)_jquery

ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示       源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL

【Echarts】怎么转换成Echarts地图数据需要的格式

问题描述 [Echarts]怎么转换成Echarts地图数据需要的格式 从后台得到json格式的字符串,需要把其中的数据显示到前台的地图上,发现Echarts中的data 需要的是下面这种格式的数据,这是什么格式,怎么转换,高分求解! [ { name : "广州", value : 38 }, { name : "昆明", value : 39 }, { name : "沈阳分院", value : 50 }, { name : "长

求一个能从数据库读取数据并显示到坐标图上的java程序

问题描述 求一个能从数据库读取数据并显示到坐标图上的java程序 新手学java,但是现在急需一个能从数据库读取数据并显示到坐标图上的java程序,希望各位能够给一点帮助,谢谢了 解决方案 http://www.open-open.com/lib/view/open1337915511824.htmlhttp://blog.csdn.net/sjf0115/article/details/7059407 解决方案二:

txt文件-MFC 怎么从TXT文件里面读取数据并显示到list control中

问题描述 MFC 怎么从TXT文件里面读取数据并显示到list control中 要写一个通讯录管理系统,txt里面存放联系人的信息,但是要怎么显示到list control里面啊 解决方案 读取内容出来后,就可以通过SetItemText设置数据到ListCtrl的一列列中 解决方案二: 可以有具体的例子吗? 方法我知道 但是就是没成功 解决方案三: 你不要用txt了把,我觉的应该用cvs格式的文件读进来,完后放到listctrl中,这个列子是在把脉vc++这个书里面有现成的代码的