百度echarts中地圖

1、專案結構

js資料夾： 下載了ECharts之後，解壓縮，如解壓後的根目錄是echarts-2.1.8，則到echarts-2.1.8\doc\example\www路徑下，把裡面的js資料夾直接複製貼上到專案的 WebRoot根目錄下即可

echarts.jsp： 在WebRoot根目錄下新建echarts.jsp

echarts.jsp

[java] view plain copy print?

<%@ page language="java"import="java.util.*" pageEncoding=

"UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"

>
<title>ECharts例項</title>
</head>
<body>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"

></div>
<script src="js/echarts.js"></script>
<script type="text/javascript">
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑
require(
[
//這裡的'echarts'相當於'./js'
'echarts',
'echarts/chart/map'
],
//建立ECharts圖表方法
function (ec) {
// --- 地圖 ---
//基於準備好的dom,初始化echart圖表
var myChart = ec.init(document.getElementById('mainMap'));
//定義圖表option
var option = {
//標題，每個圖表最多僅有一個標題控制元件，每個標題控制元件可設主副標題
title: {
//主標題文字，'\n'指定換行
text: 'iphone銷量',
//副標題文字，'\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:['iphone3','iphone4','iphone5']
},
//值域選擇，每個圖表最多僅有一個值域控制元件
dataRange: {
//佈局方式，預設為垂直佈局('vertical')，可選為：'horizontal' | 'vertical'
orient: 'vertical',
//指定的最小值，eg: 0，預設無(null)，必須引數
min: 0,
//指定的最大值，eg: 100，預設無(null)，必須引數
max: 2500,
//水平安放位置，預設為全圖左對齊('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},
相關推薦

百度echarts中地圖

1、專案結構 js資料夾：下載了ECharts之後，解壓縮，如解壓後的根目錄是echarts-2.1.8，則到echarts-2.1.8\doc\example\www路徑下，把裡面的js資料夾直接複製貼上到專案的 WebRoot根目錄

使用百度echarts製作視覺化大屏——加入地圖

var geoCoordMap = { '上海': [121.4648,31.2891], '東莞': [113.8953,22.901], '東營': [118.7073,37.5513], '中山': [113.4229,22.478], '臨汾': [111.4783,36

在 Soui 中嵌入 MiniBlink 初體驗(一)：支援百度 ECharts 開源視覺化庫顯示

一、引言最近在工作中遇到了這麼一個需求：產品想要讓我們的桌面客戶端中顯示覆雜的圖表，類似下圖所示的樣子（圖片來自網路），不排除後期會增加更多複雜圖示的可能性，因此我們需要考慮如何實現這種需求，並能夠支援其需求的擴充套件性那麼，看到這個需求

使用百度echarts畫圖表的步驟

.com 百度echarts 一個銷量 too option pan htm img 1.百度echarts是一個很好用的圖表工具，可以將一些數據很形象直觀的展示出來，下面看一下簡單的使用。 2.首先引用echarts.js 具體文檔可以參考官網： http://ech

百度Echarts導入

don false magictype oct tex gic span 修改 toolbox <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

百度Echarts的使用總結

font .sh 中間 etop auto 最大值位置顏色漸變 gap 在HTML寫個空div <div id="mainTL" style="height:100% ;width:100%;"></div> JS中： myChartT

GPS轉化為百度坐標地圖展示

js地址：http://lbsyun.baidu.com/jsdemo.htm#c1_3 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/h

百度ECharts圖表展示動態資料

百度ECharts是個非常強大的圖表工具，引入百度提供的echarts.min.js檔案後，只需從後臺獲取資料便可以圖表的形式展示資料，能夠更直觀的檢視、比較、統計資料。這裡以一個柱狀圖展示動態資料的小例子講解如何使用百度ECharts。 1.首先引入需要的js檔案： <

百度高德地圖如何下載

目前在網際網路公開服務中，或者絕大多數手機APP裡看到的，都是基於柵格（瓦片）模型的地圖服務，比如大家看到的百度地圖或者谷歌地圖，其實對於某一塊

百度高德地圖poi資料下載

對於地圖產品而言，某個地理位置周邊的資訊，稱之為 POI 。百度地圖的官方文件中是這麼解釋的：位置資料，point of information。不過網路上也有其他的說法，point of interest ，地圖上任何

百度Echarts-聊城市公交線網

作者：WenWu_Both 出處：http://blog.csdn.net/wenwu_both/article/ 版權：本文版權歸作者和CSDN部落格共有轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連結；否則必究法律責任週末試玩了下百度Echar

WAMP+百度Echarts實戰

作者：WenWu_Both 出處：http://blog.csdn.net/wenwu_both/article/ 版權：本文版權歸作者和CSDN部落格共有轉載：歡迎轉載，但未經作者同意，必須保留此段宣告；必須在文章中給出原文連結；否則必究法律責任所謂“WAMP”指的是Wi

教你怎麼樣去複製百度文庫中的文章

方法/步驟首先，我們按照平時的搜尋習慣，在百度文庫中找到自己需要的資料。文章不可以複製，但有的題目可以複製，把可以複製的題目複製下來。

百度與中國寶武達成戰略合作，推動鋼鐵產業智慧化轉型

10月26日，百度宣佈與中國寶武鋼鐵集團有限公司達成戰略合作。雙方一致認為，在工廠內外全流程資料打通，確保製造按時按需方面，網際網路是重要抓手，在社會化物流和供應鏈等方面有深入合作的機會，並在AI、區塊鏈等7個方向上達成共識。 “三步走”推進ABC+IoT在鋼鐵全產

百度echarts折線圖美化填充顏色，電波～，分類圓點圓點，填充

 <div id="main"></div>  <script src="plug

全國百度高德地圖poi資料下載

2018年11月11日 13:33:00 wanjiawen0260 閱讀數：15 標籤： poi

百度echarts報Cannot read property 'calculable' of nu

百度圖示外掛echarts報錯Cannot read property 'calculable' of nul；檢視calculable屬性也是設定了false；同時展示了兩個圖表，有一個是正常的，仔細分析了一下發現應該不是echarts配置問題，應該是後端返回資

百度 echarts 使用總結

1.主題設定 html: <div id="dataimg" style="width: 600px;height:400px;"> </div> JS: <script> var myChart

百度echarts圖表資料更新與漂浮（float）

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>echarts demo</title

百度ECharts---android線上展示統計圖表(折線圖\柱狀圖\餅狀圖)

做金融型別的應用經常會用到資料的統計報表諸如折線圖 , K線圖, 餅狀圖,柱狀圖既能形象的表述資料的分佈 , 同時又增加了資料的可讀性實現思路: 百度Echarts支援安卓移動端的運用 , WebView載入html, 巢狀JavaScript程式碼 , 即可動態

相關推薦