echarts的百度地图-地图坐标系组件geo的配置

echarts的百度地图-地图坐标系组件geo的配置

听说你echarts的地图属性不会配置?参数含义知道,又不知道格式怎么写?
例如：来看我这篇文章你就知道了!其中对于地图组件使用的watch监听数据变化this.options,以保证数据的更新

---

---

前言

echarts是数据图表展示中目前最强大的利器,自定义开发程度高,同时,各个参数配置也会更多,所以本文这里也针对实际开发中,仅仅对geo地图坐标系组件的参数进行配置及说明,而且本文将echarts的options参数添加到了watch进行监听,以保证数据的更新,如有其它的疑问,欢迎留言评论探讨。

---

提示：以下就是代码的配置及说明

具体代码及配置参数说明

 watch: {
    // titleValue 是会变更的数据，所以进行监听
    titleValue: {
      handler(newData) {
        this.options = {
          title: {
            text: newData,
            subtext: "data from PM25.in",
            sublink: "http://www.pm25.in",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          // 以下内容是本文讲解的关键区域
          // -----------开始-----------------------
		  // ECharts地理坐标系组件（geo）
          geo: {
            show: true, //[ default: true ]是否显示 ECharts 地理坐标系组件。
            map: "china", //[ default: '' ]地理坐标系组件的地图类型。目前可选:'world''china'
            roam: true, //[ default: false ]是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            // center:[106.567492,29.589036], //中心点设置
            // aspectScale:0.85,//[ default: 0.75 ]地图的长宽比
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            // boundingCoords: [
            //   // 定位左上角经纬度
            //   [-180, 90],
            //   // 定位右下角经纬度
            //   [180, -90],
            // ],//[ default: null ]二维数组，定义定位的左上角以及右下角分别所对应的经纬度。
            // zoom: 1, //[ default: 1 ]当前视角的缩放比例。
            // nameMap:{
            //   'China' : '中国'
            // },//自定义地区的名称映射
            selectedMode: false, //[ default: false ]选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
            silent: false, //[ default: false ]图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
            //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label 选项在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 normal, emphasis 两个状态。
            label: {
              normal: {
                show: true, //[ default: false ]是否显示标签。
                position: "top", //标签的位置。
                // distance:5,//[ default: 5 ]距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                rotate: 45, //标签旋转。从 -90 度到 90 度。正值是逆时针。
                offset: [30, 40], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
                // formatter:'{b}: {c}',//标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
                // //详见:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-famc2dhd.html
                color: "auto", //文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。
                fontStyle: "normal", //[ default: 'normal' ]文字字体的风格可选：'normal','italic','oblique'
                fontWeight: "normal", //[ default: normal ]文字字体的粗细可选：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontFamily: "sans-serif", //[ default: 'sans-serif' ]文字的字体系列,可选:'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                fontSize: 12, //[ default: 12 ]文字的字体大小
                align: "auto", //文字水平对齐方式，默认自动。可选:'left','center','right',rich 中如果没有设置 align，则会取父层级的 align。
                verticalAlign: "auto", //文字垂直对齐方式，默认自动。可选:'top','middle','bottom',rich 中如果没有设置 verticalAlign，则会取父层级的 verticalAlign。
                lineHeight: 40, //文本标签的行高。rich 中如果没有设置 lineHeight，则会取父层级的 lineHeight。
                backgroundColor: "transparent", //[ default: 'transparent' ]文字块背景色。可以是直接的颜色值，例如：'#123234', 'red', rgba(0,23,11,0.3)'。
                //可以支持使用图片，例如：//backgroundColor: {image: "xxx/xxx.png",// 这里可以是图片的 URL，// 或者图片的 dataURI，// 或者 HTMLImageElement 对象，// 或者 HTMLCanvasElement 对象。},
                //当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。
                borderColor: "auto", //文字块边框颜色。
                borderWidth: 0, //[ default: 0 ]文字块边框宽度。
                borderRadius: 0, //[ default: 0 ][ type: number, Array ]文字块的圆角。
                padding: 0, //[ default: 0 ][ type: number, Array ]文字块的内边距。例如：padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                shadowColor: "transparent", //[ default: 'transparent' ][ type: string ]文字块的背景阴影颜色。
                shadowBlur: 0, //[ default: 0 ][ type: number ]文字块的背景阴影长度。
                shadowOffsetX: 0, //[ default: 0 ][ type: number ]文字块的背景阴影 X 偏移。
                shadowOffsetY: 0, //[ default: 0 ][ type: number ]文字块的背景阴影 Y 偏移。
                // width:200,//[ type:  number, string ]文字块的宽度。一般不用指定，不指定则自动是文字的宽度。
                //height:200,//[ type:  number, string ]文字块的高度。一般不用指定，不指定则自动是文字的宽度。
                textBorderColor: "transparent", //[ default: 'transparent' ]文字本身的描边颜色。
                textBorderWidth: 0, //[ default: 0 ]文字本身的描边宽度。
                textShadowColor: "transparent", //[ default: 'transparent' ]文字本身的阴影颜色。
                textShadowBlur: 0, //[ default: 0 ]文字本身的阴影长度。
                textShadowOffsetX: 0, //[ default: 0 ]文字本身的阴影 X 偏移。
                textShadowOffsetY: 0, //[ default: 0 ]文字本身的阴影 Y 偏移。
                // 利用富文本样式设置geo组件文本标签,参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-df2m2dhf.html
              },
              emphasis: {
                show: false, //[ default: false ]是否显示标签。
              },
            },
            //地图区域的多边形图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            itemStyle: {
              //普通状态下的多边形样式。
              normal: {
                areaColor: "rgb(19, 91, 153)", //[ default: '#eee' ]地图区域的颜色。
                // color:'自适应',//[ default: 自适应 ]图形的颜色。颜色可以使用 RGB 表示，想要加上 alpha 通道表示不透明度，可以使用 RGBA,也可以使用十六进制格式，比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充。
                // 参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jb7i2dip.html
                borderColor: "rgb(9, 54, 95)", //[ default: "#000" ]图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                borderWidth: 0, //[ default: 0 ]描边线宽。为 0 时无描边。
                borderType: "solid", //[ default: 'solid' ]柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                //shadowBlur://图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                //参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jb7i2dip.html
                //shadowColor://阴影颜色。支持的格式同color。
                shadowOffsetX: 0, //[ default: 0 ]阴影水平方向上的偏移距离。
                shadowOffsetY: 0, //[ default: 0 ]阴影垂直方向上的偏移距离。
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              },
              //高亮状态下的多边形样式。
              emphasis: {
                areaColor: "rgb(10, 105, 187)", //[ default: '#eee' ]地图区域的颜色。
                //color://[ default: 自适应 ]图形的颜色。颜色可以使用 RGB 表示,可以使用 RGBA,也可以使用十六进制格式,除了纯色之外颜色也支持渐变色和纹理填充。
                //参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jb7i2dip.html
                borderColor: "#000", //[ default: "#000" ]图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                borderWidth: 0, //[ default: 0 ]描边线宽。为 0 时无描边。
                borderType: "solid", //[ default: 'solid' ]柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                //shadowBlur:图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                //shadowColor://阴影颜色。支持的格式同color。
                shadowOffsetX: 0, //[ default: 0 ]阴影水平方向上的偏移距离。
                shadowOffsetY: 0, //[ default: 0 ]阴影垂直方向上的偏移距离。
                opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              },
            },
            // 在地图中对特定的区域配置样式。
            // geo 区域的颜色也可以被 map series 所控制，参见 series-map.geoIndex。
            // 参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-6gv82diu.html
            regions: [
              {
                name: "广东",
                label: {
                  normal: {
                    show: true,
                    color:'#10ff00'
                  },
                },
                itemStyle: {
                  normal: {
                    areaColor: "red",
                    color: "red",
                  },
                },
              },
            ],
          },
          // -----------结束-----------------------
          series: [
            {
              name: "pm2.5",
              type: "scatter",
              coordinateSystem: "bmap",
              data: this.convertData(this.data),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              encode: {
                value: 2,
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              itemStyle: {
                color: "purple",
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            {
              name: "Top 5",
              type: "effectScatter",
              coordinateSystem: "bmap",
              data: this.convertData(
                this.data
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 6)
              ),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              encode: {
                value: 2,
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              label: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              itemStyle: {
                color: "purple",
                shadowBlur: 10,
                shadowColor: "#333",
              },
              zlevel: 1,
            },
          ],
          // xAxis: {
          //   type: "category",
          //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // },
          // yAxis: {
          //   type: "value",
          // },
          // series: [
          //   {
          //     data: newData,
          //     type: "line",
          //   },
          // ],
          // aria: {
          //   show: true,
          // },
          // title: {
          //   text: newData,
          //   left: "center",
          // },
          // series: [
          //   {
          //     name: this.series.name,
          //     type: "pie",
          //     data: this.series.data,
          //   },
          // ],
          // title: {
          //   text: newData * 1 + "%",
          //   x: "center",
          //   y: "center",
          //   textStyle: {
          //     color: this.colorObj.textStyle,
          //     fontSize: 16,
          //   },
          // },
          // series: [
          //   {
          //     type: "pie",
          //     radius: ["75%", "80%"],
          //     center: ["50%", "50%"],
          //     hoverAnimation: false,
          //     color: this.colorObj.series.color,
          //     label: {
          //       normal: {
          //         show: false,
          //       },
          //     },
          //     data: [
          //       {
          //         value: newData,
          //         itemStyle: {
          //           normal: {
          //             color: this.colorObj.series.dataColor.normal,
          //             shadowBlur: 10,
          //             shadowColor: this.colorObj.series.dataColor.shadowColor,
          //           },
          //         },
          //       },
          //       {
          //         value: 100 - newData,
          //       },
          //     ],
          //   },
          // ],
        };
      },
      immediate: true,
      deep: true,
    },
  },

---

总结

以上内容属于个人研究成果,如有不足和误导指出欢迎指正探讨!如有需要代码也可留言.