本文目錄一覽:
- 1、使用echart散點圖繪製地圖
- 2、echarts 使用json文件圖出不來
- 3、C#中Echarts如何獲取oracle中的數據然後可視化,將資料庫數據轉json格式,用ajax獲取數據給js可視化嗎
- 4、echarts使用本地json文件無法顯示地圖
- 5、怎麼從JSON獲取數據到Echart製作餅圖
使用echart散點圖繪製地圖
之前沒看過echart的地圖,最近有個需求需要繪製到深圳地圖,經過幾番測試,實現需要的效果,這裡寫篇博客記錄一下,先看效果圖:
但如果不是node環境呢,比如本地的一個html文件,第一想到的是ajax,但這是本地模擬一下,使用ajax還是有點麻煩,這裡超人鴨用一種不太規範的方法引入,這是json文件原本的樣子:
我使用一個變數定義這個對象:
然後在html文件中用script標籤引入:
這裡已經引入成功了,我們可以列印測試一下:
是沒問題的,現在拿到深圳地圖的json數據,接下來就是繪製地圖了,還是echart那一套:
先看看效果:
接下來就是往上面繪製散點圖,既然是往以這個地圖作為坐標系,那顯示在上面點的位置就要在這個地圖上,我們需要先寫好每個地點的經緯度:
大家百度一下經緯度查詢就能找到,然後是散點圖的配置,還有一個處理數據的函數:
上面的處理函數也是從官網改造一點細節複製過來的,處理後的每一項data就是這個樣子:
散點圖會根據value的前兩項去匹配坐標,在地圖上顯示,後面的數據並無關係。到這裡的效果:
看到我使用了回調函數格式化了提示框顯示的內容,這個回調函數帶了一個params參數,這個對象裡面基本什麼信息都有,大家不知道的話列印一下什麼都明了。
到這裡就實現使用echart散點圖繪製地圖,超人鴨這篇文章所實現的適合那種某個區域的某種東西的分布情況,用處還是挺大的,歡迎大家指教哦。
echarts 使用json文件圖出不來
放到IIS或者tomcat里用localhost:xx/xxx/2007-2011.html打開試試…
不要直接雙擊資源管理器里的html…
發布出來用瀏覽器訪問使用的是http協議,雙擊html用的是file協議,file協議時用jQuery似乎就是有問題……
C#中Echarts如何獲取oracle中的數據然後可視化,將資料庫數據轉json格式,用ajax獲取數據給js可視化嗎
接收MySQL數據
點擊JavaScript,進入配置頁面,在1處填入dip名字,2處的地址為宿主機地址,默認為dip系統部署機器地址, 點擊下一步,填寫腳本配置網頁鏈接
dip名稱:使用英文且見名知義(最好使用駝峰命名法)。
dip的宿主機:運行該dip的伺服器ip地址,也是我們的數據處理伺服器。
進入如下界面,在黑窗口的run函數中編寫JavaScript腳本,將獲取到的數據轉換成產品需要的數據結構,最後輸出。
首先編寫腳本獲取數據,獲取數據有2種方式,第一種是主動獲取,第二種是被動接收,根據實際情況選擇對應的獲取數據方式。而每一種方式又有多種類型。
對接MySQL我們選擇主動獲取方式,點擊輸入-主動獲取,選擇第一項MySQL ,相應的接入MySQL的代碼會自動填寫在function run() 裡面 ,in 為接入語句,executes為數據處理邏輯,outs處填寫數據輸出語句。
如下圖,在1處添加接入MySQL數據源url,username,password,在2處添加查詢簡單的查詢sql語句,查詢自己需要的數據。
function run() {
var MysqlJdbcAdapter = Java.type(“com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter”);
while (true) {
try {
var adapter = new MysqlJdbcAdapter(“jdbc:mysql://127.0.0.1:3306/database?useUnicode=truecharacterEncoding=UTF-8”, “root”, “root”);
var data = adapter.getDataByTable(“select * from …”);
heartBeat.addInCount(data.size());
//executes…
//outs…
sleep(60000);
} catch (error) {
logger.error(“腳本執行錯誤:”,error);
}
}}
接收ActiveMq數據
點擊JavaScript,進入配置頁面,在1處填入dip名字,2處的地址為宿主機地址,默認為dip系統部署機器地址, 點擊下一步,填寫腳本配置。
dip名稱:使用英文且見名知義(最好使用駝峰命名法)。
dip的宿主機:運行該dip的伺服器ip地址,也是我們的數據處理伺服器。
echarts使用本地json文件無法顯示地圖
顯示什麼問題?我之前遇到的就是引用echarts後地圖不顯示的問題。
這個問題是因為echarts3的地圖的geo數據以前的中國地圖是內置了,現在新版本需要自己下載的china的js或json數據,引用了之後就可以顯示了。
怎麼從JSON獲取數據到Echart製作餅圖
下面是解決的代碼:
餅圖的數據獲取的值為value,示例代碼為:data:[
{value:335, name:’直接訪問’},
{value:310, name:’xxxx’},
{value:234, name:’xxxx’},
{value:135, name:’xxxx’},
{value:1548, name:’xxxx’}]
我解決的代碼是 value:{data[0].generalPractitionerRegistrationCount}獲取到第一行值為generalPractitionerRegistrationCount
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/183010.html