在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 相关文章推荐
javascript Event对象详解及使用示例
Nov 22 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 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中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php xhprof使用实例详解
2019/04/15 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python阶乘求和的代码详解
2020/02/14 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
高中毕业自我鉴定
2013/12/13 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
计划生育责任书
2015/05/09 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
MySQL分区表管理命令汇总
2022/03/21 MySQL