云服务器安装win系统做网站,住建局网站信息化建设,wordpress批量更换文章的关键字,搭建平台的同义词一、实现效果
使用echarts实现省市地图绘制根据数据在地图显示柱状图根据数据显示数据#xff0c;涟漪效果
二、实现方法
1、安装echarts插件
npm install echarts --save2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下…
一、实现效果
使用echarts实现省市地图绘制根据数据在地图显示柱状图根据数据显示数据涟漪效果
二、实现方法
1、安装echarts插件
npm install echarts --save2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下的高德地图提供的api 可以获取到中国各个省份/区级/县级的json数据但是区级和县级并没有包含街道和乡镇的数据。
3、本例中data 数据
本文以吉林省地图为例来实现吉林省下所有市的柱状图显示效果。 你也可以显示中国地图或其他身份地图。原理是一样的哦。
定义一个容器map
templatediv classmap idmap/div
/template导入插件及吉林省数据
import * as echarts from echarts;
import jilin from ./json/jilin.json;准备数据数据
后面这些数据是通过接口来获取的本示例写的是静态测试数据
export default {data() {return {//城市坐标数据geoCoordMap: {长春市: [125.31787, 44.05534],吉林市: [126.68595, 43.85034],通化市: [125.76539, 41.68568],四平市: [124.02419, 43.48220],白山市: [127.15109, 42.00513],辽源市: [125.15042, 42.89406],白城市: [122.83774, 45.07098],延边朝鲜族自治州: [129.01009, 42.79950],松原市: [124.55833, 44.94686],},//吉林省下所有市的测试数据testData: [{name: 长春市,value: 80,},{name: 吉林市,value: 70,},{name: 通化市,value: 60,},{name: 四平市,value: 50,},{name: 白山市,value: 90,},{name: 辽源市,value: 30,},{name: 白城市,value: 40,},{name: 延边朝鲜族自治州,value: 30,},{name: 松原市,value: 20,}]};},
}4、吉林省地图的绘制
geo地理坐标系组件。用于地图的绘制支持在地理坐标系上绘制散点图线集。geo 区域的颜色也可以被 map series 所控制。
ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓你可以获取第三方的 GeoJSON 数据注册到 ECharts 中。
geo: [{map: jilin,zoom: 1.2, // 默认显示级别itemStyle: { //设置地图板块配置选项normal: {// 图形的描边颜色borderColor: #55aaff,// 描边线宽。borderWidth: 1,// 柱条的描边类型。borderType: solid,areaColor: #083D7E,},// // 鼠标放上去后样式改变emphasis: {// 图形的描边颜色borderColor: #1DF9FC,borderWidth: 2,// 阴影色areaColor: #3099E2,},},label: {show: false,formatter: ,},},
],geo属性说明
map使用 registerMap 注册的地图名称。zoom当前视角的缩放比例。itemStyle地图区域的多边形 图形样式。emphasis高亮状态下的多边形和标签样式。label图形上的文本标签可用于说明图形的一些数据信息比如值名称等。
5、柱状图样式
柱状图是利用3个样式层叠实现的。 1、顶部椭圆样式type: ‘lines’ 2、中部矩形样式type: ‘scatter’ 3、底部椭圆样式type: ‘scatter’
type: lines,
zlevel: 5,
effect: {show: false,symbolSize: 5 // 图标大小
},
lineStyle: {width: 20, // 尾迹线条宽度color: rgb(22,255,255, .6),opacity: 1, // 尾迹线条透明度curveness: 0 // 尾迹线条曲直度
},6、设置柱状底部涟漪特效样式
带有涟漪特效动画的散点气泡图。利用动画特效可以将某些想要突出的数据进行视觉突出。
涟漪特效相关配置见下方代码注释。
type: effectScatter,
rippleEffect: { //涟漪特效相关配置period: 4, //动画的周期秒数值越小速度越快brushType: stroke, //波纹的绘制方式可选 stroke 和 fillscale: 2, //动画中波纹的最大缩放比例值越大波纹越大 4color: rgb(22,255,255, 1),//涟漪的颜色number: 2//波纹的数量
},7、数据处理
根据接口数据及经纬度坐标处理数据。
动态计算柱形图的高度
lineMaxHeight() {const maxValue Math.max(...this.testData.map(item item.value))return 0.9 / maxValue
},柱状体的主干数据
lineData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return {coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] item.value * this.lineMaxHeight()]]}})
},柱状体的顶部
scatterTopData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] item.value * this.lineMaxHeight(), item.value]})
},柱状体的底部
scatterBottomData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return {name: item.name,value: geoCoordMap[item.name]}})
},8、示例代码已上传去顶部可下载
附全部代码
templatediv classmap idmap/div
/templatescript
import * as echarts from echarts;
import jilin from /json/jilin.json;
export default {data() {return {geoCoordMap: {长春市: [125.31787, 44.05534],吉林市: [126.68595, 43.85034],通化市: [125.76539, 41.68568],四平市: [124.02419, 43.48220],白山市: [127.15109, 42.00513],辽源市: [125.15042, 42.89406],白城市: [122.83774, 45.07098],延边朝鲜族自治州: [129.01009, 42.79950],松原市: [124.55833, 44.94686],},testData: [{name: 长春市,value: 80,},{name: 吉林市,value: 70,},{name: 通化市,value: 60,},{name: 四平市,value: 50,},{name: 白山市,value: 90,},{name: 辽源市,value: 30,},{name: 白城市,value: 40,},{name: 延边朝鲜族自治州,value: 30,},{name: 松原市,value: 20,}]};},created() {},mounted() {this.drawMap()},methods: {drawMap() {// 判断地图是否渲染let myChart echarts.getInstanceByDom(document.getElementById(map))// 如果渲染则清空地图 if (myChart ! null) {myChart.dispose()}// 初始化地图myChart echarts.init(document.getElementById(map));echarts.registerMap(jilin, jilin)var option {geo: [{map: jilin,zoom: 1.2, // 默认显示级别itemStyle: { //设置地图板块配置选项normal: {// 图形的描边颜色borderColor: #55aaff,// 描边线宽。borderWidth: 1,// 柱条的描边类型。borderType: solid,areaColor: #083D7E,},// // 鼠标放上去后样式改变emphasis: {// 图形的描边颜色borderColor: #1DF9FC,borderWidth: 2,// 阴影色areaColor: #3099E2,},},label: {show: false,formatter: ,},},],series: [// 柱状体的主干{type: lines,zlevel: 5,effect: {show: false,symbolSize: 5 // 图标大小},lineStyle: {width: 20, // 尾迹线条宽度color: rgb(22,255,255, .6),opacity: 1, // 尾迹线条透明度curveness: 0 // 尾迹线条曲直度},silent: true,data: this.lineData()},// 柱状体的顶部{type: scatter,coordinateSystem: geo,geoIndex: 0,zlevel: 5,label: {show: true,formatter: function (e) {return 数值${e.data[2]}},position: top},symbol: circle,symbolSize: [20, 10],itemStyle: {color: rgb(22,255,255, 1),opacity: 1},silent: true,data: this.scatterTopData()},// 柱状体的底部{type: scatter,coordinateSystem: geo,geoIndex: 0,zlevel: 4,label: {// 这儿是处理的formatter: {b},position: bottom,color: #fff,fontSize: 12,distance: 10,show: true},symbol: circle,symbolSize: [20, 10],itemStyle: {// color: #F7AF21,color: rgb(22,255,255, 1),opacity: 1},silent: true,data: this.scatterBottomData()},// 底部外框{type: effectScatter,rippleEffect: { //涟漪特效相关配置period: 4, //动画的周期秒数值越小速度越快brushType: stroke, //波纹的绘制方式可选 stroke 和 fillscale: 2, //动画中波纹的最大缩放比例值越大波纹越大 4color: rgb(22,255,255, 1),//涟漪的颜色number: 2//波纹的数量},coordinateSystem: geo,geoIndex: 0,zlevel: 4,label: {show: false},symbol: circle,symbolSize: [40, 20],itemStyle: {color: {type: radial,x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: rgb(22,255,255, 0) // 0% 处的颜色},{offset: .74, color: rgb(22,255,255, 0) // 100% 处的颜色},{offset: .75, color: rgb(22,255,255, 1) // 100% 处的颜色},{offset: 1, color: rgb(22,255,255, 1) // 100% 处的颜色}],},},data: this.scatterBottomData()}]}myChart.setOption(option)},// 动态计算柱形图的高度lineMaxHeight() {const maxValue Math.max(...this.testData.map(item item.value))return 0.9 / maxValue},// 柱状体的主干lineData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return {coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] item.value * this.lineMaxHeight()]]}})},// 柱状体的顶部scatterTopData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] item.value * this.lineMaxHeight(), item.value]})},// 柱状体的底部scatterBottomData() {let {testData,geoCoordMap} thisreturn testData.map((item) {return {name: item.name,value: geoCoordMap[item.name]}})},},
}
/scriptstyle scoped
.map {width: 800px;height: 600px;position: relative;
}
/style9、效果图
