使用echarts基于vue的疫情地图_echarts怎么绘制舆情话题图谱

最新推荐文章于 2025-05-16 23:57:45 发布

2401_84419493

最新推荐文章于 2025-05-16 23:57:45 发布

阅读量499

点赞数 5

文章标签： echarts vue.js 前端

本文链接：https://blog.youkuaiyun.com/2401_84419493/article/details/139940844

版权

什么是echarts：
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
在这里插入图片描述

两步操作：

第一步：初始化echarts需要个有宽高的盒子

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

第二步：option

在这里插入图片描述
官网上可以看出一般的图片都是按照option来显示的

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

地图如何显示

搭建一个vue项目并导入jsonp和echarts，
原因有两点，首先我们采用的新浪接口的文件格式为jsonp，其二我们要用echarts来快速绘制地图。
在echarts中包含china.js，也就是中国地图，所以这里直接引入一个js文件即可，之后要参考api，
以下是china.js的位置
在这里插入图片描述
新浪的数据接口：（jsonp）

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

拿到了数据接口，我们可以找到data.list中的数据。
在这里插入图片描述

ok这个图纯属是今天开发的败笔，在搭建vue时未将eslint关闭掉，导致整个开发流程十分不顺畅，大家都懂滴。
在这里插入图片描述
提醒自己下次开发vue，下一次记得不要开eslint了，太难受了呃呃呃。

核心代码

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);
			  }
		  })
	  }
  }
  
}
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。



也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

### 面试准备



面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。