vue3+Echarts实现立体柱状图的示例代码

更新时间：2025年07月13日 09:11:10 作者：天使的同类

本文介绍了使用Echarts实现立体柱状图的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Echarts柱状图中文网：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

效果展示：

主要实现过程是三部分的组合，最上面是一个椭圆，中间是正常的柱子，下方再加上一个椭圆，就出来立体的效果。

分别展示三段组合代码：

顶部的椭圆形(象形柱图):pictorialBar

      {
        type: "pictorialBar", // pictorialBar(象形柱图)
        symbolSize: [20, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
        symbolOffset: [0, 3], // 图形相对于原本位置的偏移
        z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#17A8A0",
            },
            {
              offset: 1,
              color: "#5AEA80",
            },
          ]),
        },
        data: columnData.value,
      },

中间的柱子:bar

      {
        name: "发电量",
        type: "bar",
        barWidth: 20,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: "#17A8A0",
              },
              {
                offset: 1,
                color: "#5AEA80",
              },
            ],
          },
        },
        data: columnData.value,
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF",
          fontSize: 14,
        },
      },

底部的椭圆形(象形柱图):pictorialBar

     {
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, -5],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#17A8A0",
            },
            {
              offset: 1,
              color: "#5AEA80",
            },
          ]),
        },
        data: columnData.value,
      },

整体代码如下：

<template>
  <div
    id="stereoscopicChart"
    style="width: 100%; height: 270px"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
// 横坐标data数据
const xData = ref([
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
]);
// 柱状data数据
const columnData = ref([
  394, 194, 287, 189, 139, 420, 385, 239, 279, 379, 277, 237,
]);

let myStereoscopicChart: echarts.ECharts | null = null;
const showStereoscopicEcharts = () => {
  if (!myStereoscopicChart) {
    const stereoscopicChartDom = document.getElementById("stereoscopicChart");
    myStereoscopicChart = echarts.init(stereoscopicChartDom);
  }
  const stereoscopicOption = {
    tooltip: {
      trigger: "axis",
      formatter: "{b}
 发电量   {c}kWh",
      type: "line",
      axisPointer: {
        lineStyle: {
          color: "#17A8A0",
        },
      },
      backgroundColor: "rgba(7,18,26, 1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        align: "left",
      },
    },
    // 图例
    legend: {
      show: false,
    },
    // 图表位置
    grid: {
      left: "5%",
      right: "5%",
      top: "18%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#415264",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        data: xData.value,
      },
    ],
    yAxis: [
      {
        name: "发电量（kWh）",
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
        axisLabel: {
          color: "rgba(255,255,255,0.2)",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      // 底部的椭圆形(象形柱图):pictorialBar
      {
        type: "pictorialBar", // pictorialBar(象形柱图)
        symbolSize: [20, 5], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
        symbolOffset: [0, 3], // 图形相对于原本位置的偏移
        z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#17A8A0",
            },
            {
              offset: 1,
              color: "#5AEA80",
            },
          ]),
        },
        data: columnData.value,
      },
      {
        name: "发电量",
        type: "bar",
        barWidth: 20,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: "#17A8A0",
              },
              {
                offset: 1,
                color: "#5AEA80",
              },
            ],
          },
        },
        data: columnData.value,
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF",
          fontSize: 14,
        },
      },
      {
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, -5],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#17A8A0",
            },
            {
              offset: 1,
              color: "#5AEA80",
            },
          ]),
        },
        data: columnData.value,
      },
    ],
  };
  stereoscopicOption && myStereoscopicChart.setOption(stereoscopicOption);
};
const resizeChart = () => {
  if (myStereoscopicChart) {
    myStereoscopicChart.resize();
  }
};
onMounted(() => {
  showStereoscopicEcharts();
  window.addEventListener("resize", resizeChart);
});
</script>

到此这篇关于vue3+Echarts实现立体柱状图的示例代码的文章就介绍到这了,更多相关vue3 Echarts 立体柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue循环el-button实现点击哪个按钮,那个按钮就变色
这篇文章主要介绍了vue循环el-button实现点击哪个按钮,那个按钮就变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue quill editor 使用富文本添加上传音频功能
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。这篇文章主要介绍了vue-quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
2020-01-01
Vue 全局loading组件实例详解
这篇文章主要介绍了Vue 全局loading组件,需要的朋友可以参考下
2018-05-05
vue + elementUI实现省市县三级联动的方法示例
这篇文章主要介绍了vue + elementUI实现省市县三级联动的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue同一路由强制刷新页面的实现过程
这篇文章主要介绍了解决VUE同一路由强制刷新页面的问题，本文给大家分享实现过程，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
Vue应用中504错误（Gateway timeout）的原因与解决方法
在Vue前端应用中遇到504代理错误通常是由于请求在到达服务器之前超时,504错误表示网关超时,可能由后端服务响应慢、网络问题、代理配置错误、请求负载过大、前端请求超时设置不当、服务器资源不足或第三方服务问题引起
2024-09-09
vue3使用video.js播放m3u8格式视频的完整代码
M3U8是一种基于HTTP Live Streaming (HLS)的视频格式,它支持视频的分段传输,非常适合用于网络直播和点播服务,这篇文章主要介绍了vue3使用video.js播放m3u8格式视频的相关资料,需要的朋友可以参考下面
2025-08-08
某些场景下建议vue query代替pinia原理解析
这篇文章主要为大家介绍了某些场景下建议vue-query代替pinia原理解析,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue.js原理分析之nextTick实现详解
这篇文章主要给大家介绍了关于Vue.js原理分析之nextTick实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue使用axios跨域请求数据问题详解
这篇文章主要为大家详细介绍了vue使用axios跨域请求数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10

vue3+Echarts实现立体柱状图的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具