Javascript Echarts空氣質量地圖效果詳解

阿新 • • 發佈：2021-10-12

我們要先把空氣質量資料和地圖資料結合起來：

地圖資料有name這個屬性

在這裡插入圖片描述

我們的不同城市空氣質量也有name這個屬性，這兩個屬性是一樣的，都叫name，所以我們可以把他們關聯起來：

var airData = [
      { name: '北京',value: 39.92 },{ name: '天津',value: 39.13 },{ name: '上海',value: 31.22 },{ name: '重慶',value: 66 },{ name: '河北',value: 147 },{ name: '河南',value: 113 },{ name: '雲南',value: 25.04 },{ name: '遼寧',value: 50 },{ name: '黑龍江',value: 114 },{ name: '湖南',value: 175 },{ name: '安徽',value: 117 },{ name: '山東',value: 92 },www.cppcns.com 
    { name: '新疆',value: 84 },{ name: '江蘇',value: 67 },{ name: '浙江',{ name: '江西',value: 96 },{ name: '湖北',value: 273 },{ name: '廣西',value: 59 },{ name: '甘肅',value: 99 },{ name: '山西',value: 39 },{ name: '內蒙古',value: 58 },{ name: '陝西',value: 61 },{ name: '吉林',value: 51 },{ name: '福建',value: 29 },{ name: '貴州',value: 71 },{ name: '廣東',value: 38 },{ name: '青海',value: 57 },{ name: '西藏',value: 24 },{ name: '四川',{ name: '寧夏',value: 52 },{ name: '海南',value: 54 },{ name: '臺灣',value: 88 },{ name: '香港',{ name: '澳門',value: 77 },{ name: '南海諸島',value: 55 }
    ]

接著我們要把空氣質量資料配置到series中去：

在這裡插入圖片描述

最後再做一些效果配置：

在這裡插入圖片描述

在這裡插入圖片描述

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>地圖-不同城市空氣質量</title>
  <script src="./lib/echarts."></script>
  <script src="./lib/axios.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  <script>
    var airData = [
      { name: '北京',value: 147 },{ name:  
'黑龍江',{ name: '新疆',value: 55 }
    ]
    var myCharts = echarts.init(document.querySelector('div'))
    
    axios.get('./json/map/china.json').then(res => {
      console.log(res.data)
      echarts.registerMap('china',res.data)
      var option = {
        geo: {
          type: 'map',map: 'china',     roam: true,label: {
            show: true
          }
        },series: [
          {
            data: airData,// 空氣質量資料
            geoIndex: 0,// 將空氣質量資料和第0個geo配置關聯在一起
            type: 'map'
          }
        ],visualMap: {
          min: 0,// 最小值
          max: 300,// 最大值
          inRange: {
            color: ['pink','blue'] // 控制左下角和地圖漸變顏色
          },calculable: true // 控制左下角滑塊
        }
      }
      myCharts.setOption(option)
    })
  </script>
</body>
</html>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！

Javascript Echarts空氣質量地圖效果詳解

我們要先把空氣質量資料和地圖資料結合起來：地圖資料有name這個屬性我們的不同城市空氣質量也有name這個屬性，這兩個屬性是一樣的，都叫name，所以我們可以把他們關聯起來：

JavaScript實現六種網頁圖片輪播效果詳解

目錄1、當滑鼠經過輪播圖模組，左右按鈕顯示，離開隱藏左右按鈕。2、動態生成小圓圈3、點選小圓圈，小圓圈變色4、點選小圓圈滾動圖片5、點選右側按鈕一次，就讓圖片滾動一張。6、點選右側按鈕，小圓圈跟隨變化7、左

JavaScript 變數,資料型別基礎例項詳解【變數、字串、陣列、物件等】

本文例項講述了JavaScript 變數,資料型別基礎。分享給大家供大家參考，具體如下：

原生JavaScript實現的無縫滾動功能詳解

本文例項講述了原生JavaScript實現的無縫滾動功能。分享給大家供大家參考，具體如下：

JavaScript 中的無窮數(Infinity)詳解

為了保證的可讀性，本文采用意譯而非直譯。 Infinity(無窮大)在 JS 中是一個特殊的數字，它的特性是：它比任何有限的數字都大，如果不知道 Infinity，我們在一些運算操作遇到時，就會覺得很有意思。

JavaScript程式碼異常監控實現過程詳解

這篇文章主要介紹了JavaScript程式碼異常監控實現過程詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JavaScript實現棧結構Stack過程詳解

JavaScript實現棧結構（Stack）一、前言 1.1. 什麼是資料結構？資料結構就是在計算機中，儲存和組織資料的方式。

Javascript非同步程式設計async實現過程詳解

async官方DOC 介紹 node安裝 npm install async --save 使用 var async = require(\'async\') js檔案 https://github.com/caolan/async/tree/master/dist

Javascript模組化機制實現原理詳解

1. 概述 js發展初期暴露了其缺陷：缺乏模組，後來提出了commonJS規範來規範其模組的規範。作為JavaScript新手，發現對於其JavaScript的模組機制，不是很理解。我查閱了一些資料整理了JavaScript CommonJS的原理和機

《javascript設計模式》學習筆記七：Javascript面向物件程式設計組合模式詳解

本文例項講述了Javascript面向物件程式設計組合模式。分享給大家供大家參考，具體如下：

JavaScript ES6 Class類實現原理詳解

JavaScript ES6之前的還沒有Class類的概念，生成例項物件的傳統方法是通過建構函式。

JavaScript 介面原理與用法例項詳解

本文例項講述了JavaScript 介面原理與用法。分享給大家供大家參考，具體如下：

JavaScript設計模式---單例模式詳解【四種基本形式】

本文例項講述了JavaScript設計模式---單例模式.分享給大家供大家參考，具體如下：

JavaScript 類的封裝操作示例詳解

本文例項講述了JavaScript 類的封裝操作。分享給大家供大家參考，具體如下：

Javascript原型鏈及instanceof原理詳解

instanceof:用來判斷例項是否是屬於某個物件，這個判斷依據是什麼呢？首先，瞭解一下javascript中的原型繼承的基礎知識：

基於javascript處理二進位制圖片流過程詳解

今天學習怎麼生成二維碼，我習慣所有請求都用ajax完成但是今天發現jquery的ajax不支援二進位制，只能搞純文字

JavaScript indexOf()原理及使用方法詳解

定義和用法 indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。語法

Android如何繪製發光效果詳解

前言之前在看別人寫自定義view作繪製的時候，看到別人家的view自帶發光效果，看起來也是蠻炫酷的，於是自己也抽出時間來試用一下，這裡做了一個模仿太陽的各種狀態樣式。

JavaScript中window和document用法詳解

一、驗證表單封裝一個函式用於驗證手機號 /** * @param {String}eleId * @param {Object}reg

javascript中正則表示式語法詳解

　　好久都沒有寫部落格了，主要是太懶了，尤其是在陽春三月，風和日麗的日子，太陽暖暖的照在身上，真想美美的睡上一覺。就導致了這篇部落格拖到現在才開始動筆，javascript的正則這一塊也不是什麼新的東西，主要是