react实现echarts的疫情地图

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 (

中国病例

• 地区

  确诊

  死亡

  治愈

  {

  this.props.list.map((item,index)=>{

  return (

• {item.province}

  {item.confirm}

  {item.dead}

  {item.heal}

  )

  })

  }

  )

  }

  }

  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 (

  );

  }

  }

  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)'}

  ]},