echarts地圖 json資料和後套動態資料載入

阿新 • • 發佈：2019-02-08

 $(function () {

              zbw();

          });
var contentzbw= "../../static/assets/js/map/"

function zbw() {
              var myChart = echarts.init(document.getElementById("henanmap"));

              echarts.util.mapData.params.params.河南 = {
                  getGeoJson: function (callback) {
                      $.getJSON('../../static/assets/js/map/mapJson/hn.json' 
, function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };


              var cityindx='河南';
              var curIndx = 0;
              var mapType = [
            '河南' 
,
              // 18市
    '安陽市', '鶴壁市', '濮陽市', '新鄉市', '焦作市',
    '三門峽市', '洛陽市', '鄭州市', '開封市', '許昌市',
    '平頂山市', '漯河市', '周口市', '南陽市', '駐馬店市',
    '信陽市', '商丘市', '濟源市',
    '項城市','二七區','新鄭市','新密市',
    '登封市','鞏義市','上街區','滎陽市',
    '惠濟區','金水區','中原區','管城回族區'
    ,'中牟縣'

   ];

              echarts.util.mapData.params.params.鄭州市 = {
                  getGeoJson: function 
 (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zzs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.安陽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'ays' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.鶴壁市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'hbs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.濮陽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pys' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.新鄉市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xxs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.焦作市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jzs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.三門峽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'smss' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.洛陽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lys' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.開封市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'kfs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.許昌市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xcs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.平頂山市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pdss' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.漯河市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lhs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.周口市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zks' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.南陽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'nys' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.駐馬店市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zmds' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.信陽市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xys' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.商丘市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'sqs' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.濟源市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jys' + '.json', function (data) {
                          // 壓縮後的地圖資料必須使用 decode 函式轉換
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };

              var datas=[];
              // 同步執行  
              $.ajaxSettings.async = false; 
              // 載入資料  
              $.getJSON('../../datas/gethomemap', function (json) {  
                  datas = json.datas;
                  datas1=json.datas1;
                  datas2=json.datas2;

              });  





              var option = {
                  title: {
                      x: 'center',
                      text: '全省18個市',
                      subtext: '河南'
                  },
                  tooltip: {
                      trigger: 'item',
                      show : true,
                      showDelay:500,
                      formatter: '{b}<br/>{a}:{c}'
                  },

                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['微博資料量','關注人數','資訊量息量']
                  },
                  dataRange: {
                      min: 0,
                      max: 1000,
                      color: ['#1e90ff', '#f0ffff'],
                      text: ['高', '低'],           // 文字，預設為數值文字
                      calculable: true
                  },
                  toolbox: {
                      show: true,
                      orient : 'vertical',
                      x: 'right',
                      y: 'center',
                      feature : {
                          mark : {show: true},
                          dataView : {show: true, readOnly: false},
                          restore : {show: true},
                          saveAsImage : {show: true}
                      }
                  },
                  roamController: {
                      show: true,
                      x: 'right',
                      mapTypeControl: {
                          '河南': true,
                          '鄭州市':true
                      }
                  },
                  series: [
        {
            name: '微博資料量',
            type: 'map',
            mapType: '河南',
            selectedMode: 'single',

            roam: false,
            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas
        },
        {
            name: '關注人數',
            type: 'map',
            mapType: '河南',

            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas1
        },
        {
            name: '資訊量息量',
            type: 'map',
            mapType: '河南',

            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data:datas2
        }

    ]
              };
              myChart.setOption(option);
              var len = mapType.length;
              var mt = mapType[curIndx % len];
              myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param) {
                  len = mapType.length;

                  if (mt == '河南') {
                      // 河南選擇指定的市區
                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              while (len--) {
                                  if (mapType[len] == mt) {
                                      curIndx = len;
                                  }
                              }
                              break;
                          }
                      }

                      if (mt == '濟源市') {
                        mt='河南|濟源市'
                      }
                      cityindx=mt;


                      option.series[0].mapType = mt;
                      option.series[1].mapType = mt;
                      option.series[2].mapType = mt;
                      option.title.subtext = mt;
                      myChart.setOption(option, true);

                  }
                  else {
                      //選擇市內的區  

                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              break;
                          }
                      }

                      if(cityindx==mt){
                        mt='河南'
                        curIndx = 0
                        option.series[0].mapType = mt;
                        option.series[1].mapType = mt;
                        option.series[2].mapType = mt;
                        option.title.subtext = mt;
                        myChart.setOption(option, true);
                      }

                      cityindx=mt;
                  }

              });

          }

