Echarts-中国大地图

<template>
    <div class="map">
        <div id="map" ref="chart1" style="width:777px;height:527px"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
// import jsonp from 'jsonp'
// import 'echarts/map/js/china'// 引入中国地图
import './china'// 引入中国地图

export default {
  data() {
    return {
      myChart: ''
    }
  },
  mounted() {
    this.demo()
  },
  methods: {
    demo() {
      // this.getData()
    // 基于准备好的dom，初始化echarts实例
    // this.myChart = echarts.init(document.getElementById('chart1')); //放在mounted中，初始化页面
      const myChart = echarts.init(document.getElementById('map'))
      const option = {
        // 头部标题
        // title: {
        //   // text: 'vue实现疫情地图',
        //   textStyle: {
        //     // color: '#9c0505',
        //     color: 'blue',
        //     fontWeight: 'bolder',
        //     fontSize: '25'
        //   },
        //   left: 'center' // 居中
        // },
        tooltip: {
          trigger: 'item', // 类型
          // formatter: '地区:{b}<br/>确诊:{c}'// {a}系列名称,{b}地区名称,{c}合并数值
          //formatter: '地区:{b}'// {a}系列名称,{b}地区名称,{c}合并数值
          formatter: function(params) {
            const showname = params
            if (showname.data === '' || showname.data === undefined) {
              return ''
            }
            return showname.data.orgName
          }
        },
        series: [
          {
            type: 'map',
            map: 'china', // 后边还可以写成省份
             data: [
              { name: '北京', value: 200 },
              { name: '湖北', value: 20000 },
              { name: '湖南', value: 10000 },
              { name: '山东', value: 1200, orgName: '山东工会' },
              { name: '浙江', value: 8000 }
            ],
            selectedMode: false, // 关闭-点击地图时显示黄色-!!!!!!!
            label: { // 显示省份名称的样式
              show: true,
              color: '#566273',
              fontSize: 12
              // backgroundColor: 'yellow'
              // offset: [10, 0]
            },
            zoom: 1, // 地图缩放比例
            itemStyle: {
              areaColor: '#d7ecf7', // 默认地图区域的颜色-!!!
              borderColor: '#51BAE4'
            },
            emphasis: { // 高亮状态下的设置
              label: { // 显示省份名称的样式
                color: '#fff',
                fontSize: 12
              },
              itemStyle: { // 点击地图区域时的颜色-!!!!
                areaColor: '#51BAE4'
                // areaColor: 'red'
              }
            }
          }
        ]
      }
      // 地图点击每一块区域事件
          myChart.on('click', function (params) {
        console.log(params)
        // if (params.data === '' || params.data === undefined) {
        //   // this.orgId = ''
        //   // return
        // }
        // his.orgId = 'aaa'
        // 逻辑控制
      })
      // this.myChart = echarts.init(this.$refs.chart1) // 放在mounted中，初始化页面调用
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    // 真实数据 https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447
    //   jsonp('url',function(){})
    // getData() {
    //   jsonp('http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447', (err, data) => {
    //     //    console.log(data.data.list)
    //     // map()js循环遍历的方法,forEach()是有返回值的,map()四没有返回值的
    //     var lists = data.data.list.map(item => {
    //       return { name: item.name, value: item.value }
    //     })
    //     console.log(lists)
    //     option.series[0].data = lists
    //     console.log(option.series[0].data)
    //     // 使用刚指定的配置项和数据显示图表。
    //     this.myChart.setOption(option) // 再次调用
    //   })
    // }

  }
}
</script>

<style>

</style>

【Echarts】关于关闭点击地图时显示黄色的方法

参考次地址