echarts china.js 自定义地图案例分享

最近接到的一个地图自定义样式的开发需求，
1，自定义地图色阶颜色和省边界样式
2，自定义鼠标悬停高亮颜色
3，地图模块显示的数值使用百分比%显示
4，不显示南沙群岛
其实是一个比较简单的地图修改，但是因为一些属性不是很常用所以修改的时候也花费了一些时间，所以发个简书跟大家分享一下

先上实现效果 china.png

标签不多说 🦉🦉🦉

<div id="drawChinese" class="drawChina" />

我们先在所需的Vue文件中引用china，echarts在main.js引用过所以这边就不需要引用了

import 'echarts/map/js/china'

---

data数据，组件默认显示是数值，我们返回的是百分比数据没有%需要我们自己设置一下。
然后需求4是在这部分实现的，最后一行数据我直接把itemStyle插入到了数据中，这只是一种设置方式。
echars应该有设置的属性，但是我没有找到。😅😅😅
但是这也是我开发场景中比较方便的一种解决方式，如果有更好的请大佬分享。🙏🙏🙏

data: [
        { 'name': '浙江', 'value': '13.06' }, { 'name': '广东', 'value': '9.31' },
        { 'name': '江苏', 'value': '8.79' }, { 'name': '山东', 'value': '6.51' },
        { 'name': '河南', 'value': '5.79' }, { 'name': '河北', 'value': '4.86' },
        { 'name': '广西', 'value': '3.56' }, { 'name': '西藏', 'value': '3.54' },
        { 'name': '内蒙古', 'value': '3.48' }, { 'name': '台湾', 'value': '3.34' },
        { 'name': '青海', 'value': '3.15' }, { 'name': '黑龙江', 'value': '3.11' },
        { 'name': '江西', 'value': '2.93' }, { 'name': '山西', 'value': '2.83' },
        { 'name': '重庆', 'value': '2.78' }, { 'name': '湖北', 'value': '2.52' },
        { 'name': '福建', 'value': '2.49' }, { 'name': '吉林', 'value': '2.46' },
        { 'name': '宁夏', 'value': '2.30' }, { 'name': '四川', 'value': '2.02' },
        { 'name': '辽宁', 'value': '1.67' }, { 'name': '香港', 'value': '1.39' },
        { 'name': '湖南', 'value': '1.23' }, { 'name': '澳门', 'value': '1.20' },
        { 'name': '安徽', 'value': '1.17' }, { 'name': '贵州', 'value': '0.91' },
        { 'name': '新疆', 'value': '0.86' }, { 'name': '陕西', 'value': '0.76' },
        { 'name': '天津', 'value': '0.58' }, { 'name': '上海', 'value': '0.54' },
        { 'name': '海南', 'value': '0.35' }, { 'name': '云南', 'value': '0.22' },
        { 'name': '北京', 'value': '0.15' }, { 'name': '甘肃', 'value': '0.14' },
        { 'name': '南海诸岛', 'value': 0, 'itemStyle': { 'normal': { 'opacity': 0 }}}
      ]

---

主体部分直接看代码都是属性的设置修改的部分都加了注释。

 // 绘制地图
    drawChina() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('drawChinese'))
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#FFFFFF',
        title: {
          text: '地域分布',
          top: 14,
          left: 14,
          textStyle: {
            borderColor: '#333333',
            fontWeight: 400,
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            color: '#666666',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: function(params) {
            return params.name + '：' + params.data['value'] + '%'
          }
        },
        // 左侧小导航图标
        visualMap: {
          show: false,
          x: 'left',
          y: 'center',
          min: 0,
          max: 5,
          color: ['#3644BF', '#B7C8FF']
        },
        // 配置属性
        series: [{
          name: '数据',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            normal: {
              show: false // 省份名称
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: { // 未选中状态
              // areaColor: 'red', // 南沙诸岛背景颜色
              borderColor: 'transparent',
              label: {
                show: true// 显示名称
              }
            },
            emphasis: { // 也是选中样式
              areaColor: '#49FFE9',
              shadowColor: 'rgba(0,0,0,0.2)',
              shadowOffsetX: 0, // 阴影水平方向上的偏移距离
              shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
              shadowBlur: 8, // 图形阴影的模糊大小。
              label: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          },
          data: this.data
        }]
      })
    }

---

简书小白，首次分享，大佬见谅！！！