背景：我们在制作大屏的时候，经常会使用到echarts制作各种图表，饼图，柱状图，折线图。有时候也会用到地图的交互，使大屏效果看起来更加高级。
我们要完成上面的效果需要准备什么呢？
首先是需要我们待绘制地图的json。这里我们以成都新都区为例。
接下来就是开始渲染地图了。
map.view
<div ref="mapContainer" style="width: 100%; height: 100%"></div>
import xinduMap from "@/assets/mapJson/xindu.json";initMap() {const mapContainer = this.$refs.mapContainer;const chart = echarts.init(mapContainer);// 注册地图echarts.registerMap("xinduDistrict", xinduMap);// 设置地图选项const option = {tooltip: {trigger: "item", // 提示框触发类型},itemStyle: {areaColor: {type: "linear-gradient",x: 0,y: 1500,x2: 1000,y2: 0,colorStops: [{offset: 0.5,color: "rgba(73, 145, 218,0)", // 0% 处的颜色},{offset: 1,color: "rgba(99, 142, 199,1)", // 100% 处的颜色},],global: false, // 缺省为 false},emphasis: {show: false,areaColor: "#389BB7",},borderColor: "rgba(104, 208, 255, .4)",borderWidth: 1,shadowColor: "rgba(66, 129, 193, .5)",shadowOffsetX: 1,shadowOffsetY: 10,shadowBlur: 1,},series: [{selectedMode: false,itemStyle: {// 地图区块的样式normal: {areaColor: "#3E587F", // 地图底色，这里设置为浅灰色borderColor: "#9CA7BA", // 边界线颜色borderWidth: 1, // 边界线宽度},},emphasis: {// focus: "self", //突出选中的区域 其它区域谈化效果itemStyle: {opacity: 0.5,borderColor: "#fff",borderWidth: "2",areaColor: "#52A6F2",},},name: "新都区地图",type: "map",map: "xinduDistrict", // 使用注册的地图名称roam: false, // 是否开启鼠标缩放和平移漫游label: {show: true, // 是否显示标签color: "#9CA7BA", // 标签颜色},markPoint: {symbol: "circle",data: [{name: "大丰街道",coord: [104.053, 30.765],value: "地图标点1",type: 1,},{name: "新繁镇",coord: [104.0, 30.89],value: "地图标点2",type: 2,},{name: "新都镇",coord: [104.174, 30.8],value: "地图标点3",type: 1,},],},},],};let _this = this;// 使用配置项和数据显示图表chart.setOption(option);chart.on("click", function (params) {if (params.componentType === "markPoint") {// 地图标点的点击事件交互}});
},
