react使用echart绘制地图的案例
致爱丽丝 人气:0一:导入静态文件
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, }, ], }
注释有点多,但是可能更有帮助
加载全部内容