vue集成echarts，vue+echarts实现中国地图和河南省地图

安装echarts

npm install echarts -D

配置echarts

在项目src目录下main.js文件中加入配置：

import echarts from 'echarts'

Vue.use(echarts)

使用

画一个中国地图：

<template>
  <div id="echartId" class="o-echarts"></div>
</template>

<script>
  import echarts from 'echarts'
  import JSON from 'echarts/map/json/china.json'
    export default {
        name: "ChinaList",
        data(){
            return{
                option: {
                    title: {    //表头
                        text: '全国疫情累计确诊数汇总',
                        subtext: '最新疫情病例数量显示',
                        top: '3%',
                        left: '5%',
                        textStyle: {  // 文字样式
                            fontSize: 30,
                            fontWeight: 300,
                            color: 'green'
                        }
                    },
                    tooltip: {   // 鼠标悬浮时显示的内容
                        padding: 10,
                        backgroundColor: 'rgba(0,0,0,0.7)',
                        borderRadius: 8,
                        formatter: params => {
                            return `<div>
                                        ${params.data.name}：<br/>
                                        累计确诊人数->${params.data.value}<br/>
                                        当前确诊人数->${params.data.obj}<br/>
                                        疑似病例人数->${params.data.suspectedCount}<br/>
                                        治愈人数->${params.data.curedCount}<br/>
                                        死亡人数->${params.data.deadCount}<br/>
                                    </div> `;  //鼠标悬浮数据
                        }
                    },
                    toolbox: { // 右侧复位下载
                        show: true,
                        orient: "vertical",
                        right: "20",
                        top: "center",
                        feature: {
                            mark: { show: true },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        top: '9%',
                        left: '5%',
                        icon: 'circle',
                        data: [],
                        selectedMode: 'single',
                        selected: {},
                        itemWidth: 12,
                        itemHeight: 12,
                        itemGap: 30,
                        inactiveColor: '#b6d7ff',
                        textStyle: {
                            color: '#ec808d',
                            fontSize: 14,
                            fontWeight: 300,
                            padding: [0, 0, 0, 15]
                        }
                    },
                    visualMap: {    // 左侧小导航图标
                        //min: 0,
                        //max: 500,
                        show: true,
                        //splitNumber: 5,
                        splitList: [
                            { start: 1000 },
                            { start: 500, end: 1000 },
                            { start: 100, end: 500 },
                            { start: 50, end: 100 },
                            { start: 0, end: 50 }
                        ],
                        color: [
                            "#70161D",
                            "#CB2A2F",
                            "#E55A4E",
                            "#F59E83",
                            "#FDEBCF"
                        ],
                        /*inRange: {
                            color: ['#FDEBCF', '#F59E83', '#E55A4E', '#CB2A2F', '#70161D']//.reverse()
                        },*/
                        textStyle: {
                            color: '#000000'
                        }
                    },
                    geo: {
                        map: '中国',
                        label: {
                            normal: {
                                show: true,
                                color: '#000000'
                            },
                            emphasis: {
                                show: true,
                                color: '#000000'
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#8db200',
                                borderColor: '#6367ad',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#F3FE10' // hover效果
                            }
                        },
                        left: '15%',
                        right: '0%',
                        top: '5%',
                        bottom: '5%'
                    },
                    series: [{
                        name: '累计确诊数汇总', //系列名称
                        type: 'map',  //地图
                        geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                        data: []
                    }]
                }
            }
        },
        mounted() {
            this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{
                console.log(result.data.newslist)
                let str = result.data.newslist.map(pro=>{
                      return {
                          name: pro.provinceShortName,
                          value:pro.confirmedCount, //累计确诊数
                          obj:pro.currentConfirmedCount, //当前确诊数
                          suspectedCount:pro.suspectedCount,//疑似
                          curedCount:pro.curedCount,//治愈
                          deadCount:pro.deadCount //死亡
                      }
                })

                this.option.series[0].data=str
                let echartObj = echarts.init(document.getElementById('echartId'));
                echarts.registerMap('中国', JSON);
                echartObj.setOption(this.option);
            }).catch(err=>{
                console.log(err.message);
            })
        }
    }
