vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue Echarts绘制地图

vue使用Echarts绘制地图完整步骤

作者：shmilynn_

这篇文章主要给大家介绍了关于vue使用Echarts绘制地图的相关资料,Apache ECharts一个基于JavaScript的开源可视化图表库,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,需要的朋友可以参考下

大致实现就是这个效果，鼠标滑过的时候会显示该区域的一个信息，加上自定义的显示图标

有需要希望可以帮到各位

一、在vue中引入Echarts 

这个可以看Echarts官方文档，按照步骤一步一步来就可以了

Echarts文档地址

//1.安装Echarts
npm install echarts --save
//2.局部引入
import * as echarts from 'echarts';
//3. 基于准备好的dom，初始化echarts实例，此处我们也可以通过ref来获取dom
//通常我们封装一个函数来获取dom和绘制Echarts然后在mounted这个钩子里去调用
var myChart = echarts.init(document.getElementById('main'));
//4. 绘制图表 
myChart.setOption({
});

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

因为我们绘制的是中国地图，所以需要到china.json的数据,我们在组件中引入并使用

有需要的可以上我的资源去免费下载，

注意修改成自己的路径，此处echarts和china.json必须全部正确引入

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

三、准备html容器、css中给图表需要的宽高

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

这部分大家就按照自己需要的宽高去设定就可以了

  <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放在组件里引入就可以看到效果，数据都是死的，根据实际需要去改动就可以了

代码是什么意思看注释去修改。

这里我使用自定义png图片去绘制散点，就不能修改涟漪特效的颜色了，有会的兄弟可以评论交流一下

<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,//订单数量
          goodsNum: 599,//货品数量
        },
        {
          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 () {
      // 基于准备好的dom，初始化echarts实例
      var chinaMap = echarts.init(document.getElementById("china-map"));
      window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        // 进行相关配置
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色
          borderColor: 'rgba(0,0,0,0)',//边框夜色
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'//文字颜色
          },
          //自定义提示框自动调用函数
          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" >订单总数:${showname.data ? showname.data.oredrNum : '暂无信息'}</p>
                    <p style="font-size:12px">货品数量:${showname.data ? showname.data.goodsNum : '暂无信息'}</p> 
              </div>
              `
            );
          }
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["#fd7b78"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          // roam: true, //是否允许放大
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: "#fd7b88", //对应地名颜色
              },
            },
          },
          //点击变色
          select: {
            itemStyle: {
              areaColor: "#fd7b88", //点击之后的省份颜色
            },
          },
          itemStyle: {
            normal: {
              //正常状态下的地图背景色
              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,//聚焦时候的阴影范围
              borderWidth: 0,
              shadowColor: "#f04b30",//聚焦时候的阴影颜色
              // 鼠标放上去地图区域背景颜色
              areaColor: '#fd7b78',//聚焦之后的颜色
              borderWidth: 0
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            // name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: this.provinceInfo
          },
        ],
      });
      // 地图打点-----
      var cityData = [
        {
          name: "北京",
          oredrNum: 599,//订单数量
          goodsNum: 599,//货品数量
        },
        {
          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,//订单数量
          goodsNum: 599,//货品数量
          ename: "新疆",
        },
        {
          name: "江苏",
          ename: "江苏",
        },
        {
          name: "浙江",
          value: 3,
          ename: "浙江",
        },
        {
          name: "江西",
          ename: "江西",
        },
        {
          name: "湖北",
          oredrNum: 810,
          goodsNum: 599,
        },
        {
          name: "广西",
          ename: "广西",
        },
        {
          name: "甘肃",
          ename: "甘肃",
        },
        {
          name: "山西",
          ename: "山西",
        },
        {
          name: "内蒙古",
          ename: "内蒙古",
        },
        {
          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: "台湾",
          ename: "台湾",
        },
        {
          name: "香港",
          ename: "香港",
        },
        {
          name: "澳门",
          ename: "澳门",
        },
      ];
      const geoCoordMap = {
        广东: [113.75, 23.04,],
        黑龙江: [128.34, 47.05],
        北京: [116.40, 40.40],
        新疆: [86.61, 40.79,],
        内蒙古: [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),//将上面数组的value添加到经纬度后面
              oredrNum: data[i].oredrNum ? data[i].oredrNum : '暂无数据',
              goodsNum: data[i].goodsNum ? data[i].goodsNum : '暂无数据',
            });
          }
        }
        return res;
      };
      this.getMapChart(cityData);
    },
    //处理涟漪特效的函数
    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",//涟漪特效何时触发
            symbolSize: 20,//图例大小,
            symbolOffset: [0, -10],
            rippleEffect: {//特效设置
              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>

总结 

到此这篇关于vue使用Echarts绘制地图的文章就介绍到这了,更多相关vue Echarts绘制地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文