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


Posted in Javascript onNovember 08, 2019

第一步:

在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实现上浮与下钻效果

点击下一层

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

总结

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

Javascript 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
js表数据排序 sort table data
Feb 18 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
js 对象使用的小技巧实例分析
Nov 08 #Javascript
JS对日期操作封装代码实例
Nov 08 #Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 #Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 #Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 #Javascript
微信小程序在text文本实现多种字体样式
Nov 08 #Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 #Javascript
You might like
PHP实现文件下载断点续传详解
2014/10/15 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
JavaScript去除空格的几种方法
2006/10/03 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
jquery json 实例代码
2010/12/02 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python中random模块用法实例分析
2015/05/19 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python 中字典嵌套列表的方法
2018/07/03 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python函数生成器原理及使用详解
2020/03/12 Python
税务专业毕业生自荐信
2013/11/10 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
车辆管理制度范本
2015/08/05 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
JavaScript实现简单的音乐播放器
2022/08/14 Javascript