typescript react echarts map geojson

最近根據領導的指示，需要實現一個中國地圖的可視化全國的銷售數量，因為我一直是后台開發的人員，對typescript中的強類型比較感興趣同時數據交互react也很好的實現數據的綁定。經過長達很久的探索，完成了這塊的內容。

環境配置：

"echarts": "^5.1.2",
"echarts-for-react": "^3.0.1",
"typescript": "^4.1.2",
如果你的環境中有 ts+react 又想要使用echart 建議看這個
1. 安裝依賴
npm install echarts --save
npm install echarts-for-react
2. 配置環境
創建echarts.d.ts echarts-for-react.d.ts連個declare文件

 

編輯並declare modul

declare module 'echarts/lib/echarts';
 declare module 'echarts-for-react';
3. demo測試
導入包

import ReactECharts from "echarts-for-react";
import {EChartsOption} from "echarts";

配置option

config : {
    title : {
 text : "機械臂全球銷售記錄"
 },
 tooltip : {
 trigger : "axis"
 },
 xAxis : {
 type :"category",
 data : ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
 },
 yAxis : {
 type : "value"
 },
 series : [
 {
 name : "機械臂銷售數據",
 type :"bar",
 data : ["10","20","15","8","23","40","32"]
 }
 ]
}

引入使用

<ReactECharts option={this.state.config} />

效果如圖所示：

 

4. 測試成功之后可以正式使用geoJson繪制中國地圖

5. 選擇geoJso 提供阿里的繪圖數據

http://datav.aliyun.com/tools/atlas/index.html

復制復制之后，在文檔中新建json文件

 

 6. 引用json文件

import ReactECharts from 'echarts-for-react';
import * as echarts from "echarts";
import {EChartsOption} from "echarts";


// echarts.registerTheme('my_theme', {
// backgroundColor: '#181F4E'
// })
echarts.registerMap("china",require("../../config/china.json")); //這個步驟很關鍵，注冊之后的名字與geo組件之間或者series保持一致
7. 配置option

this.state = {
 config: {
 tooltip: {
 trigger: "axis"
 },
 visualMap: {
 min: 0,
 max: 1000,
 left: 26,
 bottom: 40,
 showLabel: !0,
 text: ["高", "低"],
 pieces: [{
 gt: 100,
 label: "> 100 人",
 color: "#7f1100"
 }, {
 gte: 10,
 lte: 100,
 label: "10 - 100 人",
 color: "#ff5428"
 }, {
 gte: 1,
 lt: 10,
 label: "1 - 9 人",
 color: "#ff8c71"
 }, {
 gt: 0,
 lt: 1,
 label: "疑似",
 color: "#ffd768"
 }, {
 value: 0,
 color: "#ffffff"
 }],
 show: !0
 },
 geo: {
 map: "china",
 roam: !1,
 scaleLimit: {
 min: 1,
 max: 2
 },
 zoom: 1.23,
 top: 120,
 itemStyle: {
 borderColor: "rgba(0, 0, 0, 0.2)"
 },
 emphasis: {
 areaColor: "#f2d5ad",
 shadowOffsetX: 0,
 shadowOffsetY: 0,
 borderWidth: 0
 }
 },
 series: [{
 name: "機械臂全國銷售數量",
 type: "map",
 map: "china",
 geoIndex: 0,
 data: data
 }]
 }
}

8. 引用運行

9. 完整的代碼

import React, {Component} from 'react';

import ReactECharts from 'echarts-for-react';
import * as echarts from "echarts";
import {EChartsOption} from "echarts";


echarts.registerTheme('my_theme', {
 backgroundColor: '#181F4E'
})
echarts.registerMap("china",require("../../config/china.json"));

interface IState {
 config : EChartsOption
}
class MapChina extends Component<any,IState> {

 constructor(props: any, context: any) {
 super(props, context);
 const data = [{name: "合肥", value: 20},
 {name: "江蘇", value: 10},
 {name: "南京", value: 30},
 {name: "上海", value: 40}];
 this.state = {
 config: {
 tooltip: {
 trigger: "axis"
 },
 visualMap: {
 min: 0,
 max: 1000,
 left: 26,
 bottom: 40,
 showLabel: !0,
 text: ["高", "低"],
 pieces: [{
 gt: 100,
 label: "> 100 人",
 color: "#7f1100"
 }, {
 gte: 10,
 lte: 100,
 label: "10 - 100 人",
 color: "#ff5428"
 }, {
 gte: 1,
 lt: 10,
 label: "1 - 9 人",
 color: "#ff8c71"
 }, {
 gt: 0,
 lt: 1,
 label: "疑似",
 color: "#ffd768"
 }, {
 value: 0,
 color: "#ffffff"
 }],
 show: !0
 },
 geo: {
 map: "china",
 roam: !1,
 scaleLimit: {
 min: 1,
 max: 2
 },
 zoom: 2.1,
 top: 120,
 itemStyle: {
 borderColor: "rgba(0, 0, 0, 0.2)"
 },
 emphasis: {
 areaColor: "#f2d5ad",
 shadowOffsetX: 0,
 shadowOffsetY: 0,
 borderWidth: 0
 }
 },
 series: [{
 name: "機械臂全國銷售數量",
 type: "map",
 map: "china",
 geoIndex: 0,
 data: data
 }]
 }
 }
 }
 render() {
 return (
 <ReactECharts
 theme={"my_theme"}
 option={this.state.config} />
 )
 }
}

export default MapChina;