vue使用Echarts繪制地圖完整步驟

更新時(shí)間：2023年09月25日 09:38:26 作者：shmilynn_

這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個(gè)基于JavaScript的開源可視化圖表庫(kù),提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖,用于統(tǒng)計(jì)的盒形圖,需要的朋友可以參考下

一、在vue中引入Echarts

這個(gè)可以看Echarts官方文檔，按照步驟一步一步來就可以了

Echarts文檔地址

//1.安裝Echarts
npm install echarts --save
//2.局部引入
import * as echarts from 'echarts';
//3. 基于準(zhǔn)備好的dom，初始化echarts實(shí)例，此處我們也可以通過ref來獲取dom
//通常我們封裝一個(gè)函數(shù)來獲取dom和繪制Echarts然后在mounted這個(gè)鉤子里去調(diào)用
var myChart = echarts.init(document.getElementById('main'));
//4. 繪制圖表 
myChart.setOption({
});

二、下載并引入china.json文件

因?yàn)槲覀兝L制的是中國(guó)地圖，所以需要到china.json的數(shù)據(jù),我們?cè)诮M件中引入并使用

有需要的可以上我的資源去免費(fèi)下載，

注意修改成自己的路徑，此處echarts和china.json必須全部正確引入

import geoJson from '@/utils/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)

三、準(zhǔn)備html容器、css中給圖表需要的寬高

這里用到了elementui的布局，需要的自行引入

這部分大家就按照自己需要的寬高去設(shè)定就可以了

  <div class="managingPatientSize">
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :span="23">
        <div id="china-map"></div>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>

.managingPatientSize {
  width: 100%;
  height: 100%;
  // background-color: #111b41;
  color: #fff;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      position: relative;
      #china-map {
        height: 100%;
      }
    }
  }
}

四、完整代碼

這里代碼直接cv放在組件里引入就可以看到效果，數(shù)據(jù)都是死的，根據(jù)實(shí)際需要去改動(dòng)就可以了

代碼是什么意思看注釋去修改。

這里我使用自定義png圖片去繪制散點(diǎn)，就不能修改漣漪特效的顏色了，有會(huì)的兄弟可以評(píng)論交流一下

<template>
  <div class="managingPatientSize">
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :span="23">
        <div id="china-map"></div>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>
