echarts河南地图

<template>
    <div class="app">
        <div id="map" :style="{ height: '700px', width: '100%' }" ref="myEchart"></div>
    </div>
  
    
  
</template>
 
<script>
    import * as echarts from 'echarts';
    const henanJson = require("./henan.json") 
    export default {
        name: 'dp',
        data(){
            return{
            }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(data) {
                let myChart = echarts.init(document.getElementById('map'));
                echarts.registerMap('henan', henanJson);
                let option = {
                    title: {
                        text: '河南风险等级图',
                        textStyle: {
                            fontSize: "40",
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter:  function(params) {
                            if(!params.value){
                                return '该地区暂无访问量';
                            }
                            return params.seriesName+'<br />'+params.name+'：'+params.value+'分'
                        },
                        confine: true
                    },
                    //配置工具类
                     toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center',
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                },
                                //工具类大小
                                itemSize: 27,
                                itemGap: 30
                            },
                  visualMap: {
                      min: 0,
                      max: 1000,
                      left: 26,
                      bottom: 40,
                      showLabel: !0,
                      text: ["低", "高"],
                      pieces: [{
                          gte: 90,
                          label: "一级（得分≥90）",
                          color: "#FBDB0F"
                      }, {
                          lt: 90,
                          gte: 80,
                          label: "二级（80分≤得分＜90）",
                          color: "#FC7D02"
                      }, {
                          lt: 80,
                          gte: 70,
                          label: "三级（70分≤得分＜80分）",
                          color: "#FD0100"
                      }, {
                        lt: 70,
                          gte: 60,
                          label: "四级（60分≤得分＜70分）",
                          color: "#AA069F"
                      }, {
                          lt: 60,
                          label: "五级（得分＜60分）",
                          color: "#AC3B2A"
                      }],
                      show: true
                  },
                    series: [
                        {
                            name: '',
                            type: 'map',
                            zoom: 1.4,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: "20",
                                    color: "rgba(255, 255, 255, 1)"
                                },
                            },
                            mapType: 'henan', // 自定义扩展图表类型
                            itemStyle: {
                                emphasis: {label: {show: true}},
                                normal:{
                                    label: { 
                                        show: true,
                                        textStyle: {
                                            color: '#444'
                                        }
                                    },
                                }
                            },
                            data: [{name: '郑州市', value: 83.05},
                                   {name: '开封市', value: 67.95},
                                   {name: '洛阳市', value: 79.21},
                                   {name: '平顶山市', value: 80.53},
                                   {name: '安阳市', value: 84.52},
                                   {name: '鹤壁市', value: 90.23},
                                   {name: '新乡市', value: 80.98},
                                   {name: '焦作市', value: 86.98},
                                   {name: '濮阳市', value: 84.40},
                                   {name: '许昌市', value: 60.67},
                                   {name: '漯河市', value: 60.99},
                                   {name: '三门峡市', value: 93.18},
                                   {name: '南阳市', value: 74.21},
                                   {name: '商丘市', value: 75.40},
                                   {name: '信阳市', value: 59.90},
                                   {name: '周口市', value: 83.05},
                                   {name: '驻马店市', value: 87.90},
                                   {name: '济源市', value: 97.21}
                                  ],
                        }
                    ]
                };
                //获取data数据
                myChart.setOption(option);
                //事件监听
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }
 
        }
    }
</script>
<style>
    
    #app {
        width: 100%;
        height: 900px;
    
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>