网站打不开是怎么回事,wordpress 配置模板,免费注册个人电子邮箱,做公司网站的平台文章目录 一、实现效果二、实现方法1、安装echarts插件2、获取省市json数据3、本例中data 数据4、吉林省地图的绘制5、柱状图样式6、设置柱状底部涟漪特效样式7、数据处理 三、示例代码已上传#xff0c;去顶部可下载四、效果展示 一、实现效果
使用echarts实现省市地图绘制去顶部可下载四、效果展示 一、实现效果
使用echarts实现省市地图绘制你也可以绘制全国地图。根据数据在地图显示柱状图根据经纬度实现定位。根据数据显示数据涟漪动态效果。当然你也可以根据你自己的需求增删效果哦。
二、实现方法
1、安装echarts插件
npm install echarts --save2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下的高德地图提供的api 可以获取到中国各个省份/区级/县级的json数据但是区级和县级并没有包含街道和乡镇的数据。
3、本例中data 数据
本文以吉林省地图为例来实现吉林省下所有市的柱状图显示效果。 你也可以显示中国地图或其他身份地图。原理是一样的哦。
定义一个容器map最好是定义一个是ID名字的
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]}})
},三、示例代码已上传去顶部可下载
附全部代码
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;
}
/style四、效果展示
