echarts中国地图开发第二章 打点与连线 |
您所在的位置：网站首页 › echarts地图数据大颜色深 › echarts中国地图开发第二章 打点与连线 |
echarts中国地图开发第二章 打点与连线
|
上期回顾：上期渲染出了中国地图，并且为地图增加了贴图与双层效果。 本章讲描述如何打点与连线，最底下有完整的代码。 打点需要经纬度 例如北京 { name: "北京", value: [116.40717, 39.90469] } 代码中的经纬度将会通过 china.json 文件中的 cp 字段获取，正常的开发中经纬度会由后端接口返回。 第一步在 data 中声明 unitManagementData:[] 用于存储打点信息； 第二步在 series 数组中添加 type: "effectScatter" { name: "单位", type: "effectScatter", coordinateSystem: "geo", data: this.unitManagementData, symbolSize: function(val) { return 10; }, showEffectOn: "render", rippleEffect: { brushType: "stroke", }, label: { show: false, color: "#000", formatter(value) { return '' }, }, hoverAnimation: true, itemStyle: { normal: { color: "#4DEFFF", shadowBlur: 10, shadowColor: "#4DEFFF", }, }, zlevel: 1, },第三步为 unitManagementData 赋值 fnGetUnitManagemeData(){ import("./mapJson/china.json").then((econom) =>{ econom.features.forEach((element1) =>{ if (element1.properties.centroid) { this.unitManagementData.push({ Name: element1.properties.name, value: element1.properties.centroid, }); } }) this.chart.setOption(this.options); }) },别忘了在mounted 中调用函数 mounted() { this.initMap(); this.fnGetUnitManagemeData(); },此时地图上就有点了 数据目前也通过 china.json 获取，结束位置为北京 fnGetUnitManagemeData() { import("./mapJson/china.json").then((econom) => { econom.features.forEach((element1) => { if (element1.properties.centroid) { this.unitManagementData.push({ Name: element1.properties.name, value: element1.properties.centroid, }); this.mapLineDataArr.push({ name: `line`, fromName: `childPoint`, toName: `mainpoint`, coords: [element1.properties.centroid, [116.40717, 39.90469]], status: 1, }); } }); console.log("_ this.mapLineDataArr_", this.mapLineDataArr); this.chart.setOption(this.options); }); },此时连线就完成了 完整代码如下 import china from "./mapJson/china.json"; import * as echarts from "echarts"; export default { data() { return { chart: null, options: null, unitManagementData: [], mapLineDataArr: [], //连线数据 }; }, methods: { initMap() { echarts.registerMap("china", china); // 加载纹理图片 let mapTexture = document.createElement("img"); mapTexture.src = require("./image/chinese_map_texture.png"); this.options = { tooltip: { show: false, }, //叠加阴影层 geo: { map: "china", aspectScale: 0.8, layoutCenter: ["40%", "49.5%"], layoutSize: "100%", label: { emphasis: { show: false, }, }, itemStyle: { shadowColor: "#1253A0", shadowOffsetX: 0, shadowOffsetY: 15, }, emphasis: { areaColor: "#101B3B", }, regions: [ { name: "南海诸岛", itemStyle: { areaColor: "#101B3B", borderColor: "#101B3B", opacity: 0, label: { show: false, color: "#009cc9", }, }, label: { show: false, color: "#FFFFFF", fontSize: 12, }, }, ], }, series: [ { type: "map", selectedMode: "single", map: "china", aspectScale: 0.8, layoutCenter: ["40%", "50%"], //地图位置 layoutSize: "100%", zoom: 1, //当前视角的缩放比例 label: { show: true, color: "#87B8DD", fontSize: 12, }, itemStyle: { // 渲染背景图片 areaColor: { image: mapTexture, repeat: "repeat", }, borderColor: "#ADD0ED", borderWidth: 1.2, shadowColor: "rgba(255, 255, 255, 0.4)", // 设置阴影颜色，带有透明度 shadowBlur: 15, // 设置阴影的模糊大小 shadowOffsetX: 2, // 设置阴影在 X 轴方向上的偏移 shadowOffsetY: 2, // 设置阴影在 Y 轴方向上的偏移 }, emphasis: { //区域 areaColor: "#ffeb3b", // 高亮时的颜色 itemStyle: { areaColor: "#1785BF", }, label: { show: true, color: "#fff", }, }, }, { name: "单位", type: "effectScatter", coordinateSystem: "geo", data: this.unitManagementData, symbolSize: function(val) { return 10; }, showEffectOn: "render", rippleEffect: { brushType: "stroke", }, label: { show: false, color: "#000", formatter(value) { return ""; }, }, hoverAnimation: true, itemStyle: { normal: { color: "#4DEFFF", shadowBlur: 10, shadowColor: "#4DEFFF", }, }, zlevel: 1, }, { name: "lines", type: "lines", coordinateSystem: "geo", zlevel: 2, large: true, effect: { show: true, // 开启动态线条效果 constantSpeed: 30, // 线条速度 symbol: "pin", // 标记的图形，支持图片和文字 symbolSize: 10, // 标记的大小 trailLength: 0, // 动态线条的长度 loop: true, // 是否循环动画效果 }, lineStyle: { normal: { color: function(params) { // 根据 status 属性判断连线颜色 return params.data.status === 0 ? "#CE373F" : "#4DEFFF"; }, width: 2, opacity: 0.4, curveness: 0.2, // 曲线程度 }, emphasis: { opacity: 0.8, width: 5, }, }, data: this.mapLineDataArr, }, ], }; const el = document.getElementById("china"); this.chart = this.$echarts.init(el); this.chart.setOption(this.options); }, fnGetUnitManagemeData() { import("./mapJson/china.json").then((econom) => { econom.features.forEach((element1) => { if (element1.properties.centroid) { this.unitManagementData.push({ Name: element1.properties.name, value: element1.properties.centroid, }); this.mapLineDataArr.push({ name: `line`, fromName: `childPoint`, toName: `mainpoint`, coords: [element1.properties.centroid, [116.40717, 39.90469]], status: 1, }); } }); console.log("_ this.mapLineDataArr_", this.mapLineDataArr); this.chart.setOption(this.options); }); }, }, mounted() { this.initMap(); this.fnGetUnitManagemeData(); }, }; |
第四步连线，连线需要连线数据格式为[[开始经纬度],[结束经纬度]] 与 series 中添加 type: "lines" 类型对象 data中声明 mapLineDataArr: [], //连线数据 series中添加 lines，status为1时连线为蓝色 0为红色
【本文地址】
今日新闻 |
推荐新闻 |