在vue中使用echars实现上浮与下钻效果

更新时间：2020-09-22 02:18:01 作者：startmvc

第一步：在vue项目中安装echarsnpmiechars-S第二步:main.js配置这里是全局引入//引入echarsimportechar

第一步：

在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>

效果图

在这里插入图片描述