echarts 3d

再echart中提供了geo3D，可以绘制3d地图

项目上需求，让在3d地图上绘制点和线，根据官方文档可以查看相应配置

1.如何在地图上绘制点 'scatter3D' 绘制三点

2.如何 scatter3D symbol png 图片 ? base64

3.如何绘制线 lines3D


var mapDate = [{name: '点1',value: [114.35, 32.10785000, 240]},{name: '点2',value: [114.34, 31.85940000, 240]},];var pathSymbols = {fill1: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAADuUlEQVR42mL8//8/w0gGAAHExDDCAUAAjfgAAAigER8AAAE04gMAIIBGfAAABNCIDwCAABrxAQAQQCM+AAACaMQHAEAAjfgAAAigER8AAAE04gMAIIAYQJ0hUjFV7AWi/9rGQAykGYz/D5R/AAKIrgEA9jDIjWj4DLpYaNp/egUAQADRNAuAPILsMQYtoGBoGgMjAwMjMjZBYp8FyjNcm8UA16dtTNP+OkAA0SQFoHicQg8gApA4c0j1C0AAUT0A4EmaijEHCtAzRGYPUv0CEEBUDQB4UqdVaoWWIdQMAIAAoloAwGKe1rXWGQKBTKpfAAKIKgEAy/N0q7rxBAKpfgEIIIoDAOb5M7QurbGlhFBMO0n1C0AAURwAuBxCMC/DGkFQ9hkoTXzBaIy1UCTVLwABRFEAEFMoEdMQQm8UkZIV0NWT6heAAKIsAIiMfXhskYKJTA3/KQwAgAAiOwAgdTMRnofG+hkSPH+GhEBALxBJ9QtAAFEUAKA8THxLjoHkgCC2X3CGggAACCDyA4CIvAou3Ej1MFIgnSGyYQUuTKFZkVS/AAQQ2QFAqLBC7wgRTO741BBq/mqnwathUv0CEEBkBQAxDR+ykjseTGxhSKpfAAKIzO7wWSAkALSNGYzpPbgTSnpjDCCAyAwAwp47e/Us1Tx2lmg1pAc5QAAx0cpJxiQ4nlizCKq5RrptAAHERDsnMZAZJxSkAC3SbQMIICZaOeqsNvVKAGJTAOPqWYykmg0QQDRrBxBq95+hYrP4P1JHilS/AAQQzVIA49WzjGfxqDcmwXyQWQQdpEWePwACiLKmMAPpTWGSW4VE9AcoaQoDBBDFvUGCjgs1xtq8pV5nyJiizhBAAFEUAGeI7KwQMw5AbneY0vEAgAAa8AERrCkjlNixAEz7SfULQABRPiZIxhzAGWwpgkQzQIGErUNGql8AAojyMUFYr4/Og6K47CTVLwABNOKHxQECiJGc2V5GRkac3VFGMKKt5/HZQ6p/AAKIarPDMAedoXB6m1ChR+1ABggg6k+OIhVw1J4TPKNN/clRgACi2QIJaswSn0EeViMyVZHqF4AAoukKEYwFEnhGbsCehXryDPI8AqnVI4l+AQgguiyRAc8hYJkfAHsU66SJMdkph1S/AAQQ1WoBcvM20b09EgKAFAAQQIwjfcsMQACN+HWCAAE04gMAIIBGfAAABNCIDwCAABrxAQAQQCM+AAACaMQHAEAAjfgAAAigER8AAAE04gMAIIBGfAAABNCIDwCAAAMAeXtQaJR394AAAAAASUVORK5CYII='};var linecoordinates = [{coords: [[114.5, 31.41215504, 266.00],[115.05, 31.41168148, 266.26],[117.98, 31.46, 266.33],],name: 'foo',}]var linePoints = [{name: '线路工程1',value: [116.01129567, 31.41215504, 240],},{name: '线路工程2',value: [116.01395087, 31.48274472, 240]},];var option = {tooltip: {trigger: 'item',formatter: function (params) {console.log(params.seriesName);if (params && (params.seriesName === "station")) {return params.name;} else if (params && params.seriesName === "linePoints") {return params.name;} else if (typeof (params.value)[2] == "undefined") {return params.name + ' : ' + params.value;} else {return params.name + ' : ' + params.value[2];}}},{map: '安徽',// boxDepth: 50,//地图倾斜度boxHeight: 13,regionHeight: 12,roam: true,itemStyle: {// color: '#003852',color: '#3E7FB4',opacity: 1,borderWidth: 1.5,borderColor: '#4F8DBB',},viewControl: {alpha: 60,beta: -10,minBeta: -3600,maxBeta: 3600,distance: 170, // 地图视角 控制初始大小rotateSensitivity: 1, // 旋转zoomSensitivity: 1, // 缩放},label: {show: false,textStyle: {color: '#A0F368',fontSize: 13,// fontWeight: '500',// fontFamily:'Microsoft YaHei',backgroundColor: "rgba(0,0,0,0)"}},emphasis: {label: {show: false}},postEffect: true,light: {main: {anchor: "map",intensity: 1.0,shadow: true,color: '#fff',shadowQuality: 'ultra',alpha: 90,beta: 0},ambient: {color: '#fff',intensity: 0.3},//ambientCubemap 会使用纹理作为环境光的光源，会为物体提供漫反射和高光反射。可以通过 diffuseIntensity 和 specularIntensity 分别设置漫反射强度和高光反射强度。ambientCubemap: {exposure: 0,//漫反射的强度。diffuseIntensity: 5,//高光反射的强度。specularIntensity: 0,//texture: 'pisa.hdr',// 解析 hdr 时使用的曝光值exposure: 0.0}},temporalSuperSampling: {enable: 'auto'}},series: [{type: 'lines3D',coordinateSystem: 'geo3D',effect: {show: true,constantSpeed: 60,trailWidth: 6,trailLength: 0.3,trailOpacity: 1,spotIntensity: 10,period: 4},blendMode: 'lighter',polyline: true,lineStyle: {width: 2.5,color: '#00ccf4',opacity: .5},data: coordinates,zlevel: 10},{name: 'scatter3D',type: "scatter3D",coordinateSystem: 'geo3D',symbol: 'circle',symbolSize: 10,animation: true,opacity: 0.5,label: {show: true,formatter: '{b}',textStyle: {backgroundColor: "rgba(0,0,0,0)",color: '#fff',fontSize: 15,// fontWeight: '600'}},itemStyle: {color: '#9BF46E',borderWidth: 0,borderColor: '#fff' //气泡边的颜色},data: convertData(data)},{name: 'station',type: 'scatter3D',coordinateSystem: 'geo3D',symbol: pathSymbols.fill1,symbolSize: 20,opacity: 1,label: {show: true,position: 'left',formatter: (params) => {return params.data.name;},textStyle: {color: '#EEEC0D',fontSize: 13,fontFamily: 'PingFangSC',backgroundColor: 'transparent' // 更改label背景颜色}},itemStyle: {opacity: 1,// borderWidth: 0.5,// borderColor: '#fff'//气泡边的颜色},data: mapDate},{name: 'linecoordinates',type: 'lines3D',coordinateSystem: 'geo3D',polyline: 'true',blendMode: 'lighter',silent: true,effect: {show: true,trailWidth: 5,trailOpacity: 1,trailLength: 0.2,constantSpeed: 5},lineStyle: {width: 2.5,color: '#00ccf4',opacity: 1},data: linecoordinates,},{name: 'linePoints',type: 'scatter3D',coordinateSystem: 'geo3D',symbol: pathSymbols.fill1,symbolSize: 15,opacity: 1,itemStyle: {opacity: 1,color: '#EBE806',// borderWidth: 0.5,// borderColor: '#fff'//气泡边的颜色},label: {show: false,},emphasis: {label: {show: false}},data: linePoints},

4.鼠标滑到点上出现两个弹出框的，原因是 lable ，emphasis影响，设置show为 false

echarts 3d相关推荐

echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
echarts 3d地图
echarts 3d地图 var option = {title: {show:false,text: '地图',left: 'center',top: 20,textStyle:{color:'#f ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
echarts 3D earth实时攻击线路图
echarts 3D 透明地球需求 3D earth 透明度效果坐标数据的涟漪扩散效果效果图第三方插件 <script type="text/javascript" ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
echarts 3D立体图（江苏版）
npm install echarts@4.9.0 echarts-gl@1.0.1 --legacy-peer-deps 安装echarts插件和echarts 3D地图插件配置main.js i ...
【vue前端】Echarts 3D地球照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件
使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...
Echarts 3D散点图
文章目录以下是一个 html + echarts的案例 <!DOCTYPE html> <html> <head><meta charset="u ...
echarts 3d 散点图颜色条件查询
原文链接: echarts 3d 散点图颜色条件查询上一篇: layui 简单表格下一篇: echarts rgb hsv 颜色空间 $.get('data/asset/data/life-ex ...

echarts 3d

echarts 3d相关推荐

最新文章

热门文章