echarts实现一个3d效果柱形图

这篇具有很好参考价值的文章主要介绍了echarts实现一个3d效果柱形图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

echarts里3d圆柱状图,echarts,echarts,3d,javascript
思路是:
通过数组循环生成多个echarts实例盒子,生成的柱形图只有一条数据,是由多个图表设置barGap: '-100%'实现重叠,并通过设置柱形图中间颜色到边上颜色的渐变形成类似3d的视觉效果,实际每一个柱形图是由以下几个图表实现的:⛽️

  1. 内层背景的body(bar)
  2. 内层背景的顶部圆圈 (pictorialBar)
  3. 外层绿色的实际值柱形图 (bar)
  4. 外层顶部的圆圈 (pictorialBar)
  5. 外层底部的圆圈 (pictorialBar)
    以及底部的圆盘是一个切图🥺
    echarts里3d圆柱状图,echarts,echarts,3d,javascript

技术栈

vue3 TypeScript echarts
准备:
需要安装echarts和echarts-gl

yarn add echarts
yarn add echarts-gl

代码:
template:

<div class="bottom-bar">
    <div v-for="item, index in barList" :key="index" class="bottom-item">
        <img class="bar-bottom" src="@/assets/images/fiveWater/bar-bottom.png" alt="">
        <div class="top-rate num-18 mgb12">
            {{ item.rate }}%
        </div>
        <div :ref="ref => item.dom = ref" class="bar-box mgb12" />
        <div class="bottom-name pang-18">
            {{ item.name }}
        </div>
    </div>
</div>

javascript:

import 'echarts-gl'
import * as echarts from 'echarts'

const barList = reactive([
	{ name: '基本能力', rate: 98, total: 100, done: 98, dom: ref() },
	{ name: '考核情况', rate: 100, total: 100, done: 100, dom: ref() },
	{ name: '推进情况', rate: 90, total: 100, done: 90, dom: ref() },
])
onMounted(() => {
    initBar()
})

const initBar = () => {
    data.barList.forEach((item) => {
        const series = [item.done]
        const staticData = toRaw(item)
        const output_3DBarCharts = echarts.init(item.dom)
        const options = get3DOptions(staticData, series)
        output_3DBarCharts.setOption(options)
        window.addEventListener('resize', () => {
            output_3DBarCharts.resize()
        })
    })
}
const get3DOptions = (xData: { name: string; rate: number; total: number; done: number }, seriesData: number[]) => {
    const { total, done } = xData
    const options = {
        grid: {
            left: 0,
            right: 0,
            top: 7,
            bottom: 20
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line' // 默认为直线,可选为:'line' | 'shadow'
            },
            textStyle: {
                fontFamily: 'TRENDS'
            },
            formatter: (params: any[]) => {
                let str = `<div>${params[0].axisValue}:</div>`
                str += `<div>完成数:${done}个</div>`
                str += `<div>总数:${total}个</div>`
                return str
            }
        },
        legend: {
            show: true,
            icon: 'circle',
            orient: 'horizontal',
            top: '90.5%',
            right: 'center',
            itemWidth: 16.5,
            itemHeight: 6,
            textStyle: {
                color: '#C9C8CD',
                fontSize: 14
            }
        },
        xAxis: [{
            show: false,
            data: [xData.name],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#aaaaaa',
                    fontSize: 12
                },
                margin: 30, // 刻度标签与轴线之间的距离。
            },
            axisLine: {
                show: false // 不显示x轴
            },
            axisTick: {
                show: false // 不显示刻度
            },
            boundaryGap: true,
            splitLine: {
                show: false,
                width: 1,
                lineStyle: {
                    type: 'solid',
                    color: '#03202E'
                }
            }
        }],
        yAxis: [{
            show: false,
            axisLabel: {
                interval: 'auto',
                show: true,
                textStyle: {
                    fontSize: 14,
                    color: '#fff',
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(49,176,255,0.05)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(49,176,255,0.5)',
                },
            },
        }],
        series: [
        // 柱顶圆片 背景
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [52, 20], // 调整截面形状
                symbolOffset: [0, -6],
                z: 12,
                symbolPosition: 'end',
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                itemStyle: {
                    normal: {
                        color: () => {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(0, 58, 77, 1)' },
                                { offset: 1, color: 'rgba(0, 158, 209, 1)' },
                            ])
                        },
                    }
                },
                data: [total]
            },
            // 柱体 背景
            {
                name: '',
                type: 'bar',
                barWidth: '100%',
                itemStyle: {
                    color: () => {
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: 'rgba(0, 58, 77, 1)' },
                            { offset: 0.5, color: 'rgba(0, 58, 77, 0)' },
                            { offset: 1, color: 'rgba(0, 58, 77, 1)' },
                        ])
                    },
                    opacity: 1
                },
                data: [total]
            },

            { // 顶部园片 数据实体
                name: '',
                type: 'pictorialBar',
                symbolSize: [52, 20], // 调整截面形状
                symbolOffset: [0, -6],
                z: 13,
                symbolPosition: 'end',
                itemStyle: {
                    normal: {
                        color: () => {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(159, 255, 224, 0.8)' },
                                { offset: 1, color: 'rgba(75, 210, 187, 0.8)' },
                            ])
                        },
                    }
                },
                data: seriesData || []
            },
            { // 柱体 数据实体
                name: '',
                type: 'bar',
                barWidth: '100%',
                barGap: '-100%',
                itemStyle: {
                    normal: {
                        color: () => {
                            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: 'rgba(0, 58, 77, 1)' },
                                { offset: 0.5, color: 'rgba(113,286,181, .7)' },
                                { offset: 1, color: 'rgba(0, 58, 77, 1)' },
                            ])
                        },
                    }
                },
                data: seriesData || []
            },
            { // 柱底圆片
                name: '',
                type: 'pictorialBar',
                symbolSize: [58, 18], // 调整截面形状
                symbolOffset: [0, 8],
                z: 12,
                itemStyle: {
                    color: () => {
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: 'rgba(0, 58, 77, 1)' },
                            { offset: 0.5, color: 'rgba(113,286,181, .7)' },
                            { offset: 1, color: 'rgba(0, 58, 77, 1)' },
                        ])
                    },
                },
                data: seriesData || []
            },
        ]
    }
    return options
}

