中国地图
- 实现效果图
- 创建echartChina.vue组件
- 使用echartChina.vue组件
- 修改标记图标为图片
实现效果图
这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！
创建echartChina.vue组件
1.点击下载中国地图json文件
把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！
2.先写一个echartChina.vue组件
为了方便复用，我们可以先写一个地图组件，因为要实现地图阴影的效果，所以组件中对地图渲染了两次进行重叠，第一次是初始化地图阴影，第二次初始化就是实现地图功能效果的；
组件全部代码如下，直接粘贴即可；
<template><div id="china_map"></div>
</template><script>
import * as echarts from 'echarts';
import china from '@/utils/china.json'
echarts.registerMap('china', china)export default {data() {return {};},methods: {//初始化中国地图initEchartMap() {let mapDiv = document.getElementById('china_map');let myChart = echarts.init(mapDiv);var optionsoptions = {tooltip: {show:false,triggerOn: "mousemove", //mousemove、clickpadding:8,backgroundColor:'rgba(0,0,0,0.6)',borderWidth:0,textStyle:{color:'#fff',fontSize:12},},geo: {map: "china",roam: false,// 一定要关闭拖拽zoom: 1.6,center: [102, 36], // 调整地图位置aspectScale: 0.80, //长宽比label: {normal: {show: false, //关闭省份名展示fontSize: "10",color: "rgba(0,0,0,0.7)"},emphasis: {show: false}},itemStyle: {normal: {areaColor: "#0d0059",borderColor: "#389dff",borderWidth: 1, //设置外层边框shadowBlur: 6,shadowOffsetY: 12,shadowOffsetX: -5,shadowColor: "#01012a"},emphasis: {areaColor: "#184cff",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 5,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}}},series:[{type: "map",map: "china",roam: false,zoom: 1.6,center: [102, 36],data:[],// geoIndex: 1,aspectScale: 0.80, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: "#fff"}}},itemStyle: {normal: {areaColor: "#0d0059",borderColor: "#389dff",borderWidth: 0.5},emphasis: {areaColor: "#17008d",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 5,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}}}]}myChart.setOption(options);//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});},initChina(echartData){let mapDiv = document.getElementById('china_map');let myChart = echarts.init(mapDiv);var dataValue = echartData;var data1 = dataValue.splice(0, 4);var option = {series: [{type: "map",map: "china",roam: false,zoom: 1.6,center: [102, 36],aspectScale: 0.80, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false}},itemStyle: {normal: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(36,83,255,1)'}, {offset: 1, color: 'rgba(10,29,255,1)'}],global: false},borderColor: "#389dff",borderWidth: 0.5},emphasis: {areaColor: "#17008d",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 5,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}}},{name: "",type: "scatter",coordinateSystem: "geo",data: dataValue,symbol: "circle",symbolSize: 10,hoverSymbolSize: 10,tooltip: {formatter(value) {return value.data.name + "<br/>" + "设备数：" + "22";},show: true},encode: {value: 2},label: {formatter: "{b}",position: "right",show: false},itemStyle: {color: "#e0eb40"},emphasis: {label: {show: false}}},//下面是前五产生涟漪动画{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",data: data1,symbolSize: 15,tooltip: {formatter(value) {return value.data.name + "<br/>" + "设备数：" + "22";},show: true},encode: {value: 2},showEffectOn: "render",rippleEffect: {brushType: "stroke",color: "#e0eb40",period: 9,scale: 5},hoverAnimation: true,label: {formatter: "{b}",position: "right",show: true},itemStyle: {color: "#e0eb40",shadowBlur: 2,shadowColor: "#333"},zlevel: 1}]};myChart.setOption(option);//随着屏幕大小调节图表window.addEventListener("resize", () => {myChart.resize();});}}};
</script><style scoped>#china_map{height: 100%;}
</style>
使用echartChina.vue组件
在需要使用地图的组件，直接引入即可，然后把需要展示的坐标地点传给地图组件，全部代码如下：
<template><div class="echartChina"><EchartChina ref="myEchart4"/></div>
</template>
<script>
import EchartChina from '@/components/bigEcharts/echartChina'
export default {data(){return {geoCoordMap:{哈尔滨: [126.63, 45.75],北京: [116.46, 39.92],广州: [113.23, 23.16],上海: [121.48, 31.22],郑州: [113.65, 34.76],厦门: [118.1, 24.46],杭州: [120.19, 30.26],攀枝花: [101.718637, 26.582347],东莞: [113.75, 23.04],广州: [113.23, 23.16],太原: [112.53, 37.87],拉萨: [91.11, 29.97],昆明: [102.73, 25.04],深圳: [114.07, 22.62],宿迁: [118.3, 33.96],佛山: [113.11, 23.05],海口: [110.35, 20.02],江门: [113.06, 22.61],大连: [121.62, 38.92],沈阳: [123.38, 41.8],长春: [125.35, 43.88],吉林: [126.57, 43.87],宜宾: [104.56, 29.77],呼和浩特: [111.65, 40.82],成都: [104.06, 30.67],桂林: [110.28, 25.29],齐齐哈尔: [123.97, 47.33],张家界: [110.479191, 29.117096],宜兴: [119.82, 31.36],西安: [108.95, 34.27],遵义: [106.9, 27.7],鄂尔多斯: [109.781327, 39.608266],潍坊: [119.1, 36.62],徐州: [117.2, 34.26],衡水: [115.72, 37.72],乌鲁木齐: [87.68, 43.77],开封: [114.35, 34.79],济南: [117, 36.65],南充: [106.110698, 30.837793],天津: [117.2, 39.13],聊城: [115.97, 36.45],芜湖: [118.38, 31.33],唐山: [118.02, 39.63],丽水: [119.92, 28.45],洛阳: [112.44, 34.7],秦皇岛: [119.57, 39.95],株洲: [113.16, 27.83],石家庄: [114.48, 38.03],长沙: [113, 28.21],衢州: [118.88, 28.97],合肥: [117.27, 31.86],武汉: [114.31, 30.52],大庆: [125.03, 46.58]}}},components:{EchartChina,},mounted(){const {geoCoordMap} = thisthis.initChinaMap(geoCoordMap)},methods:{dealWithData(geoCoordMap) {var mapData = geoCoordMapvar data = [];for (var key in mapData) {data.push({ name: key, value: mapData[key] });}return data;},initChinaMap(geoCoordMap){var chinaData = this.dealWithData(geoCoordMap)this.$nextTick(() => {this.$refs.myEchart4.initEchartMap()this.$refs.myEchart4.initChina(chinaData)})}}
}
</script>
<style lang='less' scoped>
.echartChina{height:100%;width: 100%;position: relative;
}
</style>
修改标记图标为图片
...
//引入图片
import gaoji from '@/assets/images/gaoji.png'
import chache from '@/assets/images/chache.png'
...{name: "",type: "scatter",coordinateSystem: "geo",data: dataValue,symbol: function(value,param){if(param.data.type == 0){return "image://" + chache;}else{return "image://" + gaoji;}},symbolSize: 20,hoverSymbolSize: 20,},
