看一下手机端疫情地图(按此仿写的)
项目实现
昨天某公开课上,老师是利用vue的,接口也是老师提供的。因为个人项目是React的,正好补充一下项目。直接上代码
安装echart依赖
npm install echarts-for-react echarts
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import jsonp from "jsonp" // 接口jsonp实现跨域
// import 'echarts/map/js/china'; // 本来导出官网的中国地图,是可以实现的,但是地图省份字有点乱,说是按照省份位置。所以在网上找了一份
import "../../utils/china"
export default class Map extends Component {
state = {
mapData: []
}
getOption = () => {
return {
title: {
text: "全国疫情地图",
x: "center",
textStyle: {
color: "#9c0505"
}
},
tooltip: { // 提示框
trigger: "item",
formatter: "省份: {b} <br/> 累计确诊:{c}" // a 系列名称 b 区域名称 c 合并数值
},
series: [
{
type: 'map',
map: "china",
data: this.state.mapData,
label: {
show: true,
color: "black",
fontStyle: 10,
align: "center"
},
zoom: 1, // 当前缩放比例
roam: true, // 是否支持拖拽
itemStyle: {
borderColor: "blue", // 区域边框线
},
emphasis: { // 高亮显示
label: {
color: "black",
fontSize: 10
},
itemStyle: {
areaColor: "lightyellow" // 区域高亮颜色
}
}
},
],
visualMap: {
type: "piecewise",
show: true,
pieces: [
{ min: 10000 },
{ min: 1000, max: 9999 },
{ min: 500, max: 999 },
{ min: 100, max: 499 },
{ min: 10, max: 99 },
{ min: 1, max: 9 },
{ value: 0 }
],
inRange: {
color: ["#FFFFFF", "#FDEBCA", "#E25552", "#CA2B2D", "#831A26", "#500312"] // 颜色有个梯度变化,我吸取手机上
}
}
}
}
getDate = () => {
let self = this;
jsonp("https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427", (err, data) => {
var lists = data.data.list.map(item => {
return {
name: item.name,
value: item.value
}
})
self.setState({
mapData: lists
})
})
}
componentDidMount() {
this.getDate()
}
render() {
return (
<div style={{padding:30}}>
<ReactEcharts option={this.getOption()} style={{ height: "800px" }}></ReactEcharts>
</div>
)
}
}
实现效果图
基本功能实现就差不多了。