用echarts实现中国疫情地图

效果图：

首先第一步进行安装echarts
npm install echarts --save
然后在main.js中进行导入和添加到vue的原型上。
main.js中的代码如下：

import Vue from 'vue'
import App from './App.vue'
const echarts = require("echarts")
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

然后就是在组件中写代码。
因为渲染得是一个中国地图，所以得在组件中导入一下中国地图相关得JS文件。这里是china.js文件
然后在组件中用一个盒子（div）来存放echarts需要渲染的图像。
组件代码如下：

<template>
  <div id="map"></div>
</template>

<script>
import './china.js'
import jsonp from 'jsonp'
let option = {
                title: {
                    text: "中国疫情分布图",
                    left: 350, //设置标题的距离盒子左边的距离
                    top: 100 //设置标题距离盒子顶部的距离
                },

                series: [
                    {
                        name: "确诊人数", //控制鼠标hover上去显示的固定文本
                        type: "map", //告诉echarts需要渲染一个地图
                        mapType: "china", //告诉echarts要渲染注册的china地图
                        label: {
                            show: true, //控制是否显示省份的名称
                            color: "white" // 设置显示每个省份的字体颜色
                        },
                        itemStyle: {
                            borderColor: "green" //每个省份的边界的颜色
                        },
                        emphasis: { //控制鼠标移入的版块的颜色
                            color: "#fff", //移入该模块的字体颜色
                            itemStyle: {
                                areaColor: "#83b5e7", //鼠标hover到模块上的背景色
                            }
                        },
                        zoom: 1.2, //控制整个地图的缩放倍数
                        data: [] //每个板块的数据
                    }
                ],
                visualMap: [{
                    type: "piecewise", //左下角的分段显示
                    show: true,
                    splitNumber: 4, //显示几个分段
                    pieces: [ //左下角的自定义分段显示
                        {min: 15000},
                        {min: 900, max: 15000},
                        {min: 310, max: 900},
                        {min: 200, max: 310},
                        {min: 0, max: 200}],

                        align: "right", //控制分段标准的文字显示在图片左边还是右边
                        left: 0, //控制自定义分段距离盒子左边的距离
                        top: 550,//控制自定义分段距离盒子顶部的距离
                        inRange: {
                            symbol: "circle", //控制分段图片显示为一个圆圈
                            color: ["#ffc0b1", "#9c0505"] //控制红色到蓝色
                        }
                }],
                tooltip: { //控制鼠标hover上去显示信息
                    trigger: "item",
                    formatter: function(params) { //自定义悬浮窗的显示内容
                        return params.name + "<br/>" + params.seriesName+"："+params.value
                    }
                },
            }
export default {
    name: "chinaMap",
    mounted() {
        this.getData()

         //这一句echarts初始化一定要放在mounted钩子函数执行里或者后面，因为vue的dom更新是在mounted的时候执行完成的
        this.myEcharts = this.$echarts.init(document.getElementById("map"));
    },
    methods: {
        //这里用是网上百度的一个接口，因为跨域的原因，所以用一个JSONP发起网络请求
        getData() {
            jsonp("https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427", {}, (err, data) => {
                if(err) {
                    console.log("错误详情", err);
                    return
                }
                //获取到数据把数据赋值给series中的data，data只需要返回的name（省份）和value（人数）
                    let list = data.data.list.map(item => ({name: item.name, value: item.value}))
                    option.series[0].data = list
                    this.myEcharts.setOption(option)
                }) 
        }
    }
}
</script>

<style scoped>
#map{
    width: 800px;
    height: 800px;
}
</style>

中国地图相关的china.js文件私聊发送