Echarts可视化地图工具VisulMap组件_echarts vistual map-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48253913/article/details/114549802

Echarts可视化地图工具VisulMap组件

文章目录

- Echarts可视化地图工具VisulMap组件

concat的使用

`res.push(geoCoord.concat(data[i].value))`

此语句的作用是把PH2.5的值加入每一个地理位置的数组中。
知识点：
concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法：

arrayObject.concat(arrayX,arrayX,…,arrayX)

返回值：

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat()
操作的参数是数组，那么添加的是数组中的元素，而不是数组。

例如：

var a = [1,2,3];
document.write(a.concat(4,5));

输出：1,2,3,4,5

nomal与emphasis的应用

echarts 地图默认文字颜色修改 normal和emphasis

normal:{
      //静态的时候显示的默认样式

　　show:true, //默认是否显示

　　textStyle:{
   

　　　　color:'red'

　　}

},

emphasis:{
     //鼠标移入动态的时候显示的默认样式

　　color:'green'

}

&&与||区别

`if (option && typeof option === "object")`

 在文中此据表示如果option存在，即为true，则判断option的类型是否为object，否则显示为false，不执行后续命令。

知识点：
javascript中，&&和||的用法比较神奇，经常用在对象上，例如a || b，如果a不存在，则返回b。a && b，如果a存在，则返回b，否则返回a。
所以：

a || b：如果a是true，那么b不管是true还是false，都返回true。因此不用判断b了，这个时候刚好判断到a，因此返回a。
如果a是false，那么就要判断b，如果b是true，那么返回true，如果b是false，返回false，即返回b。相当于a或b。
a && b：如果a是false，那么b不管是true还是false，都返回false，因此不用判断b了，这个时候刚好判断到a，因此返回a。
如果a是true，那么就要在判断b，和刚刚一样，不管b是true是false，都返回b。

地图显示

在这里插入图片描述

Echarts完整代码:

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var