vue使用echarts实现地图下钻，修改悬浮框样式
首页安装echarts
安装命令
npm install echarts
我是放在main.js里面，也可单页面引用
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
完整代码
<template>
<div class="mapEcharts">
<div class="map-left">
<svg @click="backMap" t="1681180771137" class="backIcon icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3427" width="100" height="100">
<path
d="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"
p-id="3428" fill="#ffffff"></path>
</svg>
<div id="mapEchart"></div>
</div>
<div class="map-right">
<!-- 其他区域 -->
<div class="top-other">
<div style="text-align: left;display: flex;align-items: center;">
<div style="width:3px;height:18px;background: #FBA922;"></div>
<div style="margin-left: 5px;font-size: 16px;">其他区域</div>
</div>
<div class="list">
<div class="list-item">
<div class="num">12</div>
<div class="title">本月销售额</div>
</div>
<div class="list-item">
<div class="num">12</div>
<div class="title">本月客户家数</div>
</div>
<div class="list-item">
<div class="num">12</div>
<div class="title">本月毛利</div>
</div>
</div>
<div style="text-align: left;display: flex;align-items: center;margin-top: 20px;">
<div style="width:3px;height:16px;background: #FBA922;"></div>
<div style="margin-left: 5px;font-size: 18px;">客户数</div>
</div>
<div class="list">
<div class="list-item">
<div class="num">12</div>
<div class="title">电商部</div>
</div>
<div class="list-item">
<div class="num">12</div>
<div class="title">销售部</div>
</div>
<div class="list-item">
<div class="num">12</div>
<div class="title">未合作</div>
</div>
</div>
</div>
<!-- 下方列表 -->
<div class="table-cont">
<el-table :data="tableData" height="35vh" style="margin-bottom: 10px"
element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading" v-loading="loading">
<el-table-column type="index" align="center" label="序号" width="60"></el-table-column>
<el-table-column prop="hkDate" align="left" label="省" width="120" show-overflow-tooltip v-if="listAdcode == '100000'"></el-table-column>
<el-table-column prop="hkDate" align="left" label="市" width="120" show-overflow-tooltip v-if="listAdcode == '610000'"></el-table-column>
<el-table-column prop="hkDate" align="left" label="区/县" width="120" show-overflow-tooltip v-if="listAdcode == '610600'"></el-table-column>
<el-table-column prop="orderDate" align="left" label="市场客户数" width="120"
show-overflow-tooltip></el-table-column>
<el-table-column prop="customerKey" align="left" label="公司客户数" width="120"
show-overflow-tooltip></el-table-column>
<el-table-column prop="customerName" align="left" label="未做客户数" width="150"
show-overflow-tooltip></el-table-column>
<el-table-column prop="hkAmount" align="center" label="批连客户" width="120" sortable
show-overflow-tooltip></el-table-column>
<el-table-column prop="ratio" align="center" label="诊疗客户" width="110" sortable
show-overflow-tooltip></el-table-column>
<el-table-column prop="proceedsAmount" align="center" label="药店客户" sortable width="110"
show-overflow-tooltip></el-table-column>
<el-table-column prop="day" align="center" label="当月客户数" width="110" sortable
show-overflow-tooltip></el-table-column>
<el-table-column prop="zhy" align="left" label="当月销售额" width="200" show-overflow-tooltip></el-table-column>
<el-table-column prop="salesErpDepart" align="left" label="新开客户数" width="120"
show-overflow-tooltip></el-table-column>
<el-table-column prop="salesPersonName" align="left" label="新开销售额" width="110"
show-overflow-tooltip></el-table-column>
<el-table-column prop="hkdh" align="left" label="控销销售额" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="salesmanRatio" label="控销客户数" width="135" show-overflow-tooltip></el-table-column>
</el-table>
<!-- 分页 -->
<pageCmp @refurbish="refurbish" :total="total" :current="pageNum" :pageSize="pageSize"></pageCmp>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
//这个是 悬浮上去绿色的框
var scatterImg =
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAbCAYAAADGfCe4AAAEpElEQVRYhaWYvaskRRDAf7W37+19KAb+A4IG74y8CwwMFJMLX2CgYHKZf4CI+DTRaEUwUsHMUOMFOTCWOw5EzG4xMhCEE0G89873dne2pKd7Zmpru2fmsGF3uquruuuru6pLbt678wtwTeFc4JEiFeiW+K2Av4E1EPqVQBVwgVOQDeimmQM5Bb2Q2K+0ppcV6FnCCetuBN0q/BvXlQTXZo3ztH+AbQXZarfHNv00zAsaeFEB1RpW/wJtGsa/qcJzwGvAI+CZAJeIpDUGzIDDRKBp0TC4FpmJG6apaVwzMtgIIHBZW0WwTf1JhGslaS7C9Woc1wJsoqLi3tIqrp1XaelaA2hSWKOQ7TQx/Nvy+CR0n4pykeSrBa/YbRdES9pWHS3mZwT1JFLdWca2HCyqNjRLLy127GmGtoNImpe2l+CTqSF7HfiyM7k1f/HXaLlaHp9Uhq6x2mly9a2BBSU9drhrA6vMvgG2cXys0k/dGudG5m36XkyuzB5OZYSak88Xploau1QDu2qEa5gPsKcN05U5b5U7e5bO4uSUrgavNZBuqgcTJ5kYBMuxFSAnjFeUZOBFJY5oY+k01590Pr/DoGfSE/v5klC+iaPPMZ9ba+z6FreVY+L2ygnnhSr1/w9Dlom+28rOifvijk/rkZMRHJUEzzFRGlt4bssc3J71EptSctGMJYsM9rlVaVMGXE4zlhnjEX3K3nPRHUvqrqJKLjN08eQE6GtjXFozv6ELLSd4sOQOX32WsK3kciXavjNdUkrJTcfwtiNHzl37BLDj0oVUujhKZ6e09/h0qYAnjbuOJPC31hiGfBOzzpPE3awAPXu0eNpjydJ57LPaUFjxaz9pUjA+LMlOr7OklNDyF0nuHJVcMZdEjI2NffBiE92ntWndWYZwKPuxeOr6Obf08Jz75vYuxcw93hxznbsKPH+0mP8AvAn8mtFwLnZ6wcfENd/vCwt2ndK5dVlplq864/lA4Xvgk6PF/GfgFvAx8E+Bkb58cygEiWN6KESMclfjollFh2Tga+CmwAvAT0eL+avXF59+k6oF3420pg/GpaRgKJT4W3xU2maA2btCbty7Y+lugX4O3BfkQ0UfLo9PXkyWfck9Urfu3effer6/GXg/Dn39up4PzX3lYPrA3K610sK5fBn4XdEfQW4fLeZL4C3gXeDPEc8jf1nYyybnrrk+Hi55S/W1Lo2zlrTVEYHrCp/FrEHeV3S5PD4Jr/p3gNvApcKrXQvWGnr9D83lrOkrA3vfYEnnrjkLyduCvqfIt4J+kUqJdUtCT43FDlN1rxlPUrnDWuGKO2sHaQ01NDN3ti+78UHCszQNH019p64wyuzwjyEhG26eBT4CbgBfhZtXkga1jq91/bXR3soUlZpy5eNmHMqdiq7TGcXUTFd92XrHSz9WZnYy9cQ+OifIX+lMvgLyRqrJVqkAPQtjQTapCBwILkldM2WN6gapNV8LlgRsNB7664Qb9lqDBmHXyWMukjICzkqjIjbaFbVX7lIL6+y5ci1klNz+N4Lu6e4u6N1OEeVo0KYo9aEuKbCcFkksfLdbp/5Eu6SmcdNcyEpegyrwHzdCxPS7nMn3AAAAAElFTkSuQmCC';
import pageCmp from "@/components/page/index.vue";
export default {
components: {
pageCmp
},
data() {
return {
historyMapData: [{
name: "map",
adcode: "100000"
}],
provinceInfo: [{
name: "陕西",
oredrNum: 599, //订单数量
goodsNum: 599, //货品数量
},
{
name: "青海",
oredrNum: 142,
goodsNum: 599,
},
{
name: "甘肃",
oredrNum: 44,
goodsNum: 599,
},
{
name: "宁夏",
oredrNum: 92,
goodsNum: 599,
},
],
cityInfo: [{
name: "西安市",
oredrNum: 599, //订单数量
goodsNum: 599, //货品数量
},
{
name: "咸阳市",
oredrNum: 142,
goodsNum: 599,
},
{
name: "延安市",
oredrNum: 44,
goodsNum: 599,
},
{
name: "宝鸡市",
oredrNum: 92,
goodsNum: 599,
},
],
tableData: [],
loading: false,
total: 0,
pageNum: 1,
pageSize: 30,
listAdcode: '100000',
};
},
mounted() {
this.chartMap();
},
methods: {
// 分页
refurbish(param) {
this.pageNum = param.current;
this.pageSize = param.pageSize;
this.getSalesProceedsDetails();
},
chartMap() {
// 初始化dom
const myChart = this.$echarts.init(
document.getElementById("mapEchart")
);
// 初始化map
this.initMap(myChart, "map", "100000");
// 添加点击事件
myChart.on("click", (e) => {
console.log(e)
const newName = e.name;
const value = e.data.mapValue;
if (value.level === "district") return alert("该地区已经无法下钻");
// 添加历史记录
this.historyMapData.push(value);
this.listAdcode = value.adcode;
// 初始化地图
this.initMap(myChart, newName, value.adcode);
});
//让可视化地图跟随浏览器大小缩放
window.addEventListener("resize", () => {
myChart.resize();
});
},
async initMap(chartDOM, geoName, adcode) {
// 清除echarts实例
chartDOM.clear();
// 请求map的json
const mapData = await this.getMapJSON(adcode, geoName);
console.log(geoName);
var mapArr = [];
if (geoName == 'map') {
mapArr = await this.getMapChart(this.provinceInfo, mapData);
} else {
mapArr = await this.getMapChart(this.cityInfo, mapData);
}
this.$nextTick(() => {
console.log(mapArr, '88888888888888')
// const
// 图表配置项
const option = this.getOption(geoName, mapArr);
// 渲染配置
chartDOM.setOption(option);
})
},
// 获取省-》市-》区、县
async getMapJSON(adcode, geoName) {
let geoJson = {};
if (geoName == 'map') {
geoJson = require("@/common/utils/fourNorthwesternProvinces.json");
} else {
const res = await axios.get(
`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`
);
// 重新注册地图
geoJson = res.data;
}
this.$echarts.registerMap(geoName, geoJson);
// 过滤json数据
const mapData = geoJson.features.map((item) => {
return {
value: item.properties,
name: item.properties.name,
};
});
return mapData;
},
getOption(geoName, mapData) {
// 图表配置项
const option = {
tooltip: {
// 鼠标移到图里面的浮动提示框
borderWidth: '0',
textStyle: {
color: 'rgba(255, 255, 255, 1)' //文字颜色
},
className: 'custom-tooltip-boxCont',
//自定义提示框自动调用函数
formatter: function(params) {
let showname = params;
return (
`
<div class="custom-tooltip-box">
<div style="text-align: left;display: flex;align-items: center;">
<div style="width: 3px;height:16px;background: #FBA922;"></div>
<div style="margin-left: 5px;">${showname.data ? showname.data.name : '暂无信息'}</div>
</div>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>本月销售额：</span>
<span>12</span>
</p>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>本月客户家数：</span>
<span>12</span>
</p>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>本月毛利：</span>
<span>12</span>
</p>
<div style="text-align: left;display: flex;align-items: center;">
<div style="width: 3px;height:16px;background: #FBA922;"></div>
<div style="margin-left: 5px;">客户数：</div>
</div>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>电商部：</span>
<span>12</span>
</p>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>销售部：</span>
<span>12</span>
</p>
<p style="font-size:14px;display: flex;justify-content: space-between;margin-left: 8px;">
<span>未合作：</span>
<span>12</span>
</p>
</div>
`
);
}
},
geo: [{
zlevel: -100,
show: true,
type: "map",
map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
label: {
normal: {
show: true, // 是否显示对应地名
fontSize: "15",
textStyle: {
color: '#fff' //对应地名颜色
}
},
emphasis: {
textStyle: {
color: '#fff' //对应地名颜色
}
}
},
itemStyle: {
normal: {
//正常状态下的地图背景色
borderColor: '#2FC3B3',
borderWidth: "1",
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#0198A5' // 0% 处的颜色
}, {
offset: 1,
color: '#033249' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: '#03495e',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
// areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20, //聚焦时候的阴影范围
borderWidth: 0,
shadowColor: "#000000", //聚焦时候的阴影颜色
// 鼠标放上去地图区域背景颜色
areaColor: '#389BB7', //聚焦之后的颜色
borderWidth: 3
},
},
},
{ // 底部重影层，蓝色偏移形成立体感
map: geoName,
roam: false, // 是否允许缩放
silent: false,
zoom: 1,
itemStyle: {
normal: {
shadowColor: "#247472",
shadowOffsetX: 0,
shadowOffsetY: 12,
opacity: 0.8,
},
},
zlevel: -111,
},
],
series: [{
type: "effectScatter", //图例类型
coordinateSystem: "geo", //使用geo地图
//这个是位置图标
symbol: "image://data:image/png;base64,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",
showEffectOn: "emphasis", //涟漪特效何时触发
symbolSize: 25, //图例大小,
symbolOffset: [0, -30],
rippleEffect: { //特效设置
scale: 2.5,
color: "rgba(128, 217, 248, 1)",
number: 3
},
showEffectOn: "render",
data: mapData,
}, {
type: "map",
geoIndex: 0,
map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
data: mapData, //这里比较重要：获得过滤后的data，这样点击事件时就能获得这个data的值
}, {
type: "scatter",
coordinateSystem: "geo",
// 地图文字背景框设置
symbol: scatterImg,
symbolSize: [80, 30],
symbolOffset: [0, -70],
//地图文字设置
label: {
normal: {
show: true,
formatter: function(params) {
var name = params.name;
// var value = params.data.datas;
// var text = `{fline|${value}}\n{tline|${name}}`;
var text = `{fline|${name}}`;
return text;
},
rich: {
fline: {
padding: [8, 0, 0, 0],
color: "#fff",
textShadowColor: "#030615",
textShadowOffsetX: 1,
textShadowOffsetY: 1,
fontSize: 16,
fontWeight: 550,
},
},
label: {
show: false,
},
},
emphasis: {
show: true,
},
},
itemStyle: {
color: '#1dfd28'
},
z: 999,
data: mapData,
}, ],
};
return option;
},
//
getMapChart(data, mapData) {
var res = [];
data.forEach(item => {
mapData.forEach(row => {
if (item.name == row.name) {
res.push({
name: row.name,
value: row.value.cp ? row.value.cp : row.value.center,
oredrNum: item.oredrNum ? item.oredrNum : '暂无数据',
goodsNum: item.goodsNum ? item.goodsNum : '暂无数据',
mapValue: row.value,
})
} else {
res.push({
name: row.name,
value: item.name ? row.value.cp : '',
oredrNum: item.oredrNum ? item.oredrNum : '暂无数据',
goodsNum: item.goodsNum ? item.goodsNum : '暂无数据',
mapValue: row.value,
})
}
})
})
return res;
},
backMap() {
const myChart = this.$echarts.init(
document.getElementById("mapEchart")
);
// 去除当前的地图信息
this.historyMapData.pop();
const len = this.historyMapData.length;
// 获取上一级的地图信息
const newdata = this.historyMapData[len - 1] ? this.historyMapData[len - 1].name : "map";
const adcode = this.historyMapData[len - 1] ? this.historyMapData[len - 1].adcode : "100000";
// 重新渲染地图
this.initMap(myChart, newdata, adcode);
},
},
};
</script>
<style lang="scss" scoped>
.mapEcharts {
position: relative;
overflow: hidden;
width: 100%;
height: 80vh;
padding: 0px;
margin: 0px;
// background-image: url('../../../assets/images/index/bg.jpg');
// background-size: 100% 100%;
background-image: radial-gradient(#073C53, #02273F);
display: flex;
box-sizing: border-box;
font-size: 14px;
.map-left {
width: 40%;
.backIcon {
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
z-index: 1;
}
#mapEchart {
width: 100%;
height: 80vh;
}
}
.map-right {
color: #fff;
width: 60%;
font-size: 14px;
.top-other {
width: 90%;
background-image: url('../../../assets/images/index/tabbg.png');
background-size: 100% 100%;
padding: 45px 55px 55px;
margin: 25px auto;
box-sizing: border-box;
.list {
display: flex;
.list-item {
width: calc(100% / 3);
.num {
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
}
}
}
}
}
}
:deep(.map-right .table-cont) {
width: 90%;
margin: 0 auto;
.el-table {
color: #fff;
background-color: transparent !important;
thead tr>th {
background: #056f9370 !important;
}
}
.el-table tr {
background-color: transparent !important;
}
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
border-bottom: 0.0625rem solid #ebeef561;
}
.el-table__body-wrapper::-webkit-scrollbar {
height: 6px !important;
cursor: pointer;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next{
background-color: #ecf5ff69;
}
.el-pagination.is-background .el-pager li {
background-color: #056f9370;
}
}
// 提示框样式
/* // 给父盒子清除默认已有样式 */
:deep(.custom-tooltip-boxCont) {
// padding: 10px !important;
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: url('../../../assets/images/index/toopImage.png');
background-size: 100% 100%;
width: 350px;
height: auto;
padding: 17px 23px !important;
box-sizing: border-box;
color: #fff;
.custom-tooltip-box {
padding: 15px;
background-color: #01192d91;
}
}
</style>
西北四省数据 fourNorthwesternProvinces.json
在最上面的文件里
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
