Echarts3D柱狀圖-圓柱體-文字在柱體上垂直顯示的實現方法

全部代碼

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="utf-8"><title>3D柱狀圖-圓柱體-文字豎排</title>
</head>
<body style="height: 100%; margin: 0"><div id="main" style="height: 100%"></div><script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script><script type="text/javascript">// 當請求回數據后initData(['周一', '周二', '周三', '周四', '周五', '周六'], [100, 50, 70, 80, 60, 40])function initData(xData, yData) {var chartDom = document.getElementById('main');var bar = echarts.init(chartDom);let options = {// 直角坐標系內繪圖網格,設置組件距離容器的距離grid: {left: 50,top: 50,right: 50,bottom: 50},// 設置鼠標移入的提示，默認顯示tooltip: {},// 設置圖例legend: {textStyle: {color: '#999'}},// 設置x軸xAxis: {data: [],// 顯示x軸axisLine: {show: true},// 設置x軸的顏色和偏移量axisLabel: {color: '#999',rotate: 0},// 不顯示x軸刻度axisTick: {show: false}},// 設置y軸yAxis: {// 顯示y軸axisLine: {show: true},// 設置y軸的顏色axisLabel: {color: '#999',},// 不顯示y軸刻度axisTick: {show: false},// 不顯示分隔線splitLine: {show: false}},// 表示不同系列的列表series: []}// 設置頂部和底部的值let symbolData = [], newShadowHight = [];let heights = 0;yData.forEach(item => {symbolData.push(1)heights += item});newShadowHight = yData.map(item => heights);options.xAxis.data = xData;options.series = [// 底部{z: 2,type: 'pictorialBar',symbol: 'circle',symbolOffset: ['0%', '50%'],symbolSize: [30, 12],toolltip: {show: false},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#1f7eff'}, {offset: 1,color: '#64adff'}])},data: symbolData,},//內容區域{z: 1,type: 'bar',barWidth: 30,label: {normal: {show: true,position: 'inside',verticalAlign: 'middle', // 垂直居中顯示// rotate: 90, // 旋轉90度，使文字垂直顯示//formatter: '{a|{b}}',//{a|{c}萬人}formatter: function (params) {console.log(params);let txtArry = params.name.split('');let rs = "";for (var i = 0; i < txtArry.length; i++) {rs += txtArry[i] + "\n";}return rs;},rich: {a: {color: '#fff',fontSize: 14,align: 'center',},}}},data: yData},//內容的頂部{z: 3,type: 'pictorialBar',symbol: 'circle',symbolPosition: 'end',symbolOffset: ['0%', '-50%'],symbolSize: [30, 12],toolltip: {show: false,},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#1f7eff'}, {offset: 1,color: '#64adff',}])},label: {normal: {show: true,position: 'top',formatter: '{a|{c}萬人}',//{a|{c}萬人}rich: {a: {color: 'inherit',fontSize: 14,align: 'center'},}}},data: yData,},];// 設置配置項bar.setOption(options);window.addEventListener('resize', bar.resize);}</script>
</body>
</html>

效果圖

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/89861.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/89861.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/89861.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！