大屏echarts示例------中国地图

最近做了几个大屏，有很多echarts图表，挑重要的记录一下：

1. 中国地图

首先要找一个json文件，包含中国地区内所有地方的经纬度和名称等，初始化地图的时候需要

echarts.registerMap("china", { geoJSON: city });

这里的city就是我的json文件。在上方引入即可

import city from "./city";

这里我把它放在和大屏index同目录下了，注意引入时的路径

然后就可以画出地图了，

1. echarts.registerMap("china", { geoJSON: city });
2. if (!this.mapChart) {
3. this.mapChart = echarts.init(this.$refs["map"]); //map是div元素的ref名称
4. }
5. let option = {
6. tooltip: {
7. trigger: "item",
8. show: false,
9. },
10. geo: {
11. show: true,
12. map: "china",
13. roam: true,
14. zoom: 1.55,
15. center: [106.83531246, 37.0267395887],
16. },
17. },
18. series: [
19. {
20. type: "map",
21. map: "china",
22. geoIndex: 0,
23. aspectScale: 1, //长宽比
24. showLegendSymbol: false, // 存在legend时显示
25. roam: true,
26. animation: false,
27. data: [],
28. },
30. ],
31. };
32. this.mapChart.setOption(option);

 然后是地图样式相关的一些配置：

地图是否支持拖动和缩放：

在geo中加入roam属性即可。

option中加入tooltip可以在鼠标悬浮到某个区域的时候弹出标签

1. tooltip: {
2. trigger: "item",
3. show: true,
4. },

geo对象中设置label，省份名称显示的样式

1. label: {
2. normal: {
3. show: true,
4. color: "rgb(249, 249, 249)", //省份标签字体颜色
5. formatter: (p) => {
6. switch (p.name) {
7. case "内蒙古自治区":
8. p.name = "内蒙古";
9. break;
10. case "西藏自治区":
11. p.name = "西藏";
12. break;
13. case "新疆维吾尔自治区":
14. p.name = "新疆";
15. break;
16. case "宁夏回族自治区":
17. p.name = "宁夏";
18. break;
19. case "广西壮族自治区":
20. p.name = "广西";
21. break;
22. case "香港特别行政区":
23. p.name = "香港";
24. break;
25. case "澳门特别行政区":
26. p.name = "澳门";
27. break;
28. }
29. return p.name;
30. },
31. },
32. },

效果：

隐藏掉右下方的“南海诸岛”： 在geo中加入如下代码设置regions

1. //隐藏南海诸岛
2. regions: [
3. {
4. name: "南海诸岛",
5. itemStyle: {
6. // 隐藏地图
7. normal: {
8. opacity: 0, // 为 0 时不绘制该图形
9. },
10. },
11. label: {
12. show: false, // 隐藏文字
13. },
14. },
15. ],

 设置每一个省份的区域内样式，在geo中加入如下代码设置itemStyle

1. itemStyle: {
2. borderColor: "rgba(147, 235, 248, 1)",
3. borderWidth: 1,
4. areaColor: {
5. type: "radial",
6. x: 0.5,
7. y: 0.5,
8. r: 0.8,
9. colorStops: [
10. {
11. offset: 0,
12. color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
13. },
14. {
15. offset: 1,
16. color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
17. },
18. ],
19. globalCoord: false, // 缺省为 false
20. },
21. shadowColor: "rgba(128, 217, 248, 1)",
22. shadowOffsetX: -2,
23. shadowOffsetY: 2,
24. shadowBlur: 10,
25. emphasis: {
26. areaColor: "#389BB7",
27. borderWidth: 0,
28. },
29. },

地图上显示一些点标记：在series中额外加入点标记对象

1. {
2. type: "scatter",
3. coordinateSystem: "geo",
4. geoIndex: 0,
5. zlevel: 3,
6. label: {
7. show: false,
8. },
9. symbolSize: 14,
10. data: this.piontData,
11. },

这里面的pointData是一个数组，从接口拿到的点标记数据放里面，数据元素可以携带它的自定义属性，id，type，devName等都是自定义，以免后面需要这些属性值

1. this.piontData.push({
2. name: ele.devId,
3. id: ele.id,
4. type: ele.deviceType,
5. devName: ele.devName || ele.collectionName,
6. value: [parseFloat(gpsArr[0]), parseFloat(gpsArr[1])],
7. itemStyle: {
8. color: color,
9. opacity: 1,
10. shadowColor: "rgba(0, 0, 0, 0.5)",
11. shadowBlur: 1,
12. },
13. });

上面的itemstyle是点标记的样式，这里由于要求给不同类设备显示不同颜色标记，color做了一些判断。

给点标记加tooltip：

这个tooltip得加到series里面，点标记对应的对象中，前提是option下面也要加tooltip且trigger=item，否则点标记的tooltip不会显示

1. let option = {
2. tooltip: {
3. trigger: "item",
4. show: false,
5. },
6. ...
7. ...
8. }

1. {
2. tooltip: {
3. show: true,
4. formatter: function (params) {
5. let html = "";
6. let bgColor = "";
7. if (params.data.type < 2)
8. bgColor =
9. "linear-gradient(0deg,rgba(10,74,39,0.6),rgba(102,253,181,0.6),rgba(10,74,39,0.6))";
10. else if (params.data.type < 4)
11. bgColor =
12. "linear-gradient(0deg,rgba(97,40,14,0.6),rgba(255,159,116,0.6),rgba(97,40,14,0.6))";
13. else
14. bgColor =
15. "linear-gradient(0deg,rgba(99,92,14,0.6),rgba(255,235,48,0.6),rgba(99,92,14,0.6))";
16. html += `
18. ${params.data.devName}
20. `;
21. return html;
22. },
23. textStyle: {
24. color: "#fff",
25. },
26. padding: 0,
27. backgroundColor: "transparent",
28. extraCssText: "border-radius: 12px",
29. },
30. type: "scatter",
31. coordinateSystem: "geo",
32. geoIndex: 0,
33. zlevel: 3,
34. label: {
35. show: false,
36. },
37. symbolSize: 14,
38. data: this.piontData,
39. },

这里由于设计的标签样式有点复杂，所以用了html元素，简单点的样式，可以直接按照文档那些属性配置一下就可以了

效果：

 给点标记添加单击事件：初始化之前添加

1. echarts.registerMap("china", { geoJSON: city });
2. if (!this.mapChart) {
3. this.mapChart = echarts.init(this.$refs["map"]);
4. this.mapChart.off("click");
5. this.mapChart.on("click", (params) => {
6. if (params.seriesType === "scatter") {
7. console.log("click", params, this.diaType);
8. ...
9. ...
10. }
11. });
12. }
14. this.mapChart.setOption(option);

给地图添加热力发散标记：在series中再额外加入一个对象 它的 type: "effectScatter",

1. series: [
2. {
3. type: "map",
4. map: "china",
5. ...
6. ...
7. },
8. {
9. type: "scatter",
10. coordinateSystem: "geo",
11. geoIndex: 0,
12. zlevel: 3,
13. label: {
14. show: false,
15. },
16. symbolSize: 14,
17. data: this.piontData,
18. },
19. {
20. name: "报警散点",
21. type: "effectScatter",
22. coordinateSystem: "geo",
23. rippleEffect: {
24. brushType: "fill",
25. },
26. itemStyle: {
27. normal: {
28. color: "#F4E925",
29. shadowBlur: 20,
30. shadowColor: "#333",
31. },
32. },
33. data: this.effectedData,
34. symbolSize: 20,
35. showEffectOn: "render", //加载完毕显示特效
36. },
37. ],