在vue项目中安装echars
npm i echars -S
第二步:
main.js配置 这里是全局引入
//引入echars import echarts from 'echarts' Vue.prototype.$echarts = echarts
第三步
直接上代码
<template> <div> <header>浙江省echars地图</header> <div></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>
效果图
点击下一层
总结