vue+echarts绘制3D地图

1、安装依赖

npm install echarts@^4.9.0
npm install echarts-gl@1.1.0 --save

2、引入echarts,echarts-gl，添加全局变量

import echarts from 'echarts'
import echartsGL from 'echarts-gl'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$echartsGL = echartsGL

3、代码部分

 //地图echartsmapChart() {var myChart = this.$echarts.init(document.getElementById("map"));this.mapOption = {viewControl: {projection: "orthographic",panMouseButton: "left",rotateMouseButton: "left",zoomSensitivity: 1,panSensitivity: 1,beta: 2,alpha: 38,},geo3D: {map: "china",regionHeight: 0,itemStyle: {color: 'rgba(12, 64, 129, 0)',opacity: 1,borderWidth: 0,borderColor: "rgba(12, 64, 129, 0)",},label: {show: false,textStyle: {color: "#fff",fontSize: 16,opacity: 1,backgroundColor: "rgba(0,0,0,0)",},},emphasis: {label: {show: true,textStyle: {color: "#27a5b8",fontSize: 14,},},},light: {main: {color: "#fff",intensity: 1.2,shadow: false,alpha: 50,beta: 10,},ambient: {intensity: 0.3,},},},visualMap: [{type: "continuous",seriesIndex: 0,calculable: true,max: 300000,inRange: {color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']},left: 70,bottom: 20,},],series: [{type: "map3D",map: "china",data: [{name: "河北",value: 300000,},{name: "北京",value: 250000,},{name: "上海",value: 150000,},{name: "四川",value: 200000,},{name: "重庆",value: 100000,},{name: "青海",value: 300000,},],shading: "lambert",regionHeight: 3,// zlevel: 10,label: {show: true,textStyle: {color: "#fff",fontSize: 10,opacity: 1,backgroundColor: "rgba(0,0,0,0)",},},itemStyle: {color: 'rgba(12, 64, 129, 1)',opacity: 1,borderWidth: 1,borderColor: "#2affff",},// silent: false,instancing: true,emphasis: {//当鼠标放上去  地区区域是否显示名称label: {show: true,textStyle: {color: "#fff",fontSize: 16,backgroundColor: "rgba(50, 50, 50, 0.7)",},formatter: (params) => {return `${params.data.name}:${params.data.value || 0}家`;},},// itemStyle:{//   color:'rgba(50, 50, 50, 0.7)',// }},},{type: "bar3D",coordinateSystem: "geo3D",data: [{name: "北京",value: [116.41433, 39.91095, 50],},{name: "上海",value: [121.477091,31.235682, 55],},{name: "成都",value: [104.071738,30.576798, 49],},{name: "重庆",value: [106.563036,29.572766, 48],},],barSize: 1.5,shading: "lambert",bevelSmoothness: 0,bevelSize: 1,label: {show: false,},silent: false,minHeight: 4,itemStyle: {color: "rgb(223, 157, 0)",opacity: 1,},emphasis: {//当鼠标放上去  地区区域是否显示名称label: {show: true,distance: 0,textStyle: {color: "#fff",fontSize: 13,backgroundColor: "rgba(50, 50, 50, 0.7)",},formatter: (params) => {console.log(params);return `${params.data.name}:${params.data.value[2]}家`;},},},},],};myChart.setOption(this.mapOption);},

注：中国地图js我是在当前页面引入的。

vue+echarts绘制3D地图相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
echarts绘制3D地图
使用echarts和echarts-gl绘制3D地图,下面是一个demo演示,echarts版本4.6.0,echarts-gl版本1.1.2,demo启动前先自行安装,至于背景嘛,大家就自行放个背景 ...
vue echarts绘制省份地图并添加自定义标注
效果图在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 ...
vue+echarts实现3d地图——引入3d地图,加点,加点击事件
先看效果图: 1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往将下载好的josn文件重命名,简短点. 一共就三个文件第一个就是json文件, 第二个是myMap.js ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
echarts使用3d地图,解决塌陷
echarts使用3d地图打点先上图 1.要提前准备好茂名市.json文件,在使用的时候使用axios异步加载,如果是加载3d省级或者省以上可以参考这篇的引入方式 2.还要安装一些依赖包 1.依赖 ...
echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...

vue+echarts绘制3D地图

vue+echarts绘制3D地图相关推荐

最新文章

热门文章