在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 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
Python正规则表达式学习指南
2016/08/02 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
set在python里的含义和用法
2019/06/24 Python
Python遍历字典方式就实例详解
2019/12/28 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
软件测试企业面试试卷
2016/07/13 面试题
感恩的演讲稿
2014/05/06 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL