在vue中使用echarts實現(xiàn)上浮與下鉆效果
更新時間：2023年05月09日 10:25:58 作者：lijinglianging
這篇文章主要介紹了在vue中使用echarts實現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
第一步：
在vue項目中安裝 echarts
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: "",//區(qū)域的名字
markerArr: [], //接收散點圖數(shù)據(jù)
};
},
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: {
//靜態(tài)的時候顯示的默認樣式
show: true,
color: "#fff"
},
emphasis: {
//鼠標移入動態(tài)的時候顯示的默認樣式
// show: false,
// color:'#333'
}
},
itemStyle: {
//區(qū)域設置
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: {
//鼠標移入動態(tài)的時候顯示區(qū)域顏色
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]; //對應的拼音區(qū)域
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中使用 echarts 實現(xiàn)上浮與下鉆效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學到了很多東西。所以本文為大家準備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
Vue+Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖
這篇文章主要為大家詳細介紹了Vue如何結合Echarts實現(xiàn)繪制多設備狀態(tài)甘特圖,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下2024-03-03
緩存清除成為克服瀏覽器緩存中過時內(nèi)容挑戰(zhàn)的關鍵技術,術語“緩存清除”是指故意使靜態(tài)資源失效或進行版本控制,迫使瀏覽器在發(fā)生更改時獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue移動端項目vant組件庫之tag詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
目前vite主要默認是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項目一樣會默認使用vue3去構建項目,此時對于一些vue2的老項目就顯得不友好了,下面這篇文章主要給大家介紹了關于vue2老項目vite升級改造的相關資料,需要的朋友可以參考下2022-12-12
Vue 項目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關于vue3點擊不同的菜單頁切換局部頁面實現(xiàn)的相關資料,文中示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考價值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了Vue-Quill-Editor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要給大家介紹了關于Vue3中引入scss文件的方法步驟,在實際項目中,各種樣式往往有很多重復的情況,為了能夠使樣式的后續(xù)開發(fā)和維護更加愜意,將這些共同的代碼進行命名然后調(diào)用這些變量是一個很好的選擇,需要的朋友可以參考下2023-08-08
vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex實現(xiàn)組件之間共享數(shù)據(jù)
這篇文章主要介紹了vue+vuex+axio從后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù),非常具有實用價值，需要的朋友可以參考下2017-04-04