該樓層疑似違規(guī)已被系統(tǒng)折疊?隱藏此樓查看此樓

echarts生成圖表區(qū)域#myChart

接下來設(shè)置echarts相關(guān)屬性和api接口option = {

title: {

text: '2015年GDP統(tǒng)計數(shù)據(jù)',

subtext: '數(shù)據(jù)來源網(wǎng)絡(luò)(單位：萬億元)',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: "{a}

{b} : {c}萬億元"

},

visualMap: {

min: 0,

max: 10,

left: 'left',

top: 'bottom',

orient: 'horizontal',

text: ['高', '低'], // 文本，默認(rèn)為數(shù)值文本

calculable: true //是否啟用值域漫游，即是否有拖拽用的手柄，以及用手柄調(diào)整選中范圍。

},

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, //是否開啟鼠標(biāo)縮放和平移

itemStyle: {

normal: {label: {show: true}},

emphasis: {label: {show: true}}

},

data: []

}

]

};

var myChart = echarts.init(document.getElementById('myChart'));

myChart.showLoading();

myChart.setOption(option);最后遠(yuǎn)程加載中國地圖數(shù)據(jù)$.ajax({

type: "post",

async: false, //同步執(zhí)行

url: "mapdata.php",

dataType: "json", //返回數(shù)據(jù)形式為json

success: function(result) {

myChart.hideLoading(); //隱藏加載動畫

myChart.setOption({//渲染數(shù)據(jù)

series: [{

// 根據(jù)名字對應(yīng)到相應(yīng)的系列

name: '2015年GDP',

data: result

}]

});

},

error: function() {

alert("請求數(shù)據(jù)失敗!");

}

});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;

總結(jié)

以上是生活随笔為你收集整理的echarts php 数据处理,PHP+echarts读取地图数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。