echarts制作3D锥形金字塔
工作中遇到了这样的问题，需要绘制3D金字塔，如图所示：
echarts可以做平面的金字塔和漏斗图，但是3D金字塔在官网上并没有看到相关案例。查了相关资料，用象形柱状图来实现，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box" style="width: 500px;height: 400px;background: #000000;"></div>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
funnelFn();
function funnelFn() {
var loadingFunnel = {
title: '',
arrDataX: [],
arrDataY: [],
}
//title标示文字,标示线
loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {
return {
text: text,
top: top,
left: left,
textStyle: {
color: color,
fontStyle: fontStyle,
fontFamily: fontFamily,
fontSize: fontSize,
}
}
};
loadingFunnel.arrDataX = ['茶叶', '青椒', '大蒜'];
loadingFunnel.arrDataY = [123, 254, 325];
// loadingFunnel.arrData = [20, 40, 60];
var myChart = echarts.init(document.getElementById("box"));
option = {
title: [
loadingFunnel.title(loadingFunnel.arrDataX[0], '17%',
'62%', '#12e7e8', 'normal', 'sans-serif', '16'),
loadingFunnel.title(loadingFunnel.arrDataY[0], '22%', '62%', '#ffffff', 'normal', 'sans-serif',
'16'),
loadingFunnel.title(loadingFunnel.arrDataX[1], '38%',
'62%', '#4dc6ff', 'normal', 'sans-serif', '16'),
loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif',
'16'),
loadingFunnel.title(loadingFunnel.arrDataX[2], '55%',
'62%', '#eaad38', 'normal', 'sans-serif', '16'),
loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif',
'16'),
],
tooltip: {
show: true,
formatter: function(params) {
console.log(params)
return params.marker + params.name + ':' + params.data.number + '万'
}
},
grid: {
// containLabel: true,
left: '10%',
top: "19%",
bottom: "0%",
},
xAxis: {
show: false,
data: [
'',
'',
'',
''
],
axisTick: {
show: false
},
axisLabel: {
color: '#5EA2ED',
interval: 0
},
axisLine: {
lineStyle: {
color: '#1B5BBA',
}
}
},
yAxis: {
show: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#1B5BBA',
}
},
axisLabel: {
color: '#5EA2ED',
interval: 0
},
},
series: [{
type: 'pictorialBar',
// labelLine:{
// show:true,
// length2:20,
// lineStyle:{
// color:'red',
// width:5
// }
// },
// label: {
// show: true,
// position: 'right',
// formatter: '{b}{c} 万头',
// fontSize: 16,
// color: '#e54035',
// verticalAlign:'top'
// },
data: [{
name: loadingFunnel.arrDataX[0],
// z: 100,
value: 20,
number: loadingFunnel.arrDataY[0],
symbolSize: ['130%', '90%'],
symbolPosition: 'center',
symbolOffset: ['60%', '-250%'],
symbol: 'image://Funnel1.png',
}, {
name: loadingFunnel.arrDataX[1],
// z: 90,
value: 40,
number: loadingFunnel.arrDataY[1],
symbolSize: ['200%', '40%'],
symbolPosition: 'center',
symbolOffset: ['-22%', '-130%'],
symbol: 'image://Funnel2.png',
}, {
name: loadingFunnel.arrDataX[2],
// z: 80,
value: 60,
number: loadingFunnel.arrDataY[2],
symbolSize: ['280%', '35%'],
symbolPosition: 'center',
symbolOffset: ['-60%', '10%'],
symbol: 'image://Funnel3.png',
}, ]
}]
};
myChart.setOption(option);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="box" style="width: 500px;height: 400px;background: #000000;"></div><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">funnelFn();function funnelFn() {var loadingFunnel = {title: '',arrDataX: [],arrDataY: [],}//title标示文字,标示线loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => {return {text: text,top: top,left: left,textStyle: {color: color,fontStyle: fontStyle,fontFamily: fontFamily,fontSize: fontSize,}}};loadingFunnel.arrDataX = ['茶叶', '青椒', '大蒜'];loadingFunnel.arrDataY = [123, 254, 325];// loadingFunnel.arrData = [20, 40, 60];var myChart = echarts.init(document.getElementById("box"));option = {title: [loadingFunnel.title(loadingFunnel.arrDataX[0], '17%','62%', '#12e7e8', 'normal', 'sans-serif', '16'),loadingFunnel.title(loadingFunnel.arrDataY[0], '22%', '62%', '#ffffff', 'normal', 'sans-serif','16'),loadingFunnel.title(loadingFunnel.arrDataX[1], '38%','62%', '#4dc6ff', 'normal', 'sans-serif', '16'),loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif','16'),loadingFunnel.title(loadingFunnel.arrDataX[2], '55%','62%', '#eaad38', 'normal', 'sans-serif', '16'),loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif','16'),],tooltip: {show: true,formatter: function(params) {console.log(params)return params.marker + params.name + ':' + params.data.number + '万'}},grid: {// containLabel: true,left: '10%',top: "19%",bottom: "0%",},xAxis: {show: false,data: ['','','',''],axisTick: {show: false},axisLabel: {color: '#5EA2ED',interval: 0},axisLine: {lineStyle: {color: '#1B5BBA',}}},yAxis: {show: false,splitLine: {show: false},axisLine: {lineStyle: {color: '#1B5BBA',}},axisLabel: {color: '#5EA2ED',interval: 0},},series: [{type: 'pictorialBar',// labelLine:{// show:true,// length2:20,// lineStyle:{// color:'red',// width:5// }// },// label: {// show: true,// position: 'right',// formatter: '{b}{c} 万头',// fontSize: 16,// color: '#e54035',// verticalAlign:'top'// },data: [{name: loadingFunnel.arrDataX[0],// z: 100,value: 20,number: loadingFunnel.arrDataY[0],symbolSize: ['130%', '90%'],symbolPosition: 'center',symbolOffset: ['60%', '-250%'],symbol: 'image://Funnel1.png',}, {name: loadingFunnel.arrDataX[1],// z: 90,value: 40,number: loadingFunnel.arrDataY[1],symbolSize: ['200%', '40%'],symbolPosition: 'center',symbolOffset: ['-22%', '-130%'],symbol: 'image://Funnel2.png',}, {name: loadingFunnel.arrDataX[2],// z: 80,value: 60,number: loadingFunnel.arrDataY[2],symbolSize: ['280%', '35%'],symbolPosition: 'center',symbolOffset: ['-60%', '10%'],symbol: 'image://Funnel3.png',}, ]}]};myChart.setOption(option);}</script></body>
</html>
运行结果如图所示：
注意：图片是自己的，三层金字塔，每一层切一张图出来。
这是我找到的做法，如果各位大佬们有更好的写法，欢迎留言评论哦~
echarts制作3D锥形金字塔相关推荐
- html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
- echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
- echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图 工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
- Echart+Vue制作3d柱状图
Echart+Vue制作3d柱状图 先看一下效果图: 我是根据Echart官网上的实例稍加改变的:Echarts官网实例地址 下面直接上代码: HTML部分: <span class=" ...
- matlab传递闭包动态聚类图,用SPSS制作3D散点图全方位动态展示K均值聚类效果
SPSS系统聚类输出的树状图广受用户喜爱,二阶聚类也可以输出一系列美观的可视化图形用来观察聚类效果,但我们发现Kmeans均值聚类没有提供可视化程度高的图形,那怎么办,我们自己来制作. 数据小兵推荐使 ...
- php扇形分布图,PHP制作3D扇形统计图以及对图片进行缩放操作实例
这篇文章主要介绍了PHP制作3D扇形统计图以及对图片进行缩放操作实例,需要的朋友可以参考下 1.利用php gd库的函数绘制3D扇形统计图 header("content-type" ...
- iOS 10 SceneKit 新特性 – SceneKit 制作 3D 场景框架
来源:scauos(@大朕东) 链接:http://www.jianshu.com/p/b30785bb6c97 开头语: 今天的主题是探索iOS10 SceneKit的新功能,你可以观看今年WWDC ...
- ai如何旋转画布_「AI教程」使用AI制作3D立体文字效果
今天macdown小编要通过AI制作一种3D立体字体,主要的知识点是混合工具的使用.Shift键.Alt键的灵活运用.3D旋转命令.投影效果的创建等,学会后可以应用在需要的设计中,比如海报设计,log ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
最新文章
- 基于图像的三维模型重建——稠密点云重建
- OpenCASCADE：STEP翻译器的介绍
- es嵌套聚合dsl（求均值，求和）
- exposed beyond app through Intent.getData()，或FileUriExposedException
- Python 37 进程池与线程池 、 协程
- 低格硬盘用什么软件_迟来的评测：用了三年后的固态硬盘会变成什么样呢？
- 【CAS】Implementing generic double-word compare and swap for x86/x86-64
- 路由 RIP 协议 和 滞空路由
- phpstorm 新建拉取项目_Flink1.8实时数仓项目实战
- Linux总结篇 linux命令 虚拟机 - （二）
- 银河麒麟服务器无raid驱动安装处理
- linux分辨率变低了,解决 ubuntu 装N卡驱动后开机分辨率变低 转
- Linux沙箱技术介绍
- 当了两天向导，带他进行了上海都市游885
- I.MX6 Linux mipi配置数据合成
- java爬虫抓取极客时间专栏页面
- Android BroadcastReceiver
- SpringGateway 网关
- 鸿蒙智慧屏pro,鸿蒙OS带来了什么？荣耀智慧屏PRO现场轻体验
- 2017考研计算机真题错题本