Vue中使用Echarts构建3D地球

在main.js引入echarts

//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

使用echart的3d功能需要另外安装echarts-gl
安装指令：

npm install echarts-gl

直接上代码:

<template><div class="chart-container" style="width: 100%;"><el-row ><el-col :span="24"><div id="chartMaine3" style="width:100%; height:560px;"></div></el-col></el-row></div>
</template><script>// 使用echart的3d功能需要另外安装echarts-gl  安装指令： cnpm install echarts-glimport 'echarts-gl'export default {name: "Demo2",data() {return {chartMaine3:null,}},methods: {drawMaine3Chart(){this.chartMaine3 = this.$echarts.init(document.getElementById('chartMaine3'));var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';this.$axios({url: 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data-gl/asset/data/flights.json',headers:'',data: {},method: 'get',success: (data) => {var airports = data.airports.map(function (item) {return {coord: [item[3], item[4]]};});function getAirportCoord(idx) {return [data.airports[idx][3], data.airports[idx][4]];}// Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]var routesGroupByAirline = {};data.routes.forEach(function (route) {var airline = data.airlines[route[0]];var airlineName = airline[0];if (!routesGroupByAirline[airlineName]) {routesGroupByAirline[airlineName] = [];}routesGroupByAirline[airlineName].push(route);});var pointsData = [];data.routes.forEach(function (airline) {pointsData.push(getAirportCoord(airline[1]));pointsData.push(getAirportCoord(airline[2]));});var series = data.airlines.map(function (airline) {var airlineName = airline[0];var routes = routesGroupByAirline[airlineName];if (!routes) {return null;}return {type: 'lines3D',name: airlineName,effect: {show: true,trailWidth: 2,trailLength: 0.15,trailOpacity: 1,trailColor: 'rgb(30, 30, 60)'},lineStyle: {width: 1,color: 'rgb(50, 50, 150)',// color: 'rgb(118, 233, 241)',opacity: 0.1},blendMode: 'lighter',data: routes.map(function (item) {return [airports[item[1]].coord, airports[item[2]].coord];})};}).filter(function (series) {return !!series;});series.push({type: 'scatter3D',coordinateSystem: 'globe',blendMode: 'lighter',symbolSize: 2,itemStyle: {color: 'rgb(50, 50, 150)',opacity: 0.2},data: pointsData});this.chartMaine3.setOption({legend: {selectedMode: 'single',left: 'left',data: Object.keys(routesGroupByAirline),orient: 'vertical',textStyle: {color: '#fff'}},globe: {environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',heightTexture:ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',displacementScale: 0.1,displacementQuality: 'high',baseColor: '#000',shading: 'realistic',realisticMaterial: {roughness: 0.2,metalness: 0},postEffect: {enable: true,depthOfField: {enable: false,focalDistance: 150}},temporalSuperSampling: {enable: true},light: {ambient: {intensity: 0},main: {intensity: 0.1,shadow: false},ambientCubemap: {texture: ROOT_PATH + '/data-gl/asset/lake.hdr',exposure: 1,diffuseIntensity: 0.5,specularIntensity: 2}},viewControl: {autoRotate: false},silent: true},series: series});window.addEventListener('keydown', function () {series.forEach(function (series, idx) {this.chartMaine3.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: idx});});});},error:(e)=>{}})},drawCharts() {this.drawMaine3Chart()},},mounted: function () {this.drawCharts()},updated: function () {this.drawCharts()}}
</script><style scoped>.chart-container {background-color:white;height: 100%;width: 100%;}.el-col {padding: 30px;}
</style>

效果图：

Vue中使用Echarts构建3D地球相关推荐

Vue中使用Echarts构建3D地球层+模拟时钟
文章目录前言一.Echarts示例二.使用步骤 1.引入库 2.完整代码总结前言 Echarts官网上的例子大多是原生js,那么我们在vue项目中该如何使用?本文举两个例子. 一.Ech ...
在vue中使用Echarts的3D柱状图
该文章为记录,避免再次踩坑安装所需依赖版本: "echarts": "^4.9.0", "echarts-gl": "^1.1. ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...

Vue中使用Echarts构建3D地球

Vue中使用Echarts构建3D地球相关推荐

最新文章

热门文章