初始环境设置

    创建好项目后，输入npm install echarts --save安装echart包,安装完成后，打开我们的vue项目。我们可以在项目中的package.json里的dependencies下看是否安装成功。

    在main.js中引入echart

    接着在需要使用echart的组件中继续引用。如果需要使用地图，地图也需要引用哈。
    

基本结构

    echart的使用，大致可以分为4个步骤。
    1.为echarts准备一个具备宽高的DOM。
    2.初始化echarts实例
    3.指定图表的配置项和数据（这是我们构建图表的 核心）
    4.使用指定的配置项和 数据显示图表。

图表配置

建立地理坐标系

    通过配置option，新建一个地理坐标系，地图 类型为“china”。（世界地图 类型为“world”，中国地图类型为“China”，中国各个省的地图省的类型为省名称，例如，map：“湖北省”）

 geo: {
                        map: 'china',
                        
                        itemStyle: { // 定义样式
                            normal: { // 普通状态下的样式
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: { // 高亮状态下的样式
                                areaColor: '#2a333d'
                            }
                        }
                    },

绘制散点图，填充数据

  series: [{
                        name: '确诊数量',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: [{
                            name: '海门',
                            value: [121.15, 31.89, 90]
                        }, {
                            name: '鄂尔多斯',
                            value: [109.781327, 39.608266, 120]
                        }, {
                            name: '招远',
                            value: [120.38, 37.35, 142]
                        }, {
                            name: '舟山',
                            value: [122.207216, 29.985295, 123]
                        }]
                    }]

此时我们已经可以看到散点图了。但移动到散点上时，没有数据展示，难免有些单调。

添加提示框和视觉映射

接下来添加提示框。

   tooltip: {
                         trigger: 'item'
           },

em,有了提示框果然灵动了许多，但是看到的散点都是红色，难免有些难看。为了让数据的表现更加有层次，我们可以加一个视觉映射。

visualMap: {
                        type: 'continuous', // 连续型
                        min: 0, // 值域最小值，必须参数
                        max: 200, // 值域最大值，必须参数
                        calculable: true, // 是否启用值域漫游
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                                // 指定数值从低到高时的颜色变化
                        },
                        textStyle: {
                            color: '#fff' // 值域控件的文本颜色
                        }
                    },

散点的效果调整的差不多了，但移入省份的 时候 ，会有一个 高亮 的效果。像这样

这里可以在geo中添加silent：“true”的设置就可以去除默认高亮。

  geo: {
                        map: 'china',
                        silent: 'true', //
                        itemStyle: { // 定义样式
                            normal: { // 普通状态下的样式
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: { // 高亮状态下的样式
                                areaColor: '#2a333d'
                            }
                        }
                    },

最后看下效果。
（图中数据为模拟数据）

组件部分完整代码

<template>
  <div class="home">
       <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div style="height: 400px; width: 600px;" ref = "chart1"></div>   
  </div>  
</template>

<script>
    import axios from 'axios'
    import echarts from 'echarts'
    import "echarts/map/js/china.js"
    export default {
        name: 'Home',
        data() {
            return {
                list: "2"
            }
        },
        methods: {
            initChart() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.chart1);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "国内疫情"
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    geo: {
                        map: 'china',
                        silent: 'true', //
                        itemStyle: { // 定义样式
                            normal: { // 普通状态下的样式
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: { // 高亮状态下的样式
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    visualMap: {
                        type: 'continuous', // 连续型
                        min: 0, // 值域最小值，必须参数
                        max: 200, // 值域最大值，必须参数
                        calculable: true, // 是否启用值域漫游
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                                // 指定数值从低到高时的颜色变化
                        },
                        textStyle: {
                            color: '#fff' // 值域控件的文本颜色
                        }
                    },
                    series: [{
                        name: '确诊数量',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: [{
                            name: '海门',
                            value: [121.15, 31.89, 90]
                        }, {
                            name: '鄂尔多斯',
                            value: [109.781327, 39.608266, 120]
                        }, {
                            name: '招远',
                            value: [120.38, 37.35, 142]
                        }, {
                            name: '舟山',
                            value: [122.207216, 29.985295, 123]
                        }]
                    }]


                }

                // 使用刚指定的配置项和数据显示图表
                myChart.setOption(option)
            }
        },
        mounted() {
            this.initChart();
        }

    }
</script>


<style scoped>

</style>

码字不易，点个赞呗。