最近做了几个大屏，有很多echarts图表，挑重要的记录一下：
1. 中国地图
首先要找一个json文件，包含中国地区内所有地方的经纬度和名称等，初始化地图的时候需要
echarts.registerMap("china", { geoJSON: city });这里的city就是我的json文件。在上方引入即可
import city from "./city";这里我把它放在和大屏index同目录下了，注意引入时的路径
然后就可以画出地图了，
echarts.registerMap("china", { geoJSON: city });if (!this.mapChart) {this.mapChart = echarts.init(this.$refs["map"]); //map是div元素的ref名称}let option = {tooltip: {trigger: "item",show: false,},geo: {show: true,map: "china",roam: true,zoom: 1.55,center: [106.83531246, 37.0267395887],},},series: [{type: "map",map: "china",geoIndex: 0,aspectScale: 1, //长宽比showLegendSymbol: false, // 存在legend时显示roam: true,animation: false,data: [],},],};this.mapChart.setOption(option);然后是地图样式相关的一些配置：
地图是否支持拖动和缩放：
在geo中加入roam属性即可。
option中加入tooltip可以在鼠标悬浮到某个区域的时候弹出标签
tooltip: {trigger: "item",show: true,},geo对象中设置label，省份名称显示的样式
label: {normal: {show: true,color: "rgb(249, 249, 249)", //省份标签字体颜色formatter: (p) => {switch (p.name) {case "内蒙古自治区":p.name = "内蒙古";break;case "西藏自治区":p.name = "西藏";break;case "新疆维吾尔自治区":p.name = "新疆";break;case "宁夏回族自治区":p.name = "宁夏";break;case "广西壮族自治区":p.name = "广西";break;case "香港特别行政区":p.name = "香港";break;case "澳门特别行政区":p.name = "澳门";break;}return p.name;},},},效果：
隐藏掉右下方的“南海诸岛”： 在geo中加入如下代码设置regions
//隐藏南海诸岛regions: [{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形},},label: {show: false, // 隐藏文字},},],设置每一个省份的区域内样式，在geo中加入如下代码设置itemStyle
itemStyle: {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中额外加入点标记对象
{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 3,label: {show: false,},symbolSize: 14,data: this.piontData,},这里面的pointData是一个数组，从接口拿到的点标记数据放里面，数据元素可以携带它的自定义属性，id，type，devName等都是自定义，以免后面需要这些属性值
this.piontData.push({name: ele.devId,id: ele.id,type: ele.deviceType,devName: ele.devName || ele.collectionName,value: [parseFloat(gpsArr[0]), parseFloat(gpsArr[1])],itemStyle: {color: color,opacity: 1,shadowColor: "rgba(0, 0, 0, 0.5)",shadowBlur: 1,},});上面的itemstyle是点标记的样式，这里由于要求给不同类设备显示不同颜色标记，color做了一些判断。
给点标记加tooltip：
这个tooltip得加到series里面，点标记对应的对象中，前提是option下面也要加tooltip且trigger=item，否则点标记的tooltip不会显示
let option = {tooltip: {trigger: "item",show: false,},......}{tooltip: {show: true,formatter: function (params) {let html = "";let bgColor = "";if (params.data.type < 2)bgColor ="linear-gradient(0deg,rgba(10,74,39,0.6),rgba(102,253,181,0.6),rgba(10,74,39,0.6))";else if (params.data.type < 4)bgColor ="linear-gradient(0deg,rgba(97,40,14,0.6),rgba(255,159,116,0.6),rgba(97,40,14,0.6))";elsebgColor ="linear-gradient(0deg,rgba(99,92,14,0.6),rgba(255,235,48,0.6),rgba(99,92,14,0.6))";html += `${params.data.devName}`;return html;},textStyle: {color: "#fff",},padding: 0,backgroundColor: "transparent",extraCssText: "border-radius: 12px",},type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 3,label: {show: false,},symbolSize: 14,data: this.piontData,},这里由于设计的标签样式有点复杂，所以用了html元素，简单点的样式，可以直接按照文档那些属性配置一下就可以了
效果：
给点标记添加单击事件：初始化之前添加
echarts.registerMap("china", { geoJSON: city });if (!this.mapChart) {this.mapChart = echarts.init(this.$refs["map"]);this.mapChart.off("click");this.mapChart.on("click", (params) => {if (params.seriesType === "scatter") {console.log("click", params, this.diaType);......}});}this.mapChart.setOption(option);给地图添加热力发散标记：在series中再额外加入一个对象 它的type: “effectScatter”,
series: [{type: "map",map: "china",......},{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 3,label: {show: false,},symbolSize: 14,data: this.piontData,},{name: "报警散点",type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "fill",},itemStyle: {normal: {color: "#F4E925",shadowBlur: 20,shadowColor: "#333",},},data: this.effectedData,symbolSize: 20,showEffectOn: "render", //加载完毕显示特效},],