【续】echarts疫情地图的单跨域proxy代理方法获取外部url的json

‘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 (

中国病例

• 地区

  确诊

  死亡

  治愈

  {

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

  // ]},

  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 (

  );

  css

  1，盒模型
  2，如何实现一个最大的正方形
  3，一行水平居中，多行居左
  4，水平垂直居中
  5，两栏布局，左边固定，右边自适应，左右不重叠
  6，如何实现左右等高布局
  7，画三角形
  8，link @import导入css
  9，BFC理解

  

  js

  1，判断 js 类型的方式
  2，ES5 和 ES6 分别几种方式声明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  

  明变量
  3，闭包的概念？优缺点？
  4，浅拷贝和深拷贝
  5，数组去重的方法
  6，DOM 事件有哪些阶段？谈谈对事件代理的理解
  7，js 执行机制、事件循环
  8，介绍下 promise.all
  9，async 和 await,
  10，ES6 的 class 和构造函数的区别
  11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
  12，介绍一下rAF(requestAnimationFrame)
  13，javascript 的垃圾回收机制讲一下,
  14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

  [外链图片转存中…(img-zudTNkd2-1718728855098)]