怎么在vue项目中使用echars实现一个上浮与下钻效果

本篇文章给大家分享的是有关怎么在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 >' +     //    '<div >' +     //    '<i >' +     //    "</i>" +     //    '<span >' +     //    params.data.org_name +     //    "</span>" +     //    "</div>" +     //    '<div >' +     //    '<p >' +     //    '<i >' +     //    "</i>" +     //    "工程名称：" +     //    '<span >' +     //    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实现一个上浮与下钻效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。