react實現echarts的疫情地圖

視頻
https://www.bilibili.com/video/BV1T7411W72T?p=12
需要運用react-app和安裝echats的插件
json文件是視頻中提供的鏈接複製到本地的
https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list

（也希望大佬能教我一下react跨域獲取怎麼做，教程裏面的axios不會引入，網上找的jsonp方法又不能滿足引用格式

下面是做了一個表單兩個echarts圖（柱狀圖、map地圖

import React from 'react';
import ReactDOM from 'react-dom';
import jsonData from './feiyan-data-list.json'//https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list
import  './index.css'

import echarts from 'echarts';
import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

let provincesObj=[];
jsonData.data.list.map((item)=>{
  if(!provincesObj[item.province])
  provincesObj[item.province]={
    'province':item.province,
    "confirm":0,
    "heal":0,
    "dead":0,
  };
  provincesObj[item.province].confirm+=item.confirm;
  provincesObj[item.province].heal+=item.heal;
  provincesObj[item.province].dead+=item.dead;
})
let prok=[];

for(let key in provincesObj){
  prok.push(provincesObj[key]);
  
}
prok.sort((a,b)=>b.confirm-a.confirm)
console.log(new Date(jsonData.timestamp).toLocaleString(),'二月份的數據（數據不全已廢棄）')
console.log(prok)

let province=[];
let num=[];
let map=[];
prok.map((item)=>{
    province.push(item.province)
    num.push(item.confirm)
    map.push({name:item.province,value:item.confirm})
})
class Blist  extends React.Component{
  constructor(props){
      super(props)
  }
  render(){
      return (
          <div>
              <h1>中國病例</h1>
              <ul>
                  <li>
                      <span>地區</span>
                      <span>確診</span>
                      <span>死亡</span>
                      <span>治癒</span>
                  </li>

                  {
                      this.props.list.map((item,index)=>{
                          return (
                              <li key={index}>
                                  <span>{item.province}</span>
                                  <span>{item.confirm}</span>
                                  <span>{item.dead}</span>
                                  <span>{item.heal}</span>
                              </li> 
                          )
                      })
                  }
              </ul>
          </div>
      )
  }
}
class EchartsTest extends React.Component {
  componentDidMount() {
      // 基於準備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById('echarts'));
      // 繪製圖表
      myChart.setOption({
          title: { text: 'ECharts 中國疫情' },
          tooltip: {},
          xAxis: {
              data: province
          },
          yAxis: {},
          series: [{
              name: '確診',
              type: 'bar',
              data: num
          }]
      });
  }
  render() {
      return (
          <div id="echarts" style={{ width: '80vw', height: "80vh" }}></div>
      );
  }
}
class Emap extends React.Component{
    constructor(props){
        super(props)
    }
    componentDidMount(){
        var myChart = echarts.init(document.getElementById('echartsmap'));
        myChart.showLoading();
        myChart.hideLoading();
        echarts.registerMap('China', geoJson);
        let option={
            title: {
                text: '中國疫情圖',
                subtext: '數據來自163',
                sublink: 'https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list'
            },
            dataRange: {//分段標色
                x: 'left',
                y: 'center',
                splitList: [
                {start: 2000, label: '2000以上', color: 'rgb(50,0,50)'},
                {start: 1000, end: 2000, label: '1000-2000', color: "rgb(100,50,30)"},
                {start: 500, end: 1000, label: '500-1000', color:' rgb(200,50,100)'},
                {start: 200, end: 500, label: '200-500', color: 'rgb(200,100,100)'},
                {start: 50, end: 200, label: '50-200', color:' rgb(255,100,100)'},
                {start: 10, end: 50, label: '10-50', color: 'rgb(255,255,100)'},
                {start: 1, end: 10, label: '0-10', color:' rgb(255,255,200)'},
                {start: 0, end: 1, label: '0', color:' rgb(255,255,255)'}
                ]},
            tooltip: {},
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '確診',
                    type: 'map',
                    mapType: 'china', // 自定義擴展圖表類型
                    label: {
                        show: true
                    },
                    data: this.props.map
                }
            ]
        };
        myChart.setOption(option);
    
    }
    render() {
        return (
            <div id="echartsmap" style={{ width: '80vw', height: "80vh" }}></div>
        );
    }
}
ReactDOM.render(
  <div>
  <Blist list={prok}></Bili>
  <EchartsTest />
  <Emap map={map}/>
  </div>,
  document.querySelector('#root')
)