在vue中使用echars实现上浮与下钻效果

第一步：

在vue项目中安装echars

npm i echars -S

第二步:

main.js配置 这里是全局引入

//引入echars
import echarts from \'echarts\'
Vue.prototype.$echarts = echarts

第三步

直接上代码

<template>
 <div id=\"container\">
  <header>浙江省echars地图</header>
  <div id=\"echarsMap\"></div>
 </div>
</template>
<script>
//引入json
import zhejiang from \"../../../static/zhejiangJson/zhejiang\";
import hangzhou from \"../../../static/zhejiangJson/hangzhou\";
import huzhou from \"../../../static/zhejiangJson/huzhou\";
import jiaxing from \"../../../static/zhejiangJson/jiaxing\";
import jinhua from \"../../../static/zhejiangJson/jinhua\";
import lanzhou from \"../../../static/zhejiangJson/lanzhou\";
import lishui from \"../../../static/zhejiangJson/lishui\";
import ningbo from \"../../../static/zhejiangJson/ningbo\";
import quzhou from \"../../../static/zhejiangJson/quzhou\";
import shaoxing from \"../../../static/zhejiangJson/shaoxing\";
import taizhou from \"../../../static/zhejiangJson/taizhou\";
import wenzhou from \"../../../static/zhejiangJson/wenzhou\";
import zhoushan from \"../../../static/zhejiangJson/zhoushan\";
export default {
 name: \"echars1\",
 data() {
  return {
   cityName: \"\",//区域的名字
   markerArr: [], //接收散点图数据
  };
 },
 methods: {
  //画地图
  initEchars(cityName) {
   var cityMap = {
    杭州市: hangzhou,
    丽水市: lishui,
    兰州市: lanzhou,
    台州市: taizhou,
    嘉兴市: jiaxing,
    宁波市: ningbo,
    温州市: wenzhou,
    湖州市: huzhou,
    绍兴市: shaoxing,
    舟山市: zhoushan,
    衢州市: quzhou,
    金华市: jinhua
   };
   var name = [cityName];
   var pos = {
    leftPlus: 115,
    leftCur: 150,
    left: 198,
    top: 50
   };
   var line = [[0, 0], [8, 11], [0, 22]];
   // style
   var style = {
    font: \'18px \"Microsoft YaHei\", sans-serif\',
    textColor: \"#eee\",
    lineColor: \"rgba(147, 235, 248, .8)\"
   };
   if (cityName == \"\" || cityName == \"浙江\") {
    cityName = \"浙江\";
    this.$echarts.registerMap(\"浙江\", zhejiang);
   }
   let mapCharts = this.$echarts.init(document.getElementById(\"echarsMap\"));
   let mapCharts_option = {
    //鼠标悬浮点标记
    // tooltip: {
    //  padding: 0,
    //  enterable: true,
    //  transitionDuration: 1,
    //  textStyle: {
    //   color: \"#000\",
    //   decoration: \"none\"
    //  },
    //  formatter: function(params) {
    //   var tipHtml = \"\";
    //   tipHtml =
    //    \'<div style=\"width:100%;height:auto;background:rgba(22,80,158,1);border:1px solid rgba(7,166,255,0.7)\">\' +
    //    \'<div style=\"width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px\">\' +
    //    \'<i style=\"display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;\">\' +
    //    \"</i>\" +
    //    \'<span style=\"margin-left:10px;color:#fff;font-size:16px;\">\' +
    //    params.data.org_name +
    //    \"</span>\" +
    //    \"</div>\" +
    //    \'<div style=\"padding:20px\">\' +
    //    \'<p style=\"color:#fff;font-size:12px;\">\' +
    //    \'<i style=\"display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px\">\' +
    //    \"</i>\" +
    //    \"工程名称：\" +
    //    \'<span style=\"color:#f48225;margin:0 6px;\">\' +
    //    params.data.name +
    //    \"</span>\" +
    //    \"</p>\" +
    //    \"</div>\" +
    //    \"</div>\";
    //   return tipHtml;
    //  }
    // },
    //单词意思 图形图表
    graphic: [
     {
      type: \"group\",
      left: pos.left,
      top: pos.top - 4,
      children: [
       {
        type: \"line\",
        left: 0,
        top: -20,
        shape: {
         x1: 0,
         y1: 0,
         x2: 60,
         y2: 0
        },
        style: {
         stroke: style.lineColor
        }
       },
       {
        type: \"line\",
        left: 0,
        top: 20,
        shape: {
         x1: 0,
         y1: 0,
         x2: 60,
         y2: 0
        },
        style: {
         stroke: style.lineColor
        }
       }
      ]
     },
     {
      id: \"\",
      type: \"group\",
      left: pos.left + 2,
      top: pos.top,
      children: [
       {
        type: \"polyline\",
        left: 90,
        top: -12,
        shape: {
         points: line
        },
        style: {
         stroke: \"transparent\",
         key: name[0]
        },
        onclick: function() {}
       },
       {
        type: \"text\",
        left: 0,
        top: \"middle\",
        style: {
         text: \"浙江\",
         textAlign: \"center\",
         fill: style.textColor,
         font: style.font
        },
        onclick: () => {
         mapCharts.clear();
         this.$echarts.registerMap(\"浙江\", zhejiang);
         mapCharts_option.geo.map = \"浙江\";
         mapCharts.setOption(mapCharts_option, true);
        }
       },
       {
        type: \"text\",
        left: 0,
        top: 10,
        style: {
         text: \"zhejiang\",
         textAlign: \"center\",
         fill: style.textColor,
         font: \'12px \"Microsoft YaHei\", sans-serif\'
        },
        onclick: () => {
         mapCharts.clear();
         this.$echarts.registerMap(\"浙江\", zhejiang);
         mapCharts_option.geo.map = \"浙江\";
         mapCharts.setOption(mapCharts_option, true);
        }
       }
      ]
     }
    ],
    //设置地图
    geo: {
     map: cityName,
     zoom: \"1.2\", //缩放比例
     scaleLimit: {
      //缩放的限度
      min: 1,
      max: 30
     },
     roam: true, //单词意思是漫步 实际是可以拖拽
     label: {
      //文字的颜色 单词意思标签
      normal: {
       //静态的时候显示的默认样式
       show: true,
       color: \"#fff\"
      },
      emphasis: {
       //鼠标移入动态的时候显示的默认样式
       // show: false,
       // color:\'#333\'
      }
     },
     itemStyle: {
      //区域设置
      normal: {
       borderColor: \"rgba(147, 235, 248, 1)\",
       borderWidth: 1,
       areaColor: {
        type: \"radial\",
        x: 0.5,
        y: 0.5,
        r: 0.8,
        colorStops: [
         {
          offset: 0,
          color: \"rgba(147, 235, 248, 0)\" // 0% 处的颜色
         },
         {
          offset: 1,
          color: \"rgba(147, 235, 248, .2)\" // 100% 处的颜色
         }
        ],
        globalCoord: false // 缺省为 false
       },
       shadowColor: \"rgba(128, 217, 248, 1)\",
       shadowOffsetX: -2,
       shadowOffsetY: 2,
       shadowBlur: 10
      },
      emphasis: {
       //鼠标移入动态的时候显示区域颜色
       areaColor: \"#389BB7\",
       borderWidth: 0
      }
     }
    },
    series: [] //存点标记的地方
   };
   mapCharts.clear();
   mapCharts.setOption(mapCharts_option, true);
   mapCharts.resize();
   mapCharts.on(\"click\", params => {
    //地图下钻
    console.log(params);
    if (cityMap[params.name]) {
     this.cityName = params.name;
     var url = cityMap[params.name]; //对应的拼音区域
     this.$echarts.registerMap(params.name, url);
     mapCharts_option.geo.map = params.name;
     mapCharts.setOption(mapCharts_option, true);
    }
   });
  },
 },
 mounted() {
  this.initEchars(\"浙江\");
 }
};
</script>
<style lang=\"less\" scoped>
#container {
 width: 100%;
 height: calc(100% - 78px);
 background-color: pink;
 #echarsMap {
  width: 80%;
  height: 80%;
  background-color: #000;
  margin: auto;
 }
}
</style>

效果图

点击下一层

以上所述是小编给大家介绍的在vue中使用echars实现上浮与下钻效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！