Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法

全部代码

javascript 复制代码
<!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>

效果图

相关推荐
xptwop1 小时前
05-ES6
前端·javascript·es6
Heo1 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
前端小巷子2 小时前
深入 npm 模块安装机制
前端·javascript·面试
深职第一突破口喜羊羊3 小时前
记一次electron开发插件市场遇到的问题
javascript·electron
cypking3 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵3 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆4 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七4 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03014 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati5 小时前
JavaScript Promise完整指南
javascript