package com.jeefw.controller.sys;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.jeefw.core.Constant;
import com.jeefw.core.JavaEEFrameworkBaseController;
import com.jeefw.model.sys.DictLeixing;
@Controller
@RequestMapping(“/datas”)
public class DatasController extends JavaEEFrameworkBaseController implements Constant{

//表圖的動態資料
@RequestMapping("/gethomemap")
public void dogetDatas(HttpServletRequest request,HttpServletResponse response) throws IOException{
    String mapname[]= {"信陽市","南陽市","駐馬店市","周口市","商丘市","三門峽市","新鄉市","鄭州市","安陽市","開封市",
                       "焦作市","許昌市","濮陽市","漯河市","鶴壁市","項城市","鞏義市","上街區","登封市","新密市",
                       "二七區","金水區","中原區","管城回族區","惠濟區","中牟縣","滎陽市","濟源市","平頂山市","洛陽市",
                       "濟源市","新鄭市"};
    Map<String, Object> datas =new HashMap<String, Object>();
    Map<String, Object> result = new HashMap<String, Object>();
    List<Object> results = new ArrayList<Object>(); ;
    for (int i = 0; i <31 ; i++) {
        result = new HashMap<String, Object>();
        result.put("name", mapname[i]);
        result.put("value", 500+i*10);
        results.add(result);
    }   
    datas.put("datas", results);//微博資訊
    datas.put("datas1", results);//資料1
    datas.put("datas2", results);//資料2
    System.out.println("測試：："+datas);
    writeJSON(response, datas);

}

}
這裡寫圖片描述

echarts地圖 json資料和後套動態資料載入

