【續】echarts疫情地圖的單跨域proxy代理方法獲取外部url的json

續react實現echarts的疫情地圖
實現實時獲取外部json
參考：
react axios 跨域訪問一個或多個域名問題
react+axios用node代理解決跨域

首先package.json加一句proxy

  "proxy":"https://c.m.163.com"

然後spider.js中寫一個異步函數（返回的是promis）
axios是需要用npm install axios下載的

let axios = require('axios');
exports.getf= async function(){
    let httpUrl = 'ug/api/wuhan/app/index/feiyan-data-list?t='
    let res = await axios.get(httpUrl+new Date().getTime())
    return res.data;
}

index.js

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';

import {getf} from './spider.js';
//拿到函數之後用異步返回，把渲染的部分都放到then中
getf().then((data)=>{
    let jsonData;
    jsonData=data;
    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 Bili  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: {},
                visualMap:{
                    min : 0,
                    max : 2000,
                    left:'left',
                    top:'bottom',
                    text:['多','少'],
                    inRange:{
                        color:['#F5deB3','#880000']
                    },
                    show:true,
                    calculable: true,
                },
                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>
      <Bili list={prok}></Bili>
      <EchartsTest />
      <Emap map={map}/>
      </div>,
      document.getElementById('root')
    )
});

如圖的時間戳是隨刷新獲取的