echart echart-gl

import { mapdata} from '@/api/sendjob/130000.js';

visualMap: {
min: 0,
max: 1500,
right: 'right',
top: 'bottom',
text: ['高', '低'],
textStyle: {
color: '#fff'
},
inRange: {
color: ['#16d9e5', '#18dd2f', '#e3cd14']
},
show: true
},
// dataRange: {
// show: false,
// x: 'right',
// y: 'bottom',
// splitList: [
// { start: 1000, label: '1000以上', color: 'rgab(25, 25, 112,0.9)' },
// { start: 500, end: 1000, label: '500-1000', color: 'rgab(0, 0, 139,0.9)' },
// { start: 200, end: 500, label: '200-500', color: 'rgab(0, 81, 255,0.9)' },
// { start: 100, end: 200, label: '100-200', color: 'rgab(33, 103, 255,0.9)' },
// { start: 50, end: 100, label: '50-100', color: 'rgab(92, 143, 255,0.9)' },
// { start: 20, end: 50, label: '20-50', color: 'rgab(128, 168, 255,0.9)' },
// { start: 0, end: 20, label: '0-20', color: 'rgab(181, 204, 255, 0.9)' }
// ],
// textStyle: {
// color: '#3899FF' // 值域文字颜色
// },
// selectedMode: false,
// color: ['#E0022B', '#E09107', '#A3E00B']
// },
series: [{
type: 'map3D', // 系列类型
name: 'map3D', // 系列名称
map: 'mapname', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
zoom: 1.23,
regionHeight: 5, //模型的高度
top: '-5%',
label: {
show: true, //是否显示标签。
position: ["50%", "50%"],
formatter: (params) => {
if (params.value !== undefined) {
return params.name + "：" + params.value;
} else {
return params.name;
}
},
textStyle: {
color: "rgba(255,255,255,1)", //地图初始化区域字体颜色
fontSize: 12,
opacity: 1,
backgroundColor: "rgba(15,48,108,0.95)",
borderColor: "RGBA(52, 154, 247, 1)",
borderWidth: 1,
shadowColor: "#fff",//地图模糊颜色
shadowBlur: "3",
position: "insideTop",
padding: [6, 8],
borderRadius: 0,
distanca: 20,
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
// textStyle: { color: "blue" }
}
},
itemStyle: {
areaColor: `transparent`,
normal: {
//静态模式下显示的默认样式
borderWidth: 1.6,
borderColor: "RGBA(23, 177, 255, 1)",
color: "RGBA(17, 51, 127, 0.5)",
}, //阴影效果
emphasis: {
//鼠标移上去的样式
borderWidth: 1.6,
borderColor: "RGBA(4, 21, 62, 0.8)",
color: "#0058B8",
}
},
viewControl: {
alpha: 75,
beta: 0,
rotateSensitivity: 0, // 地图旋转
animation: true,
zoomSensitivity: false,// 控制鼠标放大缩小
autoRotate: false, //是否开启视角绕物体的自动旋转查看
distance: 170, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
},
data: []
}]
};

// 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
mapechart .setOption(option);

echart echart-gl相关推荐

Echart在Openlayers的应用-航班的炫光特效
概述在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效展示. 效果实现代码: 1.Ec ...
echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款
(题图是使用 ECharts GL 渲染的纽约市建筑群) ECharts GL (后面统一简称 GL)为 ECharts 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见 ...
geoCoordMap数据，全国省市，4个直辖市，用于echart gl 3d地图
var geoCoordMap= {'北京': [116.4551, 40.2539],'东城区':[116.418757,39.917544],'西城区':[116.366794,39.915309 ...
全国省市，4个直辖市geoCoord数据，用于echart gl 3d地图
var geoCoordMap = {'北京': [116.4551, 40.2539],'东城区':[116.418757,39.917544],'西城区':[116.366794,39.91530 ...
python爬去中国天气网_python爬取中国天气网并展示最低温度
import requests from bs4 import BeautifulSoup import lxml import json from echarts import Echart,Bar ...
微信小程序iOS系统上echarts不能滑动的问题
在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显.作为一个微信小程序的新手开发,这个问题属实难倒我了. ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...
Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用
属性 window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数. 在窗口大小改变之后,就会触发resize事件. //vue页面 <template>& ...
分享一些好用的插件（大佬看了都说好）
前言最近在整理笔记的时候,发现平时收藏使用的插件的笔记比较乱,刚好抽空整理了一下,并提取一些精华部分放在这里,方便自己查看这里我分一下类主要为以下三大类: 开发中用的依赖或库 vscode插件其 ...

echart echart-gl

echart echart-gl相关推荐

最新文章

热门文章