react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色_a-pei651_echarts 取消高亮

未知 02-07 5675

react 可视化项目 ECharts 3D区域地图图表地图介绍echarts图表引入react页面中引入使用

地图介绍

做可视化项目时需要3d的区域地图，在网上搜到ECharts社区的一个其他网站，上面有人家写好的图表demo，我是基于上面的一个3D地图修改配置项实现我需要的地图。下面是写好的示例：区域地图，鼠标移上去自定义颜色，点击取消高亮黄色地图范围是在阿里云数据可视化平台获取的点击选择区域下载json格式的区域经纬度在图表里引入可以

echarts图表引入

通过npm引入

npm install echarts --save

页面引入图表

import * as echarts from ‘echarts’; 这一步相当于引入全部图表了，如果只用到一个图表可以按照官方的教程按需引入 EChart图表官网入口

react页面中引入使用

图表的3D效果，其实是两个地图的错位背景色差，形成的视觉上的3D；

import * as echarts from 'echarts';//引入全部图表 import React, { useEffect, useState, useLayoutEffect } from 'react' import styles from './Home.module.css'; let myChart, option export default function Home() { // echarts地图 useEffect(() => { myChart = echarts.init(document.getElementById('main')); myChart.on("click", clickFunc); myChart.showLoading(); myChart.hideLoading(); echarts.registerMap('HK', xinxiang);//这边引入区域数据文件 myChart.setOption( (option = { // backgroundColor: '#042636', tooltip: {}, geo: {//底部背景地图的配置 tooltip: { show: true }, map: 'HK', aspectScale: 0.75, //长宽比 zoom: 1.1, roam: false, itemStyle: { areaColor: '#15e3c9', shadowColor: 'rgba(0,243,255,0.6)', shadowOffsetX: 9, shadowOffsetY: 9, emphasis: { areaColor: '#2AB8FF', borderWidth: 0, // color: 'green', label: { show: false } } }, }, series: [{//上面覆盖的地图配置 type: 'map', roam: false, label: { show: true, // color: "#FFFFFF", fontSize: 12, }, itemStyle: { borderColor: '#05CDD8', borderWidth: 1, areaColor: '#15e3c9', emphasis: { show: false, // borderColor: '#fff', borderWidth: 0.5, areaColor: { x: 1000, y: 1000, x2: 1000, y2: 0, colorStops: [ { offset: 0, color: 'rgb(46,229,206)', // 0% 处的颜色 }, { offset: 1, color: 'rgb(46,229,206)', // 50% 处的颜色 }, ], global: true, // 缺省为 false }, opacity: 1, }, }, zoom: 1.1, map: 'HK' //使用 }, { type: 'custom', coordinateSystem: 'geo', geoIndex: 0, zlevel: 1, data: [//这三个是标注点的经纬度 [113.951509, 35.295743, 100], [114.077852, 35.060022, 30], [113.616426, 35.211636, 80], ], itemStyle: { color: '#a6ff00' }, renderItem(params, api) { const coord = api.coord([ api.value(0, params.dataIndex), api.value(1, params.dataIndex) ]); const circles = []; for (let i = 0; i < 5; i++) { circles.push({ type: 'circle', shape: { cx: 0, cy: 0, r: 30 }, style: { stroke: 'red', fill: 'none', lineWidth: 2, stroke: '#1A73E8' }, // Ripple animation keyframeAnimation: { duration: 4000, loop: true, delay: (-i / 4) * 4000, keyframes: [ { percent: 0, scaleX: 0, scaleY: 0, style: { opacity: 1 } }, { percent: 1, scaleX: 1, scaleY: 0.4, style: { opacity: 0 } } ] } }); } return { type: 'group', x: coord[0], y: coord[1], children: [ ...circles, { type: 'path', shape: { d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z', x: -10, y: -35, width: 20, height: 40 }, style: { fill: '#00A8E8' }, // Jump animation. keyframeAnimation: { duration: 1000, loop: true, delay: Math.random() * 1000, keyframes: [ { y: -10, percent: 0.5, easing: 'cubicOut' }, { y: 0, percent: 1, easing: 'bounceOut' } ] } } ] }; } } ], }) ); option && myChart.setOption(option); return () => { myChart.dispose(); } }, []) //echarts地图设置点击事件点击时高亮关闭换成自定义颜色 let nwo = '' function clickFunc(params) { console.log(params); myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: params.dataIndex }) if (params.dataIndex != nwo) { //没选中的取消高亮 myChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: nwo, }); } nwo = params.dataIndex; // 获取鼠标点击的经纬度 var pixelPoint = [params.event.offsetX, params.event.offsetY]; var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint); console.log(dataPoint); let longitude = parseInt(dataPoint[0]); //这是通过获取到的经纬度进行跳转页面，如果你也需要跳转，需要引入一下react 路由的useNavigate命名为nav来跳转； longitude == 113 && nav('/about'); }; return（ <div style={{ height: "950px", width: "900px" }} id="main"></div> ） }

如果想要切换颜色可以去官方查看配置项进行更改，不过就是需要一点一点修改，官方每个图表的配置项还是挺更多的。