</template>
<script>
import geoJson from '@/utils/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)
export default {
  name: 'ChinaMap',
  data () {
    return {
      provinceInfo: [
        {
          name: "北京",
          oredrNum: 599,//訂單數(shù)量
          goodsNum: 599,//貨品數(shù)量
        },
        {
          name: "上海",
          oredrNum: 142,
          goodsNum: 599,
        },
        {
          name: "黑龍江",
          oredrNum: 44,
          goodsNum: 599,
        },
        {
          name: "深圳",
          oredrNum: 92,
          goodsNum: 599,
        },
        {
          name: "湖北",
          oredrNum: 810,
          goodsNum: 599,
        },
        {
          name: "四川",
          oredrNum: 453,
          goodsNum: 599,
        },
        {
          name: "新疆",
          oredrNum: 36,
          goodsNum: 31,
        },
        {
          name: "福建",
          oredrNum: 106,
          goodsNum: 30211111,
        },
      ],
    }
  },
  methods: {
    drawCharts () {
      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      var chinaMap = echarts.init(document.getElementById("china-map"));
      window.onresize = chinaMap.resize; // 窗口或框架被調(diào)整大小時(shí)執(zhí)行chinaMap.resize
      chinaMap.setOption({
        // 進(jìn)行相關(guān)配置
        tooltip: {
          // 鼠標(biāo)移到圖里面的浮動(dòng)提示框
          backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色
          borderColor: 'rgba(0,0,0,0)',//邊框夜色
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'//文字顏色
          },
          //自定義提示框自動(dòng)調(diào)用函數(shù)
          formatter: function (params) {
            let showname = params;
            return (
              `
                <div style='width:100%;height:60px'>
                    <p style="font-size:12px" >${showname.data ? showname.data.name : '暫無信息'}</p>
                    <p style="font-size:12px" >訂單總數(shù):${showname.data ? showname.data.oredrNum : '暫無信息'}</p>
                    <p style="font-size:12px">貨品數(shù)量:${showname.data ? showname.data.goodsNum : '暫無信息'}</p> 
              </div>
              `
            );
          }
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["#fd7b78"],
        },
        geo: {
          // 這個(gè)是重點(diǎn)配置區(qū)
          map: "china", // 表示中國(guó)地圖
          // roam: true, //是否允許放大
          label: {
            normal: {
              show: false, // 是否顯示對(duì)應(yīng)地名
              textStyle: {
                color: "#fd7b88", //對(duì)應(yīng)地名顏色
              },
            },
          },
          //點(diǎn)擊變色
          select: {
            itemStyle: {
              areaColor: "#fd7b88", //點(diǎn)擊之后的省份顏色
            },
          },
          itemStyle: {
            normal: {
              //正常狀態(tài)下的地圖背景色
              borderColor: "#fff",
              borderWidth: "0.5",
              color: new echarts.graphic.LinearGradient( // 漸變色
                0,
                0,
                1,
                0, // 漸變色的起止位置, 右/下/左/上
                [
                  // offset 位置
                  { offset: 0.8, color: '#f2aca0' },
                  { offset: 0, color: '#fd7b78' }
                ]
              ),
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,//聚焦時(shí)候的陰影范圍
              borderWidth: 0,
              shadowColor: "#f04b30",//聚焦時(shí)候的陰影顏色
              // 鼠標(biāo)放上去地圖區(qū)域背景顏色
              areaColor: '#fd7b78',//聚焦之后的顏色
              borderWidth: 0
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 對(duì)應(yīng)上方配置
          },
          {
            // name: "啟動(dòng)次數(shù)", // 浮動(dòng)框的標(biāo)題
            type: "map",
            geoIndex: 0,
            data: this.provinceInfo
          },
        ],
      });
      // 地圖打點(diǎn)-----
      var cityData = [
        {
          name: "北京",
          oredrNum: 599,//訂單數(shù)量
          goodsNum: 599,//貨品數(shù)量
        },
        {
          name: "天津",
          ename: "天津",
        },
        {
          name: "上海",
          oredrNum: 142,
          goodsNum: 599,
        },
        {
          name: "重慶",
          ename: "重慶",
        },
        {
          name: "河北",
          ename: "河北",
        },
        {
          name: "河南",
          ename: "河南",
        },
        {
          name: "云南",
          ename: "云南",
        },
        {
          name: "遼寧",
          ename: "遼寧",
        },
        {
          name: "黑龍江",
          oredrNum: 44,
          goodsNum: 599,
        },
        {
          name: "湖南",
          ename: "湖南",
        },
        {
          name: "安徽",
          ename: "安徽",
        },
        {
          name: "山東",
          ename: "山東",
        },
        {
          name: "新疆",
          oredrNum: 1,//訂單數(shù)量
          goodsNum: 599,//貨品數(shù)量
          ename: "新疆",
        },
        {
          name: "江蘇",
          ename: "江蘇",
        },
        {
          name: "浙江",
          value: 3,
          ename: "浙江",
        },
        {
          name: "江西",
          ename: "江西",
        },
        {
          name: "湖北",
          oredrNum: 810,
          goodsNum: 599,
        },
        {
          name: "廣西",
          ename: "廣西",
        },
        {
          name: "甘肅",
          ename: "甘肅",
        },
        {
          name: "山西",
          ename: "山西",
        },
        {
          name: "內(nèi)蒙古",
          ename: "內(nèi)蒙古",
        },
        {
          name: "陜西",
          ename: "陜西",
        },
        {
          name: "吉林",
          ename: "吉林",
        },
        {
          name: "福建",
          oredrNum: 106,
          goodsNum: 30211111,
        },
        {
          name: "貴州",
          ename: "貴州",
        },
        {
          name: "廣東",
          value: 53,
          ename: "廣東",
        },
        {
          name: "青海",
          ename: "青海",
        },
        {
          name: "西藏",
          ename: "西藏",
        },
        {
          name: "四川",
          oredrNum: 453,
          goodsNum: 599,
        },
        {
          name: "寧夏",
          ename: "寧夏",
        },
        {
          name: "海南",
          ename: "海南",
        },
        {
          name: "臺(tái)灣",
          ename: "臺(tái)灣",
        },
        {
          name: "香港",
          ename: "香港",
        },
        {
          name: "澳門",
          ename: "澳門",
        },
      ];
      const geoCoordMap = {
        廣東: [113.75, 23.04,],
        黑龍江: [128.34, 47.05],
        北京: [116.40, 40.40],
        新疆: [86.61, 40.79,],
        內(nèi)蒙古: [112.17, 42.81],
        青海: [97.07, 35.62],
        西藏: [89.13, 30.66],
      }
      this.convertData = (data) => {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),//將上面數(shù)組的value添加到經(jīng)緯度后面
              oredrNum: data[i].oredrNum ? data[i].oredrNum : '暫無數(shù)據(jù)',
              goodsNum: data[i].goodsNum ? data[i].goodsNum : '暫無數(shù)據(jù)',
            });
          }
        }
        return res;
      };
      this.getMapChart(cityData);
    },
    //處理漣漪特效的函數(shù)
    getMapChart (data) {
      var myChart = this.$echarts.init(document.getElementById("china-map"));
      var option = {
        tooltip: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "effectScatter",//圖例類型
            coordinateSystem: "geo",//使用geo地圖
            symbol: "image://data:image/png;base64,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",//圖例樣式
            // symbol: "image://data:image/png;base64,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",//圖例樣式
            showEffectOn: "emphasis",//漣漪特效何時(shí)觸發(fā)
            symbolSize: 20,//圖例大小,
            symbolOffset: [0, -10],
            rippleEffect: {//特效設(shè)置
              scale: 2.5,
              color: "rgba(207, 55, 55, 1)",
              number: 3
            },
            showEffectOn: "render",
            data: this.convertData(data),
          },
        ],
      };
      myChart.on("click", (params) => {
      });
      myChart.setOption(option);
      window.onresize = () => {
        myChart.resize();
      }
    },
  },
  mounted () {
    this.drawCharts();
  }
}
</script>
<style lang="scss" scoped>
.managingPatientSize {
  width: 100%;
  height: 100%;
  // background-color: #111b41;
  color: #fff;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      position: relative;
      #china-map {
        height: 100%;
      }
    }
  }
}
</style>