vue + echarts 实现疫情地图

爱被打了一巴掌 2023-03-12 09:20 63阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]最近几天整理自己写的 demo 时，发现了这个 demo, 就把里面的知识点看了一下，希望对想学的小伙伴有一些帮助

主要是借鉴 echarts

<template>
        <div class="hello">
          
          <div class="content" ref="mapbox"></div>
        </div>
    </template>
    
    <script>
    import echarts from 'echarts'
    import 'echarts/map/js/china.js'
    import jsonp from 'jsonp'
    const option = { 
      title: { 
        text: "中国疫情地图",
        link: 'https://www.baidu.com',
        subtext: "shinuia",
        sublink: "https://www.baidu.com"
      },
      series: [{ 
        name: '确诊人数',
        type: 'map',
        map: 'china',
        label: { 
          show: true,
          color: '#ffffff',
          fontSize: 8
        },
        itemStyle: { 
          areaColor: '#eee'
        },
        roam: true,
        zoom: 1.2,
        emphasis: { 
          label: { 
            color: '#fff',
            fontSize: 12,
          },
          itemStyle: { 
            areaColor: '#83b5e7'
          }
        },
        data: []
      }],
      // {name: xxx, value: xxx}
      visualMap: [{ 
        type: 'piecewise',
        show: true,
        pieces: [
          {  min: 10000 },
          {  min: 1000, max: 9999 },
          {  min: 100, max: 999},
          {  min: 10, max: 99 },
          {  min: 1, max: 9 }
        ],
        // align: 'right'
        // showLabel: false
        inRange: { 
          symbol: 'rect',
          color: [
            '#ffc0b1',
            '#9c0505',
          ]
        },
        itemWidth: 20
      }],
      tooltip: { 
        trigger: 'item'
      },
      toolbox: { 
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: { 
          dataView: {  readOnly: false },
          restore: { },
          saveAsImage: { }
        }
      }
    }
    
    export default { 
      name: 'HelloWorld',
      mounted () { 
        this.getData()
        this.mapcharts = echarts.init(this.$refs.mapbox);
        this.mapcharts.setOption(option)
      },
      methods: { 
        getData () { 
          jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', { }, (err, data) => { 
            if (!err) { 
              // eslint-disable-next-line no-console
              console.log(data)
              let list = data.data.list.map(item => (
                // eslint-disable-next-line no-console
                // console.log(item),
                { 
                name: item.name,
                value: item.value,
                susNum: item.susNum
              }))
              option.series[0].data = list
              this.mapcharts.setOption(option)
            }
          })
        }
      }
    }
    </script>
    
    
    <style scoped>
    .content { 
      width: 1500px;
      height: 638px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    </style>

主要的代码就这些。

项目目录如下

![在这里插入图片描述][20200515061931672.png_pic_center]

###### 完整的项目代码放在了我的 [Gitee ][Gitee] 上面，有兴趣的小伙伴可以看看 ######

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][20201130111531649.jpg_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/e8e036947db14a3b9b07706d293e74b5.png
[20200515061931672.png_pic_center]: /images/20230312/38568dda5330445ca353c2a1857cc561.png
[Gitee]: https://gitee.com/suiboyu/epidemic-map
[20201130111531649.jpg_pic_center]: /images/20230312/5a95c717bf8c4de49d654143b1be91ad.png