快捷導(dǎo)航

react使用echart繪制地圖的案例

更新時(shí)間：2023年01月11日 09:39:04 作者：致愛麗絲

這篇文章主要介紹了react使用echart繪制地圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一：導(dǎo)入靜態(tài)文件

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { DownLoadPath } from "./data-overview/type"
import { ECHARTS_THEME } from './assets/static'
import myChinaMap from '/assets/static/china_new.json'

二：初始化配置

函數(shù)式組件，接受需要導(dǎo)入的數(shù)據(jù)

//解構(gòu)props. resourceList:資源列表 
function myEchart({resourceList}){
   const divRef = useRef()    // 獲取組件dom-ref
  // 防御性編程 如果resourceList為空則直接終止
  if(!Array.isArray(resourceList)  || (Array.isArray(resourceList) && resourceList.length<1  )) return 
   useeffect(()=>{
    // 防御性編程，divRef.current：綁定的dom元素名，比如{current:div},如果不存在，則程序到此終止。
    if (!divRef.current) return
    // 有時(shí)候傳入的數(shù)據(jù)對(duì)象key名與echart要求的可能不同，因而，需要基于傳入數(shù)據(jù)重新配置內(nèi)部對(duì)象
    const myCustomizeResourceList = []
    resourceList.foreach((item,index)=>{
      //echart要求格式為{name:xxx,value:xxx}
      myCustomizeResourceList.push({
          name:item.xx,
          value:item.yy
      })
    })
    //數(shù)據(jù)裝填完畢后，開始注冊(cè)本地靜態(tài)地圖
   echarts.registerMap('',myChinaMap ) //參數(shù)1：地圖名 本項(xiàng)目中不需要
  //注冊(cè)完畢后，創(chuàng)建echart實(shí)例，并獲取dom實(shí)例，并初始化echart圖表   
  // getInstanceByDom(echartDOM容器),
 //  init(echartDOM容器，主題)
 const myChart = echarts.getInstanceByDom(divRef.current) ?? echarts.init(divRef.current, ECHARTS_THEME)
 

const option = {
/****
篇幅太長(zhǎng)，第三步將著重講解options配置
***/  
}
myChart.setOption(option)
//監(jiān)聽resize方法，一但縮放即重新設(shè)置echart寬高， 這里推薦使用lodash的節(jié)流函數(shù)包裹以節(jié)省性能
window.onresize = () => {
      myChart.resize()
    }
},[resourceList])    
//監(jiān)聽resourceList，如果有變化，隨時(shí)setOption
return  <div ref={divRef} style={{ height: "440px" }} />
}

三：options各個(gè)配置項(xiàng)

const option = {
    backgroundColor: "#fff", //背景色
    //tooltip ：配置鼠標(biāo)經(jīng)過圖表區(qū)域時(shí)顯示的小彈窗的文字   //item:myCustomizeResourceList的內(nèi)部子項(xiàng)
      tooltip: {
        //提示框里的文字，參數(shù)item是data里的每一項(xiàng)
        formatter: function (item) {
          return `${item.name}：${item?.data?.value} `
        }
      },
// 工具集 
      toolbox：{
        feature：{
          saveAsImage：{
            
          }
        }
      },
// 縮放配置
      geo:{
         roam: true, //是否允許鼠標(biāo)縮放 
        zoom: 1.2,
      }
左下程度表
      // 視覺映射 ： 連續(xù)型
      visualMap: {
        // type: 'continuous',
        calculable: false, // 是否顯示手柄
        // align: 'bottom',
        min: 0,
        max: 10,
        left: '15%',
        top: '50%',
        showLabel: true,
        // text: ['High', 'Low'], //顯示兩邊文字
        pieces: [
          //各個(gè)程度的顏色
          { min: 0, max: 9, color: "#e7f3ff" },
          { min: 10, max: 19, color: "#ddefff" },
          { min: 20, max: 49, color: "#aed8ff" },
          { min: 50, max: 99, color: "#97cdff" },
          { min: 100, max: 199, color: "#69b7ff" },
          { min: 100, max: 199, color: "#69b7ff" },
          { min: 200, max: 500, color: "#3aa0ff" },
          { min: 500, color: "#1890ff" },
        ]
      },
// 將基于組件prop的數(shù)據(jù)裝配到這里作為展示數(shù)據(jù)
      series: [
        {
          name: '錄取人數(shù)',
          type: 'map',
          geoIndex: 0,  //防止出現(xiàn)地圖重疊，賦值為0標(biāo)識(shí)只允許出現(xiàn)一張地圖
          data：myCustomizeResourceList,
        },
      ],
}

注釋有點(diǎn)多，但是可能更有幫助

到此這篇關(guān)于react使用echart繪制地圖的文章就介紹到這了,更多相關(guān)react使用echart繪制地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: