echarts 3D圆柱图

最新推荐文章于 2024-07-02 10:45:19 发布

置顶

~婷宝~

最新推荐文章于 2024-07-02 10:45:19 发布

阅读量1.5k

点赞数 2

文章标签： vue vue.js echarts

本文链接：https://blog.csdn.net/qq_42669897/article/details/126409288

版权

这篇博客展示了如何在Vue2和Vue3中利用ECharts创建一种伪3D效果的圆柱图。代码示例详细解释了如何通过设置不同系列的图形属性，包括渐变色、边框、圆形和条形，来实现这种立体视觉效果。同时，还提供了基础Echarts组件的封装方法。

摘要由CSDN通过智能技术生成

这圆柱图看起来是不是很像3d的呢。但它不是真正的3d，其实是用《象形图》拼积木一样拼凑出来的。哈哈哈，vue2、vue3两种写法有兴趣就往下看，废话不多说，上代码。

clindrical-plot-3d （vue3）

<template>
  <base-echarts
    dom-id="testEcharts"
    :option="option"
    :width="200"
    :height="300"
  />
</template>

<script setup>
import { reactive } from 'vue'
import BaseEcharts from '@/components/base-echarts' // 引入封装好的echarts组件
import echarts from 'echarts/lib/echarts'

const state = reactive({
  xData2: ['居家隔离进度'],
  schedule: 60, // 进度最大100
  barWidth: 150, // 圆柱的宽度
  circleHeight: 40 // 顶、中、底部圆形的高度
})
const option = reactive({
  xAxis: {
    data: state.xData2,
    show: false
  },
  yAxis: {
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      formatter: function () {
        return ''
      }
    }
  },
  // 提示框组件
  tooltip: {
    trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
    textStyle: {
      color: '#fff' // 文字颜色
    },
    // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
    // 水球图: {a}（系列名称），{b}（无），{c}（数值）
    // 使用函数模板   传入的数据值 -> value: number|Array,
    formatter: function (value) {
      return `${state.xData2[0]}: ${state.schedule}%`
    }
  },
  series: [
    // 中间数据
    {
      name: '',
      type: 'bar',
      barWidth: state.barWidth, // 圆柱的宽度
      barGap: '-100%',
      itemStyle: {
        color: function (params) {
          return new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0.05,
                color: 'rgba(15,114,190,0.9)'
              },
              {
                offset: 0.23,
                color: 'rgba(24,156,191,0.98)'
              },
              {
                offset: 0.5,
                color: 'rgba(25,98,191,1)'
              },
              {
                offset: 0.8,
                color: 'rgba(24,156,191,0.98)'
              },

              {
                offset: 0.95,
                color: 'rgba(23,151,191,.9)'
              }
            ],
            false
          )
        }
      },
      data: [state.schedule]
    },
    // 底部圆形
    {
      name: '',
      type: 'pictorialBar', // 象形图
      symbolSize: [state.barWidth, state.circleHeight], // 象形图大小
      symbolOffset: [0, state.circleHeight / 2], // 位移
      z: 0,
      itemStyle: {
        color: function (params) {
          return new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0.05,
                color: 'rgba(15,114,190,1)'
              },
              {
                offset: 0.23,
                color: 'rgba(24,156,191,1)'
              },
              {
                offset: 0.5,
                color: 'rgba(25,98,191,1)'
              },
              {
                offset: 0.8,
                color: 'rgba(24,156,191,1)'
              },

              {
                offset: 1,
                color: 'rgba(23,151,191,1)'
              }
            ],
            false
          )
        }
      },
      data: [100]
    },
    // 中部圆形
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [state.barWidth - 3, state.circleHeight],
      symbolOffset: [0, -(state.circleHeight / 2)],
      z: 12,
      itemStyle: {
        normal: {
          opacity: 1,
          color: '#189fc9',
          label: {
            show: true, // 开启显示
            position: 'top',
            offset: [0, 45],
            textStyle: {
              color: 'rgba(0,255,249,1)',
              fontSize: 42,
              fontFamily: 'DINCondensed-Bold'
            },

            formatter