</script>

<style scoped>
  .o-echarts {
    width:900px;
    height:550px;
  }
  .show_hover{
    background-color: rgba(75,78,81,.5);
  }
</style>

河南省地图

<template>
  <div id="echartId" class="o-echarts"></div>
</template>

<script>
    import echarts from 'echarts'
    import JSON from 'echarts/map/json/province/henan.json';
    export default {
        data(){
            return{
                option: {
                    title: {
                        text: '河南省确诊数汇总',
                        subtext: '最新疫情病例数量显示',
                        top: '3%',
                        left: '5%',
                        textStyle: {
                            fontSize: 30,
                            fontWeight: 300,
                            color: 'green'
                        }
                    },
                    tooltip: {
                        padding: 10,
                        backgroundColor: 'rgba(0,0,0,0.7)',
                        borderRadius: 8,
                        formatter: params => {
                            return `<div>
                                        ${params.data.name}：<br/>
                                        累计确诊人数->${params.data.value}<br/>
                                        当前确诊人数->${params.data.obj.currentConfirmedCount}<br/>
                                        疑似病例人数->${params.data.obj.suspectedCount}<br/>
                                        治愈人数->${params.data.obj.curedCount}<br/>
                                        死亡人数->${params.data.obj.deadCount}<br/>
                                    </div> `;  //鼠标悬浮数据
                        }
                    },
                    toolbox: { // 右侧复位下载
                        show: true,
                        orient: "vertical",
                        right: "20",
                        top: "bottom",
                        feature: {
                            mark: { show: true },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        top: '9%',
                        left: '5%',
                        icon: 'circle',
                        data: [],
                        selectedMode: 'single',
                        selected: {},
                        itemWidth: 12,
                        itemHeight: 12,
                        itemGap: 30,
                        inactiveColor: '#b6d7ff',
                        textStyle: {
                            color: '#ec808d',
                            fontSize: 14,
                            fontWeight: 300,
                            padding: [0, 0, 0, 15]
                        }
                    },
                    visualMap: {
                        show: true,
                        splitList: [
                            { start: 1000 },
                            { start: 500, end: 1000 },
                            { start: 100, end: 500 },
                            { start: 50, end: 100 },
                            { start: 0, end: 50 }
                        ],
                        color: [
                            "#70161D",
                            "#CB2A2F",
                            "#E55A4E",
                            "#F59E83",
                            "#FDEBCF"
                        ],
                        textStyle: {
                            color: '#000000'
                        }
                    },
                    geo: {
                        map: '河南省',
                        label: {
                            normal: {
                                show: true,
                                color: '#000000'
                            },
                            emphasis: {
                                show: true,
                                color: '#000000'
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#8db200',
                                borderColor: '#6367ad',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#F3FE10' // hover效果
                            }
                        },
                        left: '15%',
                        right: '0%',
                        top: '5%',
                        bottom: '5%'
                    },
                    series: [{
                        name: '累计确诊数汇总', //系列名称
                        type: 'map',  //地图
                        geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                        data: []
                    }]
                }
            }
        },
        mounted() {
            this.$axios.get('/bpi/apis/dst/ncov/spreadQuery',{headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{
                console.log(result.data.newslist)
                let str = result.data.newslist[18].cities.map(pro=>{
                    return {
                        name: pro.cityName+'市',
                        value:pro.confirmedCount, //累计确诊数
                        obj:{
                            currentConfirmedCount:pro.currentConfirmedCount, //当前确诊数
                            suspectedCount:pro.suspectedCount,//疑似
                            curedCount:pro.curedCount,//治愈
                            deadCount:pro.deadCount //死亡
                        }
                    }
                })
                console.log(str)
                this.option.series[0].data=str
                let echartObj = echarts.init(document.getElementById('echartId'));
                echarts.registerMap('河南省', JSON);
                echartObj.setOption(this.option);
            }).catch(err=>{
                console.log(err.message);
            })
        }
    }
</script>

<style scoped>
  .o-echarts {
    width:680px;
    height:550px;
  }
  .show_hover{
    background-color: rgba(75,78,81,.5);
  }
</style>