vue+echarts全国疫情地图

相信年底疫情的爆发一直牵动着大家的心，虽然现在大部分地区都已经复工了，但大家还是要注意平时的防护工作。我这边已经复工2周了，可家里还有个室友在家办公，想想还是有点羡慕。

回到主题，今天特地做了个全国疫情图：

首先用vue-cli创建项目，然后还需要安装echarts和jsonp这2个包。（因为数据是新浪的接口，用到的是jsonp的结构，另外用到eslint的注意代码规范哦~~）

我用到的vue还是2.0+版本，直接安装

npm install echarts jsonp

我们直接去hoverworld修改内容

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


<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import jsonp from 'jsonp'
const option = {
  title: {
    // 标题内容
    text: '全国疫情图',
    link: 'https://baidu.com',
    subtext: '123456',
    sublink: 'https://baidu.com'
  },
  series: [{
    name: '确诊人数',
    type: 'map',
    // 告诉echarts渲染一个地图
    map: 'china',
    // 告诉echarts渲染中国地图
    label: {
      // 设置地区汉字
      show: true,
      color: '#333',
      fontSize: 10
    },
    itemStyle: {
      // 地图区域样式
      areaColor: '#eee'
    },
    roam: true,
    // 鼠标滚轮效果
    zoom: 1.2,
    // 地图放大缩小
    emphasis: {
      // 鼠标经过地图和字体样式
      label: {
        color: '#fff',
        fontSize: 12
      },
      itemStyle: {
        areaColor: '#ccc'
      }
    },
    data: []
    // 展示后台给的数据，必须格式（name:xxx;value:xxx）
  }],
  visualMap: [{
    // 区域显示颜色
    type: 'piecewise',
    show: true,
    // splitNumber: 4
    pieces: [
      {min: 10000},
      {min: 1000, max: 9999},
      {min: 100, max: 999},
      {min: 10, max: 99},
      {min: 1, max: 9},
      {max: 0}
    ],
    inRange: {
      // 区域图标样式
      symbol: 'rect',
      color: ['#FFFFFF', '#FFAA85', '#FF7B69', '#CC2929', '#8C0D0D', '#660208']
    }
  }],
  tooltip: {
    // 鼠标放上去显示内容
    trigger: 'item'
  },
  toolbox: {
    // 下载
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: {readyOnly: false},
      restore: {},
      saveAsImage: {}
    }
  }
}



export default {
  name: 'HelloWorld',
  mounted () {
    this.getData()
    this.mycharts = echarts.init(this.$refs.mapbox)
    // 初始化echarts
    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)
          // echarts初始化的前提是dom渲染完成
        }
      })
    }
  }
}
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

到这就好啦！！！新的一年

大家