在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 动态循环输出表格具体方法
Nov 23 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
Firefox div高度自适应
2009/04/28 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Sanic框架配置操作分析
2018/07/17 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Django中间件基础用法详解
2019/07/18 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
药学专业个人自我评价
2013/11/11 职场文书
作弊检讨书1000字
2014/02/01 职场文书
政府门卫岗位职责
2014/04/29 职场文书
广播体操口号
2014/06/18 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python