本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据。通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方面的相关知识。
HTML
首先在页面中需要加载地图的位置放上div#myChart。
然后是加载Echarts和中国地图js文件。由于本文实例中应用了异步ajax加载数据,所以需要加载jQuery库文件。
Javascript
接下来js部分,先设置好Echarts选项内容,请看以下代码及注释。
option = {
title : {
text: '2015年GDP统计数据',
subtext: '数据来源网络(单位:万亿元)',
left: 'center' //标题居中
},
tooltip : { //提示工具,
trigger: 'item',
formatter: "{a}
{b} : {c}万亿元"
},
visualMap: { //视觉映射组件,可以根据范围调节数据变化
min: 0, //最小值
max: 10, //最大值
left: 'left', //位置
top: 'bottom',
orient: 'horizontal', //水平
text