echarts 圆柱体（带头部阴影）

已于 2024-07-18 09:47:29 修改
阅读量197 收藏
点赞数 2
文章标签： echarts javascript 前端
于 2024-05-08 16:58:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72552407/article/details/138578506
版权 

<template>
  <div :id="echartsId"></div>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { reactive, ref, onMounted, defineProps, watch, onUnmounted } from 'vue'
  const props = defineProps({
    echartsBool: {
      type: Boolean,
      default: false,
    },
    echartsId: {
      type: String,
      default: 'echartsId',
    },
    // 柱状宽度
    echartsBarWidth: {
      type: String,
      default: '30%',
    },
    // x轴数据
    xAxisDataJson: {
      type: Array,
      default: () => {
        return []
      },
    },
    // y轴数据
    yAxisJson: {
      type: Object,
      default: () => {
        return {
          name: '单位：数量',
        }
      },
    },
    // y轴字体样式
    nameTextStyle: {
      type: Object,
      default: () => {
        return {
          color: '#fff',
          fontSize: 14,
          fontWeight: 400,
          verticalAlign: 'bottom',
          // 左上字体位置
          padding: [0, -20, 10, 20],
          fontFamily: 'PingFang SC',
        }
      },
    },
    //  柱状图颜色
    barColorJson: {
      type: Object,
      default: () => {
        return {
          headColor1: 'rgba(43,194,195,1)',
          headColor2: 'rgba(43,194,195,0.5)',
          upBarColor: 'rgba(30,70,76,0.5)',
          bottomBarColor1: 'rgba(43,194,195,1)',
          bottomBarColor2: 'rgba(43,194,195,0.5)',
          topColor: 'rgba(30,70,76,1)',
        }
      },
    },
    // 数据展示
    dataList: {
      type: Array,
      default: () => {
        return [
          {
            name: '公司1',
            value: 73,
            max: 100,
          },
          {
            name: '公司2',
            value: 18,
            max: 100,
          },
          {
            name: '公司3',
            value: 43,
            max: 100,
          },
          {
            name: '公司4',
            value: 66,
            max: 100,
          },
        ]
      },
    },
    // legend方向
    legendDirection: {
      type: Object,
      default: () => {
        return {
          bottom: '0',
          top: '0',
          left: '0',
          right: '0',
        }
      },
    },
    // grid方向
    gridDirection: {
      type: Object,
      default: () => {
        return {
          bottom: '35',
          top: '25%',
          right: '0%',
          left: '10%',
        }
      },
    },
    // dataListLength 大小==长度约束柱状宽度  定时器==个数 两个不会同时出现大小暂时不用
    dataListLength: {
      type: Number,
      default: 8,
    },
  })
  const dataKey = reactive(['topData', 'bottomBar', 'bottomCircle', 'middleCircle', 'upBar'])
  const dataJson = ref({
    topData: [], // 头部数据
    bottomBar: [], // 底部立体柱子
    bottomCircle: [], // 底下圆片
    middleCircle: [], // 中间圆片
    upBar: [], // 上边的柱子
  })
  const dataClear = () => {
    dataKey.forEach((el) => {
      dataJson.value[el] = []
    })
  }
  const initDataAction = () => {
    dataClear()
    props.dataList.forEach((item) => {
      dataJson.value.topData.push({
        name: '',
        value: item.max,
        symbolPosition: 'end',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: props.barColorJson.topColor,
                },
                {
                  offset: 1,
                  color: props.barColorJson.topColor,
                },
              ],
              false
            ),
          },
        },
      })
      dataJson.value.bottomBar.push({
        value: item.value,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              [
                {
                  offset: 0,
                  color: props.barColorJson.bottomBarColor1,
                },
                {
                  offset: 1,
                  color: props.barColorJson.bottomBarColor2,
                },
              ],
              false
            ),
          },
        },
        name: item.name,
      })
      dataJson.value.bottomCircle.push({
        name: item.name,
        value: item.max,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              [
                {
                  offset: 0,
                  color: props.barColorJson.headColor1,
                },
                {
                  offset: 1,
                  color: props.barColorJson.headColor2,
                },
              ],
              false
            ),
          },
        },
      })
      dataJson.value.middleCircle.push({
        name: item.name,
        value: item.value,
        symbolPosition: 'end',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              0,
              [
                {
                  offset: 0,
                  color: props.barColorJson.headColor1,
                },
                {
                  offset: 1,
                  color: props.barColorJson.headColor2,
                },
              ],
              false
            ),
          },
        },
      })
      dataJson.value.upBar.push({
        name: item.name,
        value: item.max - item.value,
        itemStyle: {
          normal: {
            color: props.barColorJson.upBarColor,
          },
        },
      })
    })
  }
  const option = ref({
    backgroundColor: 'transparent',
    dataZoom: [
      {
        show: false, // 是否显示滑动条
        xAxisIndex: 0, // 表示从X轴的零刻度线开始的
        startValue: 0, // 数据窗口范围的起始数值
        endValue: props.dataListLength - 1, // 数据窗口范围的结束数值(一次性展示几个)
      },
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(43,194,195,0.5)',
      borderColor: 'rgba(43,194,195,1)',
      borderWidth: 2,
      padding: 5,
      textStyle: {
        color: 'rgba(43,194,195,1)',
        fontSize: 18,
        width: 300,
        height: 40,
      },
      formatter: function (params) {
        let tooltipBox = ''
        tooltipBox += '<div>' + params.name + '</div>'
        tooltipBox += '<div>' + params.seriesName + ':' + params.value + '%</div>'
        return tooltipBox
      },
      // formatter: '{c}' + '%',
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
      // 自定义的 CSS 样式
    },
    grid: {
      right: props.gridDirection.right,
      top: props.gridDirection.top,
      bottom: props.gridDirection.bottom,
      left: props.gridDirection.left,
    },
    // 设置图例
    legend: {
      icon: 'roundRect',
      show: true,
      data: ['得分率'],
      textStyle: {
        color: '#fff',
        fontSize: '14',
      },
      top: props.legendDirection.top,
      bottom: props.legendDirection.bottom,
      left: props.legendDirection.left,
      right: props.legendDirection.right,
    },
    xAxis: {
      type: 'category',
      data: props.xAxisDataJson,
      axisTick: {
        show: true,
        type: 'value',
        //文字在刻度中间
        alignWithLabel: true,
      },
      axisLine: {
        show: true,
      },
      // 字体样式
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
        lineHeight: '50', // 行高
        interval: 0,
        rotate: -45,
        formatter: function (value) {
          // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
          if (value.length > 5) {
            return `${value.slice(0, 5)}...`
          } else {
            return value
          }
        },
      },
    },
    yAxis: {
      type: 'value',
      name: props.yAxisJson.name,
      nameTextStyle: props.nameTextStyle,
      max: 100,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 将轴线设置为虚线
          color: '#35414C',
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        show: true,
        // 字体样式
        color: '#fff', //更改坐标轴文字颜色
        fontSize: 12, //更改坐标轴文字大小
      },
    },
    // 宽高
    // symbolSize: [20, 5],
    // xy偏移
    // symbolOffset: [0, -3],
    // label 展示
    //silent
    series: [
      // 头
      {
        name: '得分率',
        type: 'pictorialBar',
        // 做了滚动暂时不用了
        // symbolSize: props.dataList?.length > props.dataListLength ? ['30%', '4.5%'] : [30, 6],
        symbolSize: [30, 6],
        symbolOffset: [0, -3],
        z: 12,
        data: dataJson.value.topData,
        itemStyle: {
          color: 'rgba(43,194,195,0.7)', // 设置图标颜色为红色
        },
        silent: true,
      },
      //底部立体柱
      {
        name: '得分率',
        stack: '1',
        type: 'bar',
        silent: false,
        // 做了滚动暂时不用了
        // barWidth: props.dataList?.length > props.dataListLength ? props.echartsBarWidth : 30,
        barWidth: 30,
        data: dataJson.value.bottomBar,
        itemStyle: {
          normal: {
            color: {
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              type: 'linear',
              global: false,
              colorStops: [
                {
                  //第一节下面
                  offset: 0,
                  color: 'rgba(43,194,195,0.5)',
                },
                {
                  offset: 1,
                  color: '#2BC2C3',
                },
              ],
            },
          },
        },
      },
      //最底下的圆片
      {
        name: '得分率',
        type: 'pictorialBar',
        // 做了滚动暂时不用了
        // symbolSize: props.dataList?.length > props.dataListLength ? ['30%', '5%'] : [30, 8],
        symbolSize: [30, 8],
        symbolOffset: [0, 3],
        z: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(43,194,195,1)',
              },
              {
                offset: 1,
                color: 'rgba(43,194,195,1)',
              },
            ]),
          },
        },
        data: dataJson.value.bottomCircle,
        silent: true,
      },
      // 中间圆片
      {
        name: '得分率',
        type: 'pictorialBar',
        // 做了滚动暂时不用了
        // symbolSize: props.dataList?.length > props.dataListLength ? ['30%', '5%'] : [30, 8],
        symbolSize: [30, 8],
        symbolOffset: [0, -3],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(43,194,195,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(43,194,195,1)',
                },
              ],
              false
            ),
          },
        },
        z: 12,
        data: dataJson.value.middleCircle,
      },
      //上部立体柱
      {
        name: '得分率',
        stack: '1',
        type: 'bar',
        itemStyle: {
          normal: {
            color: 'rgba(43,194,195,1)',
            opacity: 0.7,
          },
        },
        // 顶部展示
        // label: {
        //   show: true,
        //   position: "top", //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
        //   distance: 20,
        //   color: "#FFFE00",
        //   fontSize: 30,
        //   formatter: function (item) {
        //     var a = 100;
        //     return a - item.value + "%";
        //   },
        // },
        silent: true,
        // 做了滚动暂时不用了
        // barWidth: props.dataList?.length > props.dataListLength ? props.echartsBarWidth : 30,
        barWidth: 30,
        data: dataJson.value.upBar,
      },
    ],
  })
  let bar = ''
  const initData = () => {
    // datalist操作
    initDataAction()
    option.value.series?.forEach((el, index) => {
      el.data = dataJson.value[dataKey[index]]
    })
    option.value.xAxis.data = []
    option.value.xAxis.data = props.xAxisDataJson
    // 设置配置项
    bar.setOption(option.value)
    window.addEventListener('resize', bar.resize)
    if (props.dataList.length > props.dataListLength - 1) {
      startAnimation()
    }
  }
  let timer = '' // 定时器
  const stopAnimation = () => {
    clearInterval(timer)
    timer = null
  }
  // 通过datalist进行长度判断是否滚动
  const startAnimation = () => {
    timer = setInterval(() => {
      // 每次向后滚动一个，最后一个从头开始
      if (option.value.dataZoom[0].endValue === props.dataList?.length - 1) {
        option.value.dataZoom[0].startValue = 0 // 数据窗口范围的起始数值
        option.value.dataZoom[0].endValue = props.dataListLength - 1 // 数据窗口范围的结束数值
      } else {
        option.value.dataZoom[0].startValue = option.value.dataZoom[0].startValue + 1 // 数据窗口范围的起始数值
        option.value.dataZoom[0].endValue = option.value.dataZoom[0].endValue + 1 // 数据窗口范围的结束数值
      }
      bar.setOption(option.value)
    }, 3000)
  }
  onMounted(() => {
    let chartDom = document.getElementById(`${props.echartsId}`)
    bar = echarts.init(chartDom)
    initData()
  })
  onUnmounted(() => {
    stopAnimation()
  })
  watch(
    () => props.echartsBool,
    () => {
      // 清除之前的视图
      bar.clear()
      stopAnimation()
      initData()
    }
  )
