Use echarts based vue epidemic map

www.echartsjs.com

What is echarts :
ECharts, a pure Javascript charting library can run smoothly on the PC and mobile devices, is compatible with the vast majority of current browsers (IE8 / 9/10/11 , Chrome, Firefox, Safari , etc.), the underlying dependence lightweight Canvas library ZRender, intuitive, vivid, interactive, highly personalized custom data visualization charts.

ECharts 3 is joined to a richer and more interactive features visual effects, and the mobile terminal did depth optimization.

Two steps:

The first step: initialize echarts need to have a width and height of the box

<template>
  <div class="hello">
	  <!-- 初始化echarts需要个有宽高的盒子 -->
   <div  ref='mapbox' style='height:400px;width:600px;'>
   </div>
   
  </div>
</template>

Step two: option

Official website can be seen in the picture are in accordance with the general option to display the

import echarts from 'echarts'
	const option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'z
    }]
};
export default {
  name: 'HelloWorld',
  mounted(){
      //初始化，需要提供一个有固定宽高的盒子
	  //此处在前div已经
	  let mycharts = echarts.init(this.$refs.mapbox);
	  mycharts.setOption(option)
  },
  
}

How to display a map

Vue build a project and import jsonp and echarts,
for two reasons, first of all file formats we use Sina interface is jsonp, secondly we use echarts to quickly draw the map.
Included in echarts in china.js, that is the map of China, so there can be introduced directly into a js file, then they have to refer api,
the following is china.js position

Sina data interface: (jsonp)

https://interface.sina.cn/news/wap/fymap2020_data.d.jsonp?_=1580892522427

Get the data interface, we can find in the data data.list.

ok this figure is purely developed today flaw, not the eslint shut off when the building vue, causing the entire development process is not smooth, we know everything drops.

To remind ourselves that the next development vue, next time remember not to open eslint, too uncomfortable uh uh uh.

Core code

export default {
  name: 'HelloWorld',
  mounted(){
	  this.getData();
	  this.mycharts = echarts.init(this.$refs.mapbox);
	  this.mycharts.setOption(option);
  },
	  
  methods:{
	  getData(){
		  jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.jsonp?_=1580892522427',{},(err,data)=>{
			  if(!err){
				  //代表请求数据成功
				  console.log(data);
				  let list =data.data.list.map(item=>({name:item.name,value:item.value}))
				  option.series[0].data=list;
				  this.mycharts.setOption(option);
			  }
		  })
	  }
  }
  
}

final effect:

Attached map option

//使用地图需要注册
const option = {
	title:{
		text:"yokei",
		link:"https://blog.csdn.net/qq_43277404",
		subtext:"养胃鸭",
		sublink:"https://blog.csdn.net/qq_43277404",
	},
	series:[{
		name:'累计确诊',
		type:'map',
		map:'china',//通知echarts渲染地图
		//控制对应地图的汉字
		label:{
			show:true,
			color:'black',//地区名的颜色
			fontSize:10
		},
		itemStyle:{
			areaColor:'#eee',
			
		},
		zoom:1.2,//控制地图的方法缩小
		emphasis:{
			//控制鼠标划过后的背景色
				label:{
				color:'#fff',
	            fontSize:12
			},
			itemStyle:{
				areaColor:'#83b5e7'
			}
		},
		data:[],//后台数据
	}],
	visualMap:[{
		type:'piecewise',
		show:true,
		pieces:[
		{min:10000},
		{min:1000,max:9999},
		{min:100,max:999},
		{min:10,max:99},
		{min:1,max:9},
		]
	}],
	tooltip:[{
		trigger:'item'
	}]
	
	
}