$(function () { zbw(); }); var contentzbw= "../../static/assets/js/map/" function zbw() {

Javaweb開發（前端和後端學習資料）

JavaWeb開發學習資料開發環境：IDE： Intellij idea， Eclipse， Dreamweaver資料庫： MySQL伺服器： Tomcat後端：Java基礎入門：熟悉Java語法，String，陣列，集合框架，面向物件的封裝、繼承、多型、介面。推薦書籍

一致性hash演算法和redis叢集動態資料儲存

記錄:對一致性Hash演算法，Java程式碼實現的深入研究連結地址: http://www.cnblogs.com/xrq730/p/5186728.html全部來自:https://mp.weixin.qq.com/s/yimfkNYF_tIJJqUIzV7TFAhttps

前端和後端的資料互動(jquery ajax+python flask+mysql)

上web課的時候老師佈置的一個實驗，要求省市連動，基本要求如下： 1.用select選中一個省份。 2.省份資料傳送到伺服器，伺服器從資料庫中搜索對應城市資訊。 3.將城市資訊返回客戶，客戶用select控制元件進行顯示。基本效果如下所示(頁面挺醜陋的

oracle分析函式系列之LAG和LEAD:取出同一欄位的前N行的資料和後N行的值

Lag和Lead函式可以在一次查詢中取出同一欄位的前N行的資料和後N行的值。這種操作可以使用對相同表的表連線來實現，不過使用LAG和LEAD有更高的效率。以下是LAG和LEAD的例子： SQL> select year,region,profit ,lag (pr

mysql查詢表中前一條和後一條資料

標題 1.查詢前一條記錄： select * from 表名 where id = (select id from 表名 where ranking < #{ranking,

Elasticsearch：匯入本地資料和使用Kibana管理資料(樓主親測，真實有效)

匯入資料 Elasticsearch和Kibana的結合就是用來檢索和分析資料的，那麼這個資料怎麼來，肯定是匯入進去的。一、匯入資料的說明 Elasticsearch在官方的文件探索你的資料中，有說需要將本地資料匯入到Elasticsearch中。那麼怎麼匯入，這個就是

Vue使用v-for渲染資料完成後再次改變資料，頁面資料不改變

v-for不能進行雙向資料繫結,頁面渲染完成後,再次更改v-for遍歷的資料,js裡面列印的資料看到資料值已經更改,但是頁面的資料就是沒有渲染,這是為什麼呢?vue中v-for和angularjs中的ng-repeat不用 ,它對頁面只進行一次渲染。後續如果需要更改資料且顯示在頁面上就需要想想其他辦

Android通過Parcelable傳遞複雜的物件資料和簡單的物件資料

二次驗證:絕對有效轉：https://blog.csdn.net/u014614038/article/details/56279075 Android推薦可以通過Parcelable來傳遞自定義的資料()，比如以下的資料體： public class GradeInfoForSear

金融量化分析-python量化分析系列之---使用python獲取股票歷史資料和實時分筆資料

財經資料介面包tushare的使用（一） Tushare是一款開源免費的金融資料介面包，可以用於獲取股票的歷史資料、年度季度報表資料、實時分筆資料、歷史分筆資料，本文對tushare的用法，已經存在的一些問題做一些介紹。一：安裝tushare 為避免由於依賴包缺失導致安裝失敗，請先安裝anaconda,

使用js將utf16格式編碼的資料和utf8格式的資料互轉

function utf16to8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i);

結構化資料、半結構化資料和非結構化資料

結構化資料結構化的資料是指可以使用關係型資料庫表示和儲存，表現為二維形式的資料。一般特點是：資料以行為單位，一行資料表示一個實體的資訊，每一行資料的屬性是相同的。舉一個例子： id name age gender 1 lyh 12 male

JSONP操作01_本地訪問資料和跨域訪問資料

1．jsonp簡介 json 是一種資料格式 jsonp 是一種資料呼叫的方式。 1）什麼是jsonp 為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將

刪除重複資料和刪除所有重複資料不同處理方法

仔細想才發現處理過程是不一樣的，刪除重複資料要刪除後面重複的保留第一個，刪除所有的是把包括第一次出現的一起刪除了。不知道有沒有理解對。下面是一次作業的程式碼，比較懶沒有把和刪除無關的部分截掉。// a01101.cpp : Defines the entry point f

2個8位資料和一個16位資料相互轉換

這種位的轉換其實理解了本質就很容易了，也很基礎。首先先了解一下bit和Byte，俗稱大B和小b的區別。一個小b只能代表一個內容（0或者1，其中的一個）兩個小b可代表4個內容 “2的2次方“ （00，11，01，10） bit意為“位”或“位元”

Hive結構化資料、半結構化資料和非結構化資料

所謂半結構化資料，就是介於完全結構化資料（如關係型資料庫、面向物件資料庫中的資料）和完全無結構的資料（如聲音、影象檔案等）之間的資料，XML、HTML文件就屬於半結構化資料。它一般是自描述的，資料的結構和內容混在一起，沒有明顯的區分。

結構化資料和非結構化資料的區別

在資訊社會，資訊可以劃分為兩大類。一類資訊能夠用資料或統一的結構加以表示，我們稱之為結構化資料，如數字、符號；而另一類資訊無法用數字或統一的結構表示，如文字、影象、聲音、網頁等，我們稱之為非結構化資料。結構化資料屬於非結構化資料，是非結構化資料的特例。　　

返回資料標準(後端反饋資料標準化)

返回資料標準我們做了一個後臺管理專案（lotteryCMS），為了解析時好解析，我們會對從db中拿到的資料進行封裝，當前端接受到資料的時候根據反饋的code就可以決定自己是否要解析這次查詢的資料了。我們定義一個基本的返回物件Response，我

sql server 統計資料庫中某個欄位的值，剔除重複資料和查詢重複的資料

1.有的時候，在資料庫中存在一些重複的資料，但是我們又想統計某個欄位的值，重複的要剔除掉，如圖所示：在上面的圖我們可以看到，id=2,3 id=4,5的4條資料都重複了，我們統計amount只要其

python量化分析系列之---使用python獲取股票歷史資料和實時分筆資料

財經資料介面包tushare的使用（一） Tushare是一款開源免費的金融資料介面包，可以用於獲取股票的歷史資料、年度季度報表資料、實時分筆資料、歷史分筆資料，本文對tushare的用法，已經存在的一些問題做一些介紹。一：安裝tushare 為避免由於

echarts地圖 json資料 和 後套動態資料載入

相關推薦

echarts地圖 json資料和後套動態資料載入