echart 广州3d_Echarts实践-实现3D地球

本文展示了如何使用 Echarts 创建一个3D地球效果,并通过模拟随机数据来实现动态的线条效果。文章中详细介绍了配置项设置,包括地图、光照、视角控制等,以及如何动态更新数据来呈现动态的3D地球攻击线。
摘要由CSDN通过智能技术生成

class="earthmap"

id="chart_example6"

style="width:1500px;height:1221px;"

>

import $ from 'jquery'

import world from 'echarts/map/js/world.js'

import china from 'echarts/map/js/china.js'

export default {

data() {

return {}

},

mounted() {

this.initData()

},

methods: {

// 绘制图表

initData() {

//初始化canvas节点

let myChart = this.$echarts.init(

document.getElementById('chart_example6')

)

//随机获取点点坐标函数

let rodamData = function() {

let name = '随机点' + Math.random().toFixed(5) * 100000

// 终点经度

let longitude = 105.18

// 终点纬度

let latitude =

要在 Echarts实现世界地图发光和设置高亮,可以使用 Echarts 的特效和地图组件。 首先,要在 Echarts 中引入地图组件和特效组件,可以在 Echarts 的官网下载相应的组件库。然后,通过配置 Echarts 的 option 参数来设置地图的样式和特效。 下面是一个简单的示例代码,演示了如何在 Echarts实现世界地图发光和设置高亮: ```javascript // 引入地图组件和特效组件 echarts.registerMap('world', worldMapData); echarts.registerMap('china', chinaMapData); echarts.registerVisual(echarts.graphic.clipPointsByRect); echarts.registerVisual(echarts.graphic.clipRectByRect); echarts.registerVisual(echarts.graphic.clipPointsByRect); echarts.registerVisual(echarts.graphic.clipRectByRect); echarts.registerVisual(echarts.graphic.clipPointsByRect); echarts.registerVisual(echarts.graphic.clipRectByRect); echarts.registerVisual(echarts.graphic.clipPointsByRect); echarts.registerVisual(echarts.graphic.clipRectByRect); // 配置 option 参数 var option = { tooltip: { show: true, trigger: 'item' }, visualMap: { type: 'piecewise', splitNumber: 6, inverse: true, pieces: [ {min: 10000}, {min: 5000, max: 9999}, {min: 1000, max: 4999}, {min: 500, max: 999}, {min: 100, max: 499}, {max: 99} ], inRange: { color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000'] } }, series: [ { name: '世界地图', type: 'map', mapType: 'world', roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d', borderColor: '#111', borderWidth: 1 } }, label: { normal: { show: false }, emphasis: { show: false } }, data: [ {name: 'China', value: 100000}, {name: 'United States', value: 20000}, {name: 'Russia', value: 8000}, {name: 'Australia', value: 5000}, {name: 'Canada', value: 1000}, {name: 'Brazil', value: 500}, {name: 'Argentina', value: 200}, {name: 'Chile', value: 100}, {name: 'Mexico', value: 50}, {name: 'India', value: 20}, {name: 'Pakistan', value: 10}, {name: 'Bangladesh', value: 5}, {name: 'Japan', value: 1} ] } ], // 添加特效 graphic: [ { type: 'circle', shape: { cx: 100, cy: 100, r: 50 }, style: { fill: '#fff' }, zlevel: 100 } ] }; ``` 在上面的代码中,我们配置了一个世界地图,并且设置了数据值,通过 visualMap 来设置颜色区间和分段数目。在 series 中,我们设置了地图的样式和数据,通过 itemStyle 来设置选中时的样式。 最后,我们通过 graphic 参数来添加特效,上面的代码添加了一个圆形特效。您可以根据自己的需求来添加不同的特效效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值