在vue中使用echarts实现上浮与下钻效果
作者：lijinglianging
这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
第一步：
在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: "",//区域的名字
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中使用 echarts 实现上浮与下钻效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！