Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)

 let geoCoordMap = {"海门": [121.15, 31.89],"鄂尔多斯": [109.781327, 39.608266],"库尔勒": [86.06, 41.68],"安阳": [114.35, 36.1],"开封": [114.35, 34.79],"济南": [117, 36.65],"德阳": [104.37, 31.13],"温州": [120.65, 28.01],"邯郸": [114.47, 36.6],"临安": [119.72, 30.23],"兰州": [103.73, 36.03],"沧州": [116.83, 38.33],"武汉": [114.31, 30.52],"大庆": [125.03, 46.58]};let data = [];for (let key in geoCoordMap) {data.push({name: key,value: 50});}let mindata = [];data.forEach(element => {mindata.push(element.value);});var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};option = {backgroundColor:"#061740",title: {text: '',x: 'left',top: "10",textStyle: {color: '#000',fontSize: 14}},tooltip: {show: true,formatter: (params) => {let data = params.name + "<br/>" + "值:" + params.value[2] + "<br/>" + "地理坐标:[" + params.value[0] + "," + params.value[1] + "]";return data;},},geo3D: {map: 'china',label: {show: false,textStyle: {color: "#fff", // 地图初始化区域字体颜色fontSize: 12, // 字体大小opacity: 1, // 字体透明度backgroundColor: "rgba(0,23,11,0)" // 字体背景色}},itemStyle: {areaColor: "#091c3d",opacity: 1,borderWidth: 1,borderColor: "#3fdaff"},emphasis: {label: {show: false},itemStyle: {areaColor: "#2B91B7"}},viewControl: {autoRotate: false,minBeta: -360,maxBeta: 360}},series: [{name: 'bar3D',type: "bar3D",coordinateSystem: 'geo3D',barSize: 1, //柱子粗细opacity: 1,minHeight: 0.05,bevelSize: 1, //柱子的倒角尺寸bevelSmoothness: 10, //柱子的倒角光滑度silent: false, //图形是否不响应和触发鼠标事件shading: "realistic", //着色效果animationDurationUpdate:6000,label: {show: true,formatter: '{b}'},data: [],}, {name: 'scatter3D',type: "scatter3D",coordinateSystem: 'geo3D',symbol: 'circle',symbolSize: 30,opacity: 1,label: {show: false,formatter: '{b}'},itemStyle: {color:"#ff0033",borderWidth: 0.5,borderColor: '#fff'},data: convertData(data)}]}setTimeout(function() {myChart.setOption({series: [{data: convertData(data)}]})}, 2000)

Done!

Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)相关推荐

R语言gganimate包创建可视化gif动图、可视化动图：、gganimate包创建动态线型图动画基于transition_time函数、使用geom_point函数显示动画移动的数据点
R语言gganimate包创建可视化gif动图.可视化动图:.gganimate包创建动态线型图动画基于transition_time函数.使用geom_point函数显示动画移动的数据点目录
R语言gganimate包创建可视化gif动图：gganimate包创建动态线型图动画基于transition_time函数、使用geom_point函数显示动画移动的数据点、并保留线图中的全部数据点
R语言gganimate包创建可视化gif动图:gganimate包创建动态线型图动画基于transition_time函数.使用geom_point函数显示动画移动的数据点.并保留线图中的全部数据点 ...
anacoda的spyder在调用matplotlib的时候无法显示动画效果【学习笔记】
ipython console的默认设置将图像结果显示在终端,但是这样显示存在的问题是无法显示动画效果,因此需要将动画效果显示到单独的窗口,按照下面的截图即可显示. 方法一.按照如下截图显示设置,重启 ...
UE4之ACharacter移动人物并显示动画效果
这里主要涉及两个类 ACharacter 和 UAnimInstance 两个类 ACharacter继承了APawn类,主要增加了几个组件,最大的特点是可以设置一个人形的形状.通过USkeletal ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
JetPack知识点实战系列十一：MotionLayout让动画如此简单
MotionLayout是ConstraintLayout的子类,所以它是一种布局类型,但是它能够为布局属性添加动画效果,是开发者实现动画效果的另一个新的选择. MotionLayout基础让动画跑 ...
linux命令画圣诞树图片,在Linux终端下显示动画的圣诞树
2018年12月24日是平安夜,这意味着2018年圣诞节要到了,在这个节日到来之际,送你一个有趣而酷炫的Linux Bash技巧,即在终端中显示动画圣诞树,只需要一个脚本并且执行这个脚本就可以了. 在 ...
python animation 轨迹_在jupyter noteb之外显示动画
我想用Jupyter笔记本来托管我的演示代码,但我不想在笔记本中嵌入动画.(因为嵌入视频很耗时.)我想运行单元格并弹出一个屏幕,就像在终端中运行代码一样.在from matplotlib.animat ...

Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)

Echarts实战GEO3D和bar3D延迟显示动画发光柱图的练习(未成功)相关推荐

最新文章

热门文章