</script>

效果：

少吃芒果
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts-柱状图-柱状阴影
suiyqking的博客
01-29 1万+
柱状阴影 头部 echarts-柱状图-柱状阴影 var dom = document.getElementById(“container”); var myChart = echarts.init(dom); var app = {}; option = null; var data = [44, 55, 56, 78, 66, 33...
echart - 柱状图添加阴影
最新发布
kelly0721的博客
02-07 1231
柱状图阴影 axisPointer shadow
Echarts柱状图多个柱子的阴影配置
热门推荐
weixin_43794749的博客
09-03 1万+
文章目录1.效果2.代码 1.效果 2.代码 option = { tooltip: { show: "true", trigger: 'item', backgroundColor: '#235EAE', // 背景 borderWidth: 1, borderColor: '#6C99FF', ...
echarts中柱形图鼠标滑过显示柱子阴影 （附效果图）
weixin_73337633的博客
12-26 937
options配置项中tooltip加这段代码可以实现，好用点个赞呐！
echarts两个合并柱体（普通柱状图+象形柱图）共享一个柱体阴影
qq_40950174的博客
05-24 3006
1.普通柱图与象形柱图的合并 2.多个普通柱图与象形柱图的合并公用一个x轴与多个y轴 3.多个普通柱图与象形柱图的合并公用一个阴影背景 4.图例点击隐藏普通柱图与象形柱图的合并
echarts 实现圆柱体图形.zip
05-14
本篇文章将深入探讨如何使用 ECharts 实现圆柱体图形，以及可能遇到的问题和解决方案。 首先，我们要理解 ECharts 中柱状图的基本原理。柱状图是通过设置 `series` 中的 `type` 为 `'bar'` 来创建的。在默认情况下...
python绘制圆柱体的方法
09-20
在Python编程中，有时我们需要将数据可视化，包括创建三维图形，如圆柱体。VTK（Visualization Toolkit）是一个强大的开源库，专门用于处理三维图形和数据可视化。在Python中使用VTK来绘制圆柱体，我们可以遵循以下...
3D无限圆柱体Canvas特效特效代码
03-20
3D圆柱体是指具有三个维度（长度、宽度和高度）的几何形状，而在我们的场景中，"无限"一词意味着这些圆柱体会无止境地排列和循环，创造出一种动态的、连续的空间感。这种效果通常通过数学变换和视图控制来实现，使得...
纯CSS3绿色圆柱体图形特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个绿色的、具有立体阴影效果的圆柱体图形。CSS3作为现代网页设计的核心技术之一，提供了丰富的样式和动画功能，其中包括了构建3D图形的能力。我们将从以下几个方面详细...
three.js实现圆柱体
10-17
在示例中，我们创建了一个底部半径为80，顶部半径为50，高度为300的圆柱体，带有50个横截面环和50个高度环。为了给圆柱体添加纹理，我们加载一个图像纹理，并创建一个THREE.MeshLambertMaterial材质，将其与几何体...
Echarts属性之柱状图添加阴影
seimeii的博客
03-23 5070
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', label: {} } },
echarts入门 柱状图设置选中阴影宽度
weixin_45818290的博客
08-29 4425
设置柱状图的barWidth后，他的选中阴影部分却还是跟未设置前一样那么我们想要他的阴影宽度变窄，echarts官网是不支持这个属性的，我们的做法是设定两个x轴，选中阴影设置一个x轴，数据柱子设置一个x轴再在series中给数据柱子喝阴影柱子分别设置背景色等。.........
echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮
m0_52545254的博客
01-10 933
对于上图的需求，我们可以在series里设置两组数据，也就是一系列里有两个柱状图，缩小其距离使其重合从而显示 为主柱状条的侧阴影。主要是设置副柱状条的宽度为1，主副柱状图直接的barGap为0就可以。有个图表是要求柱状条的右下侧显示一个白色的侧阴影，一直没找到合适的方法， 加border或者shadowColor都达不到需求的效果。因为柱状图 中series里可以包含多组数据，有几组就代表一个系列中有几个数据。seriesName就是series属性里对应的两组数据的name。
固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列
qq_34027761的博客
06-09 5693
遇到一个需要固定宽度和对应的背景，背景比柱状要宽一点,并且选中有选中效果阴影 原本以为直接用官方的就可以了，结果官方的showBackground是不能这是宽度的，与柱状图同等宽度，选中阴影通过axisPointer做出来，没法设置宽度，也是差强人意 官网的是这样的：不符合要求 到论坛里，看到有人是通过用两个柱状图，用 barGap配置项偏移做出来的 但我我发现，这种方法做出来的，偏移量很难把握，而且他只能是一个柱状图，两个直接gg 最终我采用两x轴分开渲染背景和柱状图，避免柱状图数据被背景数据影响...
echarts 渐变柱状图 阴影与柱宽不一致
u011933026的博客
11-02 659
【代码】echarts 渐变柱状图 阴影与柱宽不一致。
echarts柱状图背后阴影如何同步y轴最大值问题？
Tombers的博客
05-28 921
echarts图
echarts柱状图及阴影偏移
m0_37394102的博客
08-18 1968
echarts柱状图及阴影刻度线
echats实现排名柱状图 自定义序号图片+斜边+阴影效果
weixin_48701221的博客
07-18 1637
使用echarts实现带斜边、底色阴影进度、自定义序号图片的柱状图
echarts立体柱状图
Xiang_Gong_Ya_的博客
12-19 398
【代码】echarts立体柱状图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值