Echart中國(guó)地圖更換背景圖的方法示例

更新時(shí)間：2022年03月10日 10:53:10 作者：念念不望必有回響

本文主要介紹了Echart中國(guó)地圖更換背景圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

需求

ui設(shè)計(jì)稿給了一張下面這張圖，背景圖用線條畫出來的，心里也是...，沒辦法也是要實(shí)現(xiàn)出來。

解題思路

1.思路一

在canvas外層添加一個(gè)div背景圖用上面的圖片，然后把map地圖背景圖調(diào)成透明，這種方法有很大問題，就是后面怎么做hover顯示不同的省份，怎么做縮放呢，難不成還要監(jiān)聽canvas的組件事件來縮放div，所以果斷放棄。

2.思路二

仔細(xì)觀察這張圖是不是有規(guī)律的，它是一個(gè)一個(gè)小方格組成的就像貼地板磚一樣，那我是不是可以利用地圖的紋理來做文章,經(jīng)過查找Echart api 正好有設(shè)置紋理的配置，贊。

解題方法

1.標(biāo)準(zhǔn)動(dòng)作一

先找ui切個(gè)"地板磚"，地板轉(zhuǎn)如下圖 (ps:地板磚有點(diǎn)小哈)

2.標(biāo)準(zhǔn)動(dòng)作二

在代碼html里面增加img標(biāo)簽設(shè)置圖片為切好的地磚

  <div class="graph-chart-wrap">
    <div class="graph-chart" ref="graph"></div>
    <img ref="image" style="width:10px"  v-show="false" src="/assets/image/public/repeat2.png" alt />
  </div>

在定義options的上面獲取img

   const dom = this.$refs["image"];

配置options

     geo: {
        map: 'china',
        show: true,
        roam: true,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        type: "map",
        geoIndex: "1",
        zoom: 1.2,
        itemStyle: {
          normal: {
            areaColor: {
              image: dom, // 這里是引用上面的img html
              repeat: "repeat" // 地板是重復(fù)鋪貼嗎
            },
            borderColor: "rgba(0,0,0,0.2)"
          },
          emphasis: {
            areaColor:'#69a5ff',
            color: "#fff"
          },
          label: {
            show: false
          },
          shadowColor: 'rgba(0, 0, 0, 1)',
          shadowBlur: 100
        }
      },

全部代碼

<template>
  <div class="graph-chart-wrap">
    <div class="graph-chart" ref="graph"></div>
    <img ref="image" style="width:10px"  v-show="false" src="../../../../assets/image/public/repeat2.png" alt />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { getTreemap } from '@/api/home';
import { fontSize } from '@/utils/index';
const echartMapJSON = require('@/assets/map/china.json');


@Component({
  name: 'graph',
  components: {}
})
export default class extends Vue {
  private dataList = [];
  mounted() {
    this.getTreemap();

    setInterval(() => {
      this.getTreemap();
    }, 60000);
    this.createChart();
  }

  private async getTreemap() {
    const res = await getTreemap();
    if (res && res.data.code === 200) {
      this.dataList = res.data.data;
    }
  }

