本篇文章给大家分享的是有关怎么在vue项目中使用echars实现一个上浮与下钻效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
第一步：
在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 >' +
// '<div >' +
// '<i >' +
// "</i>" +
// '<span >' +
// params.data.org_name +
// "</span>" +
// "</div>" +
// '<div >' +
// '<p >' +
// '<i >' +
// "</i>" +
// "工程名称：" +
// '<span >' +
// 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实现一个上浮与下钻效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注天达云行业资讯频道。