css样式文章来源地址https://www.toymoban.com/news/detail-611801.html

.bottom-bar {
   display: flex;
   justify-content: space-between;
   margin-top: 25px;

   .bar-bottom {
       position: absolute;
       bottom: 27px;
       left: 50%;
       z-index: -1;
       width: 80px;
       transform: translateX(-50%);
   }

   .bottom-item {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .bar-box {
       width: 52px;
       height: 80px;
   }
}

到了这里,关于echarts实现一个3d效果柱形图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python可视化——3D柱形图

       

    2024年02月06日
    浏览(54)
  • 【Python】如何使用matlibplot绘制3D柱形图

    (1)构造需要显示的数据 如下图所示,X坐标取值为[0,1,2,3,4],Y坐标取值为[0,1,2,3,4,5,6,7,8],每一个(X,Y)组合的值Z=X+Y,所需要绘制的图就是在X,Y所对应的坐标位置上面根据Z的值来绘制柱形图。 (2)坐标设置 将坐标网格化, X=[0,1,2,3,4],Y=[0,1,2,3,4,5,6,7,8]网格化的结果,如下图

    2024年02月16日
    浏览(36)
  • Echarts 3d饼状图

    记录使用Echarts 实现3D饼状图的过程。 效果图: 1.首先安装echarts 3d插件 2.封装组件 封装方法

    2024年02月11日
    浏览(35)
  • Matplotlib可视化数据分析图表下(常用图表的绘制、折线图、柱形图、直方图、饼形图、散点图、面积图、热力图、箱形图、3D图表、绘制多个图表、双y轴可视化图表、颜色渐变图)

    本文来自《Python数据分析从入门到精通》_明日科技编著 本节介绍常用图表的绘制,主要包括绘制折线图、绘制柱形图、绘制直方图、绘制饼形图、绘制散点图、绘制面积图、绘制热力图、绘制箱型图、绘制3D图表、绘制多个子图表以及图表的保存。对于常用的图表类型以绘制

    2023年04月23日
    浏览(54)
  • Cesium和Echarts的完美集成展示3D柱状图、折线图和饼状图

    在本文中,我们将介绍如何将Cesium和Echarts两个强大的数据可视化工具进行集成,实现在Cesium地球上展示3D柱状图、折线图和饼状图的功能。Cesium是一个用于创建基于Web的地球浏览和可视化应用程序的JavaScript库,而Echarts是一个功能强大的数据可视化库,支持多种图表类型。 首

    2024年02月04日
    浏览(112)
  • 前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月12日
    浏览(45)
  • vue echarts实现3D效果柱状图

    在vue2项目里面,研究了哈,这里记录下eacharts 实现3D效果柱状图 在main.js引入eacharts 展示效果:大屏demo

    2024年02月15日
    浏览(42)
  • Echarts实现3D地球加卫星环绕效果

    通过echarts实现自动旋转3D地球加卫星环绕效果 全部使用 按需使用 代码如下: 卫星环绕效果通过scatter3D实现,将symbolSize设置为0,通过label-textStyle-backgroundColor-image设置卫星图片,代码如下: 卫星伴随地球自转,缺点在于速度与地球相同,暂时未找到更好的替代方法。 完整代

    2024年02月17日
    浏览(39)
  • echarts使用二维地图实现好看的3D效果

    内容概要: 使用echarts的二维地图模拟三维立体动态风格的地图效果,地图边界还带有动态流动线条效果,既有三维的立体效果,又避免了三维地图占用内存资源高的问题。 目标人群: 前端开发工程师,大屏可视化开发人员。 使用场景: 使用echarts二维地图模拟三维地图效果

    2024年02月11日
    浏览(41)
  • Pyecharts绘制图表大全——柱形图

    说明:本文代码资料等来源于Pyecharts官网,进行了一些重要节点的备注说明梳理,便于学习。 今日学习柱形图! 目录 百分比柱形图  x轴标签旋转  堆叠数据  动态宏观经济指标图  通过 dict 进行配置柱形图  区域选择组件配置项  区域缩放配置项  好全的工具箱!  类似于

    2024年02月05日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包