  private createChart() {
    const GeoCoordMap: any = {
      北京市: [116.4551, 40.2539],
      遼寧: [123.1238, 42.1216],
      重慶: [108.384366, 30.439702],
      浙江: [119.5313, 29.8773],
      福建: [119.4543, 25.9222],
      廣東: [113.12244, 23.009505],
      上海: [121.4648, 31.2891]
    };
    const data = [
      { name: '北京', value: 199 },
      { name: '天津', value: 42 },
      { name: '河北', value: 102 },
      { name: '山西', value: 81 },
      { name: '內(nèi)蒙古', value: 47 },
      { name: '遼寧', value: 67 },
      { name: '吉林', value: 82 },
      { name: '黑龍江', value: 123 },
      { name: '上海', value: 24 },
      { name: '江蘇', value: 92 },
      { name: '浙江', value: 114 },
      { name: '安徽', value: 109 },
      { name: '福建', value: 116 },
      { name: '江西', value: 91 },
      { name: '山東', value: 119 },
      { name: '河南', value: 137 },
      { name: '湖北', value: 116 },
      { name: '湖南', value: 114 },
      { name: '重慶', value: 91 },
      { name: '四川', value: 125 },
      { name: '貴州', value: 62 },
      { name: '云南', value: 83 },
      { name: '西藏', value: 9 },
      { name: '陜西', value: 80 },
      { name: '甘肅', value: 56 },
      { name: '青海', value: 10 },
      { name: '寧夏', value: 18 },
      { name: '新疆', value: 180 },
      { name: '廣東', value: 123 },
      { name: '廣西', value: 59 },
      { name: '海南', value: 14 }
    ];
    const colorList = [
      '#5776DE','#709EED','#6434D5','#E26395','#E8A057','#6434D5'
    ]

    const convertData = (data: any) => {
      let res = [];
      for (let i = 0; i < data.length; i++) {
          const geoCoord = GeoCoordMap[data[i].name];
          if (geoCoord) {
              res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
              });
          }
      }
      return res;
    };

    const dom = this.$refs["image"];

    let options: any = {
      title: {
        top: 20,
        // text: '“會(huì)員活躍度” - 山東省',
        subtext: '',
        x: 'center',
        textStyle: {
          color: '#fff'
        }
      },  
      tooltip: {
        trigger: 'item',
        backgroundColor:'#fff',
        className: 'echarts-tooltip echarts-tooltip-dark echarts-tooltip-user',
        borderColor:'#e6e6e6',
        padding: 4,
        triggerOn:'click'
      },
      geo: {
        map: 'china',
        show: true,
        roam: true,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        type: "map",
        geoIndex: "1",
        zoom: 1.2,
        itemStyle: {
          normal: {
            areaColor: {
              image: dom,
              repeat: "repeat"
            },
            borderColor: "rgba(0,0,0,0.2)"
          },
          emphasis: {
            areaColor:'#69a5ff',
            color: "#fff"
          },
          label: {
            show: false
          },
          shadowColor: 'rgba(0, 0, 0, 1)',
          shadowBlur: 100
        }
      },
      series: [
        {
          symbolSize: 5,
          label: {
            normal: {
              formatter: '',
              position: 'right',
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#fff'
            }
          },
          name: 'light',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: convertData(data)
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          symbol: 'circle',
          symbolSize: [8, 8],
          itemStyle: {
            normal: {
              color:function(params:{ dataIndex: any }){
                return colorList[params.dataIndex]
              }
            }
          },
          data: convertData(data),
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          zlevel: 1,
          tooltip: {
            formatter: function (params: { value: any[]; name: any; dataIndex: number }) {
              return `<div style="width: aoto;text-align:center;line-height:28px; height: auto;color:#fff;font-size: 10px; padding:5px;margin: 0;background:${colorList[params.dataIndex]};border-radius:10px">
              <p style="line-height:20px;padding:0;margin:0">${params.name}工廠線</p>
              <p style="line-height:20px;padding:0;margin:0">今日實(shí)時(shí)生產(chǎn)總數(shù)</p>
              <p style="line-height:20px;padding:0;margin:0">${params.value[2]}</p>
              </div>`
            },
            position:'top',
            backgroundColor:'#fff'
          }
        },
      ]
    };
    const graphChart = echarts.init(this.$refs.graph as HTMLCanvasElement);
    echarts.registerMap('china', echartMapJSON);
    graphChart.setOption(options);
    let len = -1;
    setInterval(() => {
      const dataLen = colorList.length;
      len = (len + 1) % dataLen;
      graphChart.dispatchAction({
        type: 'hideTip'
      });
      graphChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 1,
        dataIndex: len
      });
    }, 2000);
  }
}
</script>