Vue 中使用Echarts构建3D地球

一：要用Echarts实现3D地球除了 echarts还是远远不够的，除了echarts外我们还得引用 echarts-gl jquery 也是需要的不然会有多次报错

1.收首先在 main.js中分别引入所需的插件，

import ElementUI, { install } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import * as echarts from 'echarts'
import 'echarts-gl'
import jquery from 'jquery'Vue.use(ElementUI)
Vue.prototype.$ = jquery
// vue全局注入Echarts
Vue.prototype.$echarts = echarts

此外除了在main.js中在相应.vue 中也需要引用

import 'echarts-gl'
import $ from 'jquery' // 引入jQuery
import 'echarts/map/js/world.js' // 必须引入世界地图

使用echarts的3D功能全局引入Echarts-gl 一般建议装最低版本不然容易报错，命令安装

 npm install echarts-gl@1.1.0 --save

当效果实现前还需给一个有宽高的盒子

<div id="main" style="width:100%;height:500px;padding:0px;"></div>

js代码

import 'echarts-gl'
import $ from 'jquery' // 引入jQuery
import 'echarts/map/js/world.js' // 必须引入世界地图
// import * as echarts from 'echarts'
export default {name: 'login_new',methods: {// 绘制3D路径图draw () {var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'var myChart = this.$echarts.init(document.getElementById('main'))// eslint-disable-next-line no-unused-varsvar optionvar uploadedDataURL = ROOT_PATH + '/data-gl/asset/data/flights.json'myChart.showLoading()$.getJSON(uploadedDataURL, function (data) {myChart.hideLoading()function getAirportCoord (idx) {return [data.airports[idx][3], data.airports[idx][4]]}var routes = data.routes.map(function (airline) {return [getAirportCoord(airline[1]), getAirportCoord(airline[2])]})myChart.setOption({geo3D: {map: 'world',shading: 'realistic',silent: false, // 鼠标设置为不触发事件environment: '#333', // 背景色realisticMaterial: {roughness: 0.8,metalness: 0},postEffect: {enable: true},groundPlane: {show: false},light: {main: {intensity: 1,alpha: 30},ambient: {intensity: 0}},viewControl: {distance: 70, // 地图缩放程度alpha: 89, // 地图翻转程度panMouseButton: 'left',rotateMouseButton: 'right',rotateSensitivity: false, // 地图是否能旋转zoomSensitivity: false // 地图是否能缩放},itemStyle: {color: '#000' // 地图的颜色},regionHeight: 0.5 // 地图高度},series: [{type: 'lines3D',coordinateSystem: 'geo3D',effect: { // 特效线的配置show: true,trailWidth: 1,trailOpacity: 0.5,trailLength: 0.2,constantSpeed: 5 // 特效固定速度},blendMode: 'lighter',lineStyle: { // 特效线width: 0.2,opacity: 0.05},data: routes}]})// addEventListener监听事件处理函数window.addEventListener('keydown', function () {myChart.dispatchAction({type: 'lines3DToggleEffect',seriesIndex: 0})})})}},mounted () {this.draw()}
}

注意：我这是在vue项目中实现的，这样就完成了一个小型的关系图；

下面就是效果图了:

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地球相关推荐

最新文章

热门文章