Echarts——按数据系列设置设置3D柱状比例图

最新推荐文章于 2025-07-12 14:11:23 发布

yeeeee!

最新推荐文章于 2025-07-12 14:11:23 发布

阅读量837

点赞数 9

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_43130844/article/details/135482462

本文详细描述了如何使用ECharts库在Vue应用中创建一个3D柱状图，通过stack参数实现数据堆叠，展示已完成和未完成的比例。包括头部、主体和底部的pictorialBar设置以及bar类型的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置3D柱状图的关键：每个3D柱状图需要分成3部分进行实现，分别是头部和底部使用type: 'pictorialBar'设置柱状图的头部及底部，然后中间主体部分使用type: 'bar'。
同时要做成显示比例的效果，这里使用的方式是通过stack参数实现。stack——数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置。这个例子就是通过堆叠每个系列中的“已完成”和“未完成”的数据来实现数据的比例显示。

<template>
  <div id="app">
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
   
   
  name: 'App',
  mounted () {
   
   
    console.log(this.init);
    this.$nextTick(() => {
   
   
      this.init()
    })
  },
  methods: {
   
   
    init () {
   
   
      const sDataOne = [2, 3, 4]
      const sDataTwo = [5, 9, 1]
      const sAllData = [7, 12, 5]
      const option = {
   
   
        // 提示框
        tooltip: {
   
   
          trigger: 'axis',
          axisPointer: {
   
   
            type: 'shadow'
          },
          formatter: function (e) {
   
   
            const str =
                e[1].axisValueLabel + '：' +
                '<br>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3388FF;'></span>" +
                '' +
                e[1].seriesName + '：' + e[1].data +
                '<br>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FF9553;'></span>" +
                '' +
                e[4].seriesName + '：' + e[4].data
            return str
          }
        },
        /** 区域位置 */
        grid: {
   
   
          top: 10,
          right: 0,
          bottom: 20,
          left: 20
        },
        // X轴
        xAxis: {
   
   
          data: ['数据集一', '数据集二', '数据集三'],
          type: 'category',
          axisLine: {
   
   
            show: true,
            lineStyle: {
   
   
              color: '#AAB9CE'
            }
          },
          axisLabel: {
   
   
            color: '#222F40'
          }
        },
        yAxis: {
   
   
          show: true,
          splitNumber: 4,
          axisLine: {