2. 程式人生 > >百度Echart地圖簡單使用Echart-map多圖

百度Echart地圖簡單使用Echart-map多圖

阿新 • • 發佈：2019-01-18
var datas; var maxNum; $(function() { //-----------------------獲取資料------------------------------ $.ajax({ url : "xxxx", timeout : 30000,//超時時間設定，單位毫秒 type : 'get', //請求方式，get或post dataType : 'json',//返回的資料格式 async: false, success : function
(data){ if (data.success) { datas = data.data; maxNum = data.current_date; var contentLi =""; contentLi += '<table class="table table-striped table-bordered table-hover">'; contentLi += '<tr><th>序號</th><th>省份</th><th>使用者量</th><th>佔比</th></tr>'
; $.each(datas, function(index, value) { //處理下面表格資料 }); contentLi += '</table>'; $("#data_div").html(contentLi); } } }); //-----------------------引入echart------------------------------
require.config({ paths: { echarts: '${basePath }/js/echarts' } }); //-----------------------引入echart目錄------------------------------ require( [ //這裡的'echarts'相當於'./js' 'echarts', 'echarts/chart/map' ], //建立ECharts圖表方法 function (ec) { // --- 地圖 --- //基於準備好的dom,初始化echart圖表 //var datas ="{name:'北京',value:100}, {name:'天津',value:200},{name:'上海',value:300}"; var myChart = ec.init(document.getElementById('mainMap')); //定義圖表option var option = { //標題，每個圖表最多僅有一個標題控制元件，每個標題控制元件可設主副標題 title: { //主標題文字，'\n'指定換行 text: '使用者分佈', //副標題文字，'\n'指定換行 subtext: '微信使用者分佈圖', //水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'center', //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'top' }, //圖例，每個圖表最多僅有一個圖例 tooltip : { //觸發型別，預設（'item'）資料觸發，可選為：'item' | 'axis' trigger: 'item' }, //圖例，每個圖表最多僅有一個圖例 legend: { //佈局方式，預設為水平佈局(即horizontal)，可選為：'horizontal' | 'vertical' orient: 'vertical', //水平安放位置，預設為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'left', //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'top', //legend的data: 用於設定圖例，data內的字串陣列需要與sereis陣列內每一個series的name值對應 data:['使用者分佈人數'] }, //值域選擇，每個圖表最多僅有一個值域控制元件 dataRange: { //佈局方式，預設為垂直佈局('vertical')，可選為：'horizontal' | 'vertical' orient: 'vertical', //指定的最小值，eg: 0，預設無(null)，必須引數 min: 0, //指定的最大值，eg: 100，預設無(null)，必須引數 max: maxNum, //水平安放位置，預設為全圖左對齊('left')，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'left', //垂直安放位置，預設為全圖底部('bottom')，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'bottom', //值域文字顯示，預設為數值文字 text: ['高','低'], //是否啟用值域漫遊，預設為關閉(false)，啟用後無視splitNumber，值域顯示為線性漸變 calculable: true }, //工具箱，每個圖表最多僅有一個工具箱 toolbox: { //顯示策略，可選為：true（顯示） | false（隱藏），預設值為false show: true, //佈局方式，預設為水平佈局('horizontal')，可選為：'horizontal' | 'vertical' orient: 'vertical', //水平安放位置，預設為全圖右對齊('right')，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'right', //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'center', //啟用功能，目前支援feature，工具箱自定義功能回撥處理 feature: { //輔助線標誌 mark: {show: true}, //資料檢視，開啟資料檢視，可設定更多屬性,readOnly 預設資料檢視為只讀(即值為true)，可指定readOnly為false開啟編輯功能 dataView: {show: true, readOnly: false}, //restore，還原，復位原始圖表 restore: {show: true}, //saveAsImage，儲存圖片（IE8-不支援）,圖片型別預設為'png' saveAsImage: {show: true} } }, //縮放漫遊元件，僅對地圖有效 右上角移動元件有問題 roamController: { //顯示策略，預設為顯示(true),可選為：true（顯示） | false（隱藏）。 show: false, //水平安放位置，預設為左側('letf')，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'right', //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'top', //必須，預設無(null),指定漫遊元件可控地圖型別，如：{ china: true } mapTypeControl: { //指定地圖型別 'china': true } }, //series(地圖),驅動圖表生成的資料內容陣列，陣列中每一項為一個系列的選項及資料 series : [ { //系列名稱，如果啟用legend，該值將被legend.data索引相關 name: '繫結人數', //圖表型別，必要引數！如為空或不支援型別，則該系列資料不被顯示 type: 'map', //地圖型別，支援world，china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文：如'廣東' mapType: 'china', //是否開啟滾輪縮放和拖拽漫遊，預設為false（關閉），其他有效輸入為true（開啟），'scale'（僅開啟滾輪縮放），'move'（僅開啟拖拽漫遊） roam: 'scale', //圖形樣式，可設定圖表內圖形的預設樣式和強調樣式（懸浮時樣式） itemStyle:{ //正常時的樣式 normal:{ //邊框線寬，單位px borderWidth: 2, //邊框顏色 borderColor: 'lightgreen', //標籤，餅圖預設顯示在外部，離餅圖距離由labelLine.length決定，地圖標籤不可指定位置 label: {show:true} }, //滑鼠經過時的樣式 emphasis: { //邊框線寬，單位px borderWidth:2, //邊框顏色 borderColor:'#fff', //滑鼠經過時區域的顏色 color: '#32cd32', //標籤 label: { show: true, //文字樣式 textStyle: { //文字字型顏色 color: '#fff' } } } }, //當圖表型別為地圖時，需要說明每部分資料對應的省份，可設定選中狀態，如 :{name: '北京',value: 1234,selected: true}, data:datas } ] }; //為echarts物件載入資料 myChart.setOption(option); }

相關推薦

百度富文字編輯器的多圖上傳單獨放在專案

線上搜尋的功能不是很好用，有待改進！需要改ueditor/php/config.json檔案的路徑 "imagePathFormat": "/upload/{filename}",/* 上傳儲存路

百度Echart地圖簡單使用Echart-map多圖

var datas; var maxNum; $(function() { //-----------------------獲取資料------------------------------ $.ajax({ url : "xx

echart地圖滑鼠懸浮展示多類資料

tooltip: { //trigger: 'item', formatter: '{b}:{c}' enterable:true, trigger:'item', formatter:function(par

ionic 修改應用名稱 及 修改百度離線地圖 點聚合 圖標

離線 百度離線地圖 分享 應用名稱 技術分享 修改 com http ges 1.ionic 修改應用名稱 2.修改百度離線地圖 點聚合 圖標 ionic 修改應用名稱 及 修改百度離線地圖 點聚合 圖標

百度定位的簡單應用

百度定位的jar自己去下,地址自行解決 1 定義一個回撥介面 public interface ILocationCallback { public void callback(BDLocation locationMap); } 2定義一個工具類 p

我的百度離線地圖API V3.0製作

我拿到這個任務的時候是懵逼的，因為沒有做過地圖，一波三折才會做。我是參考很多部落格結合起來做的，主要是看這篇部落格： https://blog.csdn.net/wml00000/article/details/82219015 一、下載百度線上API 我要用百度API裡面的方法

java呼叫百度地圖API開發，百度線上地圖開發——未完待續

這裡是目錄 一、引入百度地圖API 二、百度地圖開發 1、定義一個div來存放地圖 2、生成地圖 3、新增一個跳躍的點 4、新增控制元件 5、有其他需要的請留言 一、引入百度地圖API   百度地圖官方示例：http://lbsyun.b

百度距離全面掉隊BAT還有多遠？

如何正確看待百度一直是業內的一大難點，相當部分看衰者認為其增速缺乏後勁，在AI戰略未帶來正向收益時，線上廣告營收增速變緩，市場留給百度的機會已然不多，百度掉隊BAT的說法甚囂塵上。   那麼，對於當下的百度究竟面臨何等具體問題，其未來增量究竟還有多大後勁，在AI戰略開花結果之

百度離線地圖與angularjs4的結合

預實現效果：在內部區域網（無外網）的情況下，以百度地圖為底圖，可放大縮小，業務指標在不同範圍內顯示指定顏色標識，同時展示相應資料資訊； 方案分析：如果必須以百度地圖為底圖，則需要採用地圖瓦片（瓦片下載器結合百度ak）拼接底圖，利用離線api，同時結合地圖Marker點新增圖示Icon，標註Labe

百度mapapi 地圖MapAPI地圖展示

 地圖MapAPI地圖展示   <!doctype html>

bigemap百度離線地圖API介面文件及介面呼叫例項

    1.當前版本支援百度電子地圖瓦片和百度衛星地圖瓦片； 2.效果預覽演示地址：http://www.bigemap.com/bmap  後臺編輯體驗地址：http://www.bigemap.com/bmap/ 可隨意在後臺新增/修改標註

java Ueditor 百度編輯器 整合ssm後臺多圖片上傳，無縫加入專案做新增儲存

效果圖  多圖片單圖片 上傳到後臺 本地儲存。編輯框回顯，複製貼上直接用，適合實際專案中做 內容發表，發表文章等等編輯自定義上傳圖片 多圖片到後臺路徑，看了網上一推教程，走了很多彎路，簡單明瞭 ，複製貼上直接用 專案地址 https://download.csdn.net/d

uni-app 1.4 釋出，一套程式碼，發行小程式（微信/支付寶/百度）、H5、App多個平臺

在2019新年到來之際，uni-app 1.4版本正式釋出，新增支援百度、支付寶小程式，開放外掛市場，同時注入更多優秀特性，為開發者送上了一份新年大禮！ 支援更多小程式平臺 uni-app 1.4 版本新增支援百度、支付寶小程式，從此一次開發，可釋出小程式（微信/支付寶/百度）、H5、App（iOS/An

百度離線地圖新增右鍵選單

最近在做百度離線地圖相關開發，一個右鍵選單功能真是折騰的夠嗆。 將線上api  demo程式碼原樣copy到離線版中，無效，呼叫的是瀏覽器的右鍵選單。 找了一大堆的資料，遮蔽瀏覽器右鍵選單也罷，還有其他方案也罷（其實根本沒人提到我這種離線版的情況），均無效。死活不能出現自定

百度 谷歌 Twitter，這麼多短連結服務（Short Url）到底哪家強？

一、短連結是什麼 短連結，通俗來說，就是將長的URL網址，通過程式計算等方式，轉換為簡短的網址字串。 它的原理也非常簡單，就是採用 Domain Redirect(域名重定向) ，將一個域名自動跳轉到另一個域名。 根據wikipedia描述，短連結的方案最

Unity學習筆記007.Unity接入原生Android百度AR地圖

大概操作步驟按筆記006執行。 1.背景 環境： OS：Windows10 Android Studio3.2 Unity 2018.1.2f1 思路 Unity端：主調方，UI Android端：底層介面，打包aar方式 2.步驟 2.1 Android S

百度面試題——簡單運算

問題：要求不使用+ - * / < >運算子號判定給定兩個非零數的大小。輸入：多組輸入兩個數a和b。輸出：輸出min=較小的數字，max=較大的數字實現程式碼：#include <stdio.h>int main(int argc,char* argv

包含高德，百度等地圖 apikey 專案打包 relese debug keystore

1.debug版， 不同編譯環境，sha1不同，需要自己提取； 在android studio terminal中輸入 keytool -list -v -keystore C:\Users\Ad

Android 百度最新地圖隱藏 放大縮小按鈕、指南針、縮放比例的方法

相信很多人在做地圖是都會遇到如要隱藏這3中按鈕的困擾，那麼該如何實現呢？我就不多說，程式碼很少，一看就能明白 下面接是具體實現程式碼 // 隱藏縮放控制元件                 int childCount = mMapView.getChildCou

百度離線地圖api2.0 載入本地瓦片 實現點線面標註 ajax提交（完全內網）

簡介：自己修改的離線地圖API 2.0版本, 支援百度電子、衛星地圖任意切換（把兩者的瓦片下載下來放在對應的資料夾中即可），支援點線面標註、測距等，marker可以自定義更改圖示，infowindow可以上傳圖片、視訊（MP4格式）、超連結等。要是不用於實測定位等下載goo