极乐门资源网 Design By www.ioogu.com
第一步:
在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实现上浮与下钻效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无在vue中使用echars实现上浮与下钻效果的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]