echarts制作3D锥形金字塔
工作中遇到了這樣的問題，需要繪制3D金字塔，如圖所示：
echarts可以做平面的金字塔和漏斗圖，但是3D金字塔在官網(wǎng)上并沒有看到相關(guān)案例。查了相關(guān)資料，用象形柱狀圖來實(shí)現(xiàn)，具體代碼如下所示：
<!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標(biāo)示文字,標(biāo)示線
?? ??? ??? ??? ?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>
?運(yùn)行結(jié)果如圖所示：
?注意：圖片是自己的，三層金字塔，每一層切一張圖出來。
這是我找到的做法，如果各位大佬們有更好的寫法，歡迎留言評論哦~
總結(jié)
以上是生活随笔為你收集整理的echarts制作3D锥形金字塔的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： centos7 复制移动删除
- 下一篇： Install OpenStack Ki