项目需求
- 在React项目中引入中国地图,完成基础数据的渲染(类似疫情地图那样)
- 点击地图可以显示某个地区的多个item,点击之后可以路由到不同的页面
前期工作
因为Echarts我记得之前是支持地图组件的,可是现在因为涉及到一些问题,不能使用了。详细的可以查看官方文档配置项(series map类型)。所以现在需要引入china.js这个文件(原因:官方说的是因为现在地图精度的提高,代码增多,需要下载文件并引入),上网查了一些资料也看了一些博客,最后还是看官方文档(真的开发千万要看文档,磨刀不误砍柴功):
ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
这段是官方文档讲的两种方法(我采用的是第一种)
//-----------方法一-----------------
<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
//react项目的话就写到componentDidMount,用hook类似
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
//类型一定设置map和china
series: [{
type: 'map',
map: 'china'
}]
});
</script>
//--------------方法二-----------------
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
如果react没有下载Echarts,可以自己npm一个Echarts,这样的话就可以直接引入
import echarts from 'echarts';
import 'echarts/map/js/china';
在项目下载的依赖包里也可以找到,(当然也可以自己下载一个china.js然后引入项目)
出现的问题
- 如何实现点击一个省份出现不同的链接??
没错,查看官方文档。
tooltip属性 这个属性就是就是你点击Echarts一个地方出现的小tips,其中的formatter属性支持自定义,它有两个方法,一个是字符串模板,一个是回调函数。回调函数支持更加灵活一些的方法,比如这个需求是想让我把省份中的一些详细数据展示,然后路由到其他目录。
tooltip:{
triggerOn:'click',
enterable:true,
formatter(params,ticket,callback){
//params 是点击地图省份的data数据
let detail=params.data.detail;
let tipHtml='<ul>';
detail.map((item,index)=>{
return tipHtml+='<li key='+index+'><a href="/#/home">'+item.coalName+'</a> 钻孔数量:'+item.number+'</li>'
})
tipHtml+='</ul>';
return tipHtml;
}
}
这个因为回调函数内部其实就是嵌入了一个无序列表,然后插入链接。当然这个地方还没有添加不同的路由(暂时没写到这里)
-
实现疫情地图类型的legend
我想的是直接使用legend属性,然后进行自定义。然而找了老半天,并没有啥启发。知道看到一个博客,发现自己的思路就是刚开始就跑偏了,非得使用legend属性,结果人家的实现是使用visualMap,视觉映射组件。
//这是省份的基础数据类型,其他省份省略
{ name: '黑龙江', type: 'areaCenterCity',detail:[
{coalName:'工区1',number:Math.round(Math.random()*1000)},
{coalName:'工区2',number:Math.round(Math.random()*1000)},
],value:2}
//-----------分割线------------配置信息
visualMap:{
type: 'piecewise',
// dimension:1,
left:'20%',
bottom:'5%',
pieces: [
{ min: 7 ,max: 10, label: '7-10矿区', color: '#1F9FFF' },
{ min: 5, max: 6, label: '5-6矿区', color: '#00E5EE' },
{ min: 3, max: 4, label: '3-4矿区', color: '#BBFFFF' },
{ min: 1, max: 2, label: '1-2矿区', color: '#E0FFFF' },
{ value:0, label: '0个矿区', color: '#fff' },
]
}
成果图(数据都是假的,切勿当真hhh):
仍存问题
我在配置VisualMap属性的时候,可以看到我dimension属性是注释掉的,因为我设置的时候根本不起作用,我查看了文档仍然没有解决。只是知道默认是最后一列数据,所以我将value值设置到了最后一行,如果有使用成功的,也希望在评论指出。