vue3+Echarts實現(xiàn)立體柱狀圖的示例代碼

更新時間：2025年07月13日 09:11:10 作者：天使的同類

本文介紹了使用Echarts實現(xiàn)立體柱狀圖的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

Echarts柱狀圖中文網(wǎng)：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

效果展示：

主要實現(xiàn)過程是三部分的組合，最上面是一個橢圓，中間是正常的柱子，下方再加上一個橢圓，就出來立體的效果。

分別展示三段組合代碼：

頂部的橢圓形(象形柱圖):pictorialBar

      {
        type: "pictorialBar", // pictorialBar(象形柱圖)
        symbolSize: [20, 5], // 圖形的大小用數(shù)組分別比表示寬和高,也樂意設置成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: "發(fā)電量",
        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數(shù)據(jù)
const xData = ref([
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
]);
// 柱狀data數(shù)據(jù)
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: "
 發(fā)電量   {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: "發(fā)電量（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], // 圖形的大小用數(shù)組分別比表示寬和高,也樂意設置成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: "發(fā)電量",
        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>

到此這篇關(guān)于vue3+Echarts實現(xiàn)立體柱狀圖的示例代碼的文章就介紹到這了,更多相關(guān)vue3 Echarts 立體柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: