React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react使用echart绘制地图

react使用echart绘制地图的案例

作者:致爱丽丝

这篇文章主要介绍了react使用echart绘制地图,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一:导入静态文件

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'

二:初始化配置

函数式组件,接受需要导入的数据

//解构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
    // 有时候传入的数据对象key名与echart要求的可能不同,因而,需要基于传入数据重新配置内部对象
    const myCustomizeResourceList = []
    resourceList.foreach((item,index)=>{
      //echart要求格式为{name:xxx,value:xxx}
      myCustomizeResourceList.push({
          name:item.xx,
          value:item.yy
      })
    })
    //数据装填完毕后,开始注册本地静态地图
   echarts.registerMap('',myChinaMap ) //参数1:地图名 本项目中不需要
  //注册完毕后,创建echart实例,并获取dom实例,并初始化echart图表   
  // getInstanceByDom(echartDOM容器),
 //  init(echartDOM容器,主题)
 const myChart = echarts.getInstanceByDom(divRef.current) ?? echarts.init(divRef.current, ECHARTS_THEME)
 

const option = {
/****
篇幅太长,第三步将着重讲解options配置
***/  
}
myChart.setOption(option)
//监听resize方法,一但缩放即重新设置echart宽高, 这里推荐使用lodash的节流函数包裹以节省性能
window.onresize = () => {
      myChart.resize()
    }
},[resourceList])    
//监听resourceList,如果有变化,随时setOption
return  <div ref={divRef} style={{ height: "440px" }} />
}

三:options各个配置项

const option = {
    backgroundColor: "#fff", //背景色
    //tooltip :配置鼠标经过图表区域时显示的小弹窗的文字   //item:myCustomizeResourceList的内部子项
      tooltip: {
        //提示框里的文字,参数item是data里的每一项
        formatter: function (item) {
          return `${item.name}:${item?.data?.value} `
        }
      },
// 工具集 
      toolbox:{
        feature:{
          saveAsImage:{
            
          }
        }
      },
// 缩放配置
      geo:{
         roam: true, //是否允许鼠标缩放 
        zoom: 1.2,
      }
左下程度表
      // 视觉映射 : 连续型
      visualMap: {
        // type: 'continuous',
        calculable: false, // 是否显示手柄
        // align: 'bottom',
        min: 0,
        max: 10,
        left: '15%',
        top: '50%',
        showLabel: true,
        // text: ['High', 'Low'], //显示两边文字
        pieces: [
          //各个程度的颜色
          { 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的数据装配到这里作为展示数据
      series: [
        {
          name: '录取人数',
          type: 'map',
          geoIndex: 0,  //防止出现地图重叠,赋值为0标识只允许出现一张地图
          data:myCustomizeResourceList,
        },
      ],
}

注释有点多,但是可能更有帮助

到此这篇关于react使用echart绘制地图的文章就介绍到这了,更多相关react使用echart绘制地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文