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

最新推荐文章于 2024-06-28 10:33:43 发布

原创

最新推荐文章于 2024-06-28 10:33:43 发布 · 2.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #3d #javascript

本文介绍如何利用echarts和echarts-gl在vue3 TypeScript项目中实现3D效果的柱形图。通过数组循环生成多个图表实例，通过重叠和颜色渐变营造3D视觉，具体包括内层背景、顶部圆圈、实际值柱形图及底部元素的设置。

效果图：

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

内层背景的body（bar）
内层背景的顶部圆圈（pictorialBar）
外层绿色的实际值柱形图（bar）
外层顶部的圆圈（pictorialBar）
外层底部的圆圈（pictorialBar）
以及底部的圆盘是一个切图🥺

技术栈

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()
        })
    }<