一:导入静态文件
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 = {
}
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绘制地图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!