Echarts 3D柱形图和3D堆叠柱形图实现

已于 2023-05-29 20:00:58 修改
阅读量4.6k 收藏 19
点赞数 4
文章标签： echarts 3d 前端 javascript
于 2023-05-28 10:53:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1076233241/article/details/130909831
版权

【Echarts】3D双柱形图、堆叠柱形图实现

实现目标展示

在这里插入图片描述

在这里插入图片描述

1、双柱图实现步骤

内容分析

此处采用的双柱样式，来源于链接: 点击此处跳转。
我对其进行了样式的修改，得到了如图所示的结果。这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  getEcharts3DBar();
});

function getEcharts3DBar() {

  var chartDom = document.getElementById('chartOne');
  var myChart = echarts.init(chartDom);
  // 计划开工项目
  var zzx1 = [20, 19, 40];
  var zx = zzx1.map((item) => {
    return 1000 - item;
  });
  // 累积开工项目
  var wgx1 = [10, 1, 90];
  var wg = wgx1.map((item) => {
    return 1000 - item;
  });

  var barWidth = 40;
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function(e) {
        // console.log(e);
        var str =
            e[6].axisValue +
            "<br>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
            e[6].color.colorStops[0].color +
            ";'></span>" +
            "" +
            e[6].seriesName +
            " : " +
            e[6].value +
            "个<br>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
            e[8].color.colorStops[0].color +
            ";'></span>" +
            "" +
            e[8].seriesName +
            " : " +
            e[8].value +
            "个";
        return str;
      },
    },
    //图像与周边距离的调整
    grid: {
      left: "2%",
      right: "4%",
      bottom: "4%",
      top: "20%",
      containLabel: true,
    },
    //图例的调整
    legend: {
      data: ["计划开工项目", "累积开工项目"],
      show:true,
      textStyle: {
        color: "#00ffff",
        fontSize: 14,
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35,
      color: "#242424",
      selectedMode: true,
    },
    //x轴调整
    xAxis: {
      type: "category",
      data: [
        "高速公路",
        "国道干线",
        "农村公路",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#15205B",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontFamily: "Microsoft YaHei",
          color: "#fff", // x轴颜色
          fontWeight: "400",
          fontSize: "14",
        },
        interval: 0, //标签设置为全部显示
        margin: 15,
        lineHeight: 15,
      },
    },
    //y轴调整
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#15205B",
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(135,140,147,1)", //左侧显示线
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show:false,
      },
    },
    series: [
      // 计划产值中间正方形
      {
        type: "pictorialBar",
        symbol: "diamond",//设置样式为菱形
        symbolSize: [barWidth, 8],//设置菱形的宽高
        symbolOffset: [-24, -4],//设置菱形的位置偏移量
        symbolPosition: "end",//设置菱形位置
        z: 12,
        color: "#3185FF",
        data: zzx1,
      },
      // 实际产值中间正方形
      {
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [24, -4],
        symbolPosition: "end",
        z: 12,
        color: "#1BCC98",
        data: wgx1,
      },
      //  计划产值底部正方形
      {
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [-24, 4],
        z: 12,
        color: "#161D6E",
        data: zzx1,
      },
      // 实际产值底部正方形
      {
        name: "",
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [26, 4],
        color: "#151D6E",
        z: 12,
        data: wgx1,
      },
      // 计划产值上部正方形
      {
        data: [100, 100, 100, 100, 100],
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [-24, -4],
        color: "#283190",
        symbolPosition: "end",
      },
      // 实际产值上部正方形
      {
        data: [100, 100, 100, 100, 100],
        type: "pictorialBar",

        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [24, -4],
        color: "#283190",
        symbolPosition: "end",
      },
      // 计划产值进度柱子
      {
        name: "计划开工项目",
        type: "bar",
        barWidth: barWidth,
        // zlevel: 2,
        stack: "1",
        itemStyle: {//这一串就是图形渐变色的来源
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#2863D2",
            },
              {
                offset: 1,
                color: "#161D6E",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        label: {
          show: true,
          position: ["-18", "-18"],
          color: "#00f8ff",
          fontSize: 12,
        },
        data: zzx1,
      },
      // 计划产值底部柱子
      {
        data: zx,
        type: "bar",

        barWidth: barWidth,
        stack: "1",

        zlevel: -1,
        itemStyle: {
          normal: { 
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#182075",
            },
              {
                offset: 1,
                color: "#182075",
              },
            ]),
            barBorderRadius: 0,
          },
        },
      },
      // 实际产值进度柱子
      {
        name: "累积开工项目",
        type: "bar",
        stack: "2",
        barWidth: barWidth,
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#19958B",
            },
              {
                offset: 1,
                color: "#151B6F",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        label: {
          show: true,
          position: ["18", "-18"],
          color: "#00f8ff",
          fontSize: 12,
        },
        data: wgx1,
      },
      // 实际产值底部柱子
      {
        data: wg,
        type: "bar",
        barWidth: barWidth,
        stack: "2",

        zlevel: -1,
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#182075",
            },
              {
                offset: 1,
                color: "#182075",
              },
            ]),
            barBorderRadius: 0,
          },
        },
      },
    ],
  };
  option && myChart.setOption(option);
}

</script>

2、堆叠图实现步骤

内容分析

实现一个这样的3D图，其实，是利用了5个部分进行拼接而成。3个底部的菱形，2个直边。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。菱形也不是纯色的，而是采用了分段的染色，这些部分都会在接下来的代码之中标明。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  create();
});

function create(){
  var chartDom = document.getElementById('chart');
  var myChart = echarts.init(chartDom);
  var xData = ["国道", "省道", "县道", "乡道", "村道"];
// 计划数据数组
  var planData = [328, 1488, 360, 22, 922];
// 完成数据数组
  var completeData = [320, 132, 101, 0, 90];

  var color = [
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      //给菱形上色
      colorStops: [
        {
          offset: 0,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#7ed1e3",
        },
        {
          offset: 1,
          color: "#7ed1e3",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      //给菱形上色
      colorStops: [
        {
          offset: 0,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#cdbf38",
        },
        {
          offset: 1,
          color: "#cdbf38",
        },
      ],
    },
  ];
  var barWidth = 30;
  var constData = [];
  var showData = [];
  var otherData = [];
  
//计算堆叠数据为多少
  for (var i = 0; i < planData.length; i++) {
    planData[i] = Number(planData[i]);
    completeData[i] = Number(completeData[i]);
    otherData[i] = planData[i] - completeData[i];
    if (planData[i] <= 0) {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
            color: "rgba(0,0,0,0)",
          },
        },
      });
    } else {
      if (completeData[i] == planData[i]) {
        constData.push({
          value: 1,
          itemStyle: {
            normal: {
              color: color[1],
            },
          },
        });
      } else {
        constData.push(1);
      }
      if (completeData[i] > 0) {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#e9d86c",
              borderWidth: 2,
              color: "#e9d86c",
            },
          },
        });
      } else {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#89e3ec",
              borderWidth: 2,
              color: "#89e3ec",
            },
          },
        });
      }
    }
  }

  var option = {
  //调整光标移入，展示数据的样式
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return params[0].axisValue + "：" +
            "<br/>计划：" + planData[params[0].dataIndex] +
            "<br/>完成：" + completeData[params[0].dataIndex];
      },
    },
    //调整图例
    legend: {
      data: ["计划", "完成"],
      show:false
    },
    //调整图表距边框的距离
    grid: {
      left: "3%", 
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    // 调整图像x轴
    xAxis: {
      data: xData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontFamily: "Microsoft YaHei",
          color: "#fff", 
          fontWeight: "400",
          fontSize: "14",
        },
      },
    },
    //调整图像y轴
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show:true,
        lineStyle: {
          color: '#FFFFFF',
          width: 1,
          opacity: 0.11,
        }
      }
    },
    //图像的关键显示部分，此处5个拼接一个堆叠柱子，注意此处的调整
    series: [
      {
        z: 1,
        name: "计划",
        type: "bar",
        stack:'1',
        barWidth: barWidth,
        // stack: "总量",
        color: color[0],
        data: otherData,
      },
      {
        z: 2,
        name: "完成",
        type: "bar",
        stack:'1',
        barWidth: barWidth,
        // stack: "总量",
        color: color[1],
        data: completeData,
      },
      //柱形底部
      {
        z: 3,
        name: "项目",
        type: "pictorialBar",
        data: constData,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[0],
          },
        },

        tooltip: {
          show: false,
        },
      },
      //某个柱形的底部
      {
        z: 4,
        name: "项目",
        type: "pictorialBar",
        data: otherData,
        symbol: "diamond",
        symbolPosition: "end",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[1],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: "项目",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        tooltip: {
          show: false,
        },
        itemStyle:{
          normal: {
            label: {
              formatter: "{c}",
              show: true,
              position: "top",
              textStyle: {
                fontWeight: 400,
                fontSize: "13",
                color: "#F2F7FA",
                lineHeight:20,
              },
            },
          }
        }
      },

    ],
  };
  option && myChart.setOption(option);
}

</script>

最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。

内容错误之处欢迎指正，共同进步！

如果内容有帮助，请点赞吱个声呗~

小言不爱说
关注
cylinder:echarts圆柱图，完美质感，支持label，支持堆叠
05-09
cylinder echarts圆柱图，完美质感，支持label，支持堆叠 demo演示： export default function(target, settings) 基本使用 let chart = echarts.init(document.getElementById('chart')); cylinder(chart, { dataSource: { name: [2016,2017,2018], data: [ { name: '资产', value: [1,2,3].map(()=>getRn()) }, { name: '负债', value: [1,2,3].map
堆叠图_echarts_柱状堆叠图_
09-29
前后端交互实现自定义堆叠柱状图，主要基于echarts实现
【ECharts】立体柱状图
最新发布
Qxn530的博客
10-14 287
立体柱状图
echarts实现3d柱状图的两种方式
热门推荐
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts实现3D效果柱状图
dqfkkll的博客
09-14 1万+
echarts3D效果柱状图的实现 这个太难了，我花了两天终于调成我想要的效果啦~，开心，要是官网上有例子就好了，太难调了。不过功夫不负有心人，话不多说，看代码吧 效果图： html代码 <div id="jczy_bar" :canvas="3D" style="height: 240px;width:600px;margin: 0 auto;"></div> JS代码 // 调用 var serveTBar = echarts.init(document.getElement
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts 3D 柱状图
aibujin的博客
05-20 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts 柱状图【立体】
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
echarts 实现 3d 柱状图
weixin_38992765的博客
07-28 5557
echart+vue3 实现 3d 柱状图
echarts制作3d柱形图
泪的结晶的博客
11-24 5111
1.引入echarts 2.main.js引入 import * as echarts from 'echarts' import 'echarts-gl'; Vue.prototype.$echarts = echarts 3.页面制作 <template> <div id="output_3DBarCharts"></div> </template> <script> import { get3DOptions .
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
堆叠柱状图按照百分比显示.rar
08-20
在这个压缩包中，我们关注的是"堆叠柱状图按照百分比显示"的实现。堆叠柱状图是一种将不同类别的数据在同一个柱子上按顺序累加展示的方法，用于直观地对比各部分与整体的关系。而将柱状图按照百分比显示，则进一步...
echarts柱状图
11-11
比如，可以通过`stack`属性实现堆叠柱状图，展示各分类内部的子分类占比；通过`barWidth`和`barGap`调整柱子的宽度和间隔；通过`label`设置柱子上的文本标签；通过`tooltip`配置浮动提示框，显示详细数据。 **饼状...
echarts 柱状图_堆叠柱状图_数据分区_常用图表配置_数据可视化
aibujin的博客
08-27 1319
echarts 项目可视化、echarts 数据分区显示、echnarts 横向柱状图滚动、echatrs 折线图自动滑动、echarts 数据量大，自定滚动，加载数据、echarts 阶梯瀑布图、echarts 阶梯折线图、 ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts 关系图、echarts 知识图谱、ecahrts 地图、ecahrts 地图 josn 文件、地图json免费下载、echarts k线图、echarts环形图
vue引用echarts柱形堆叠图
boy火巨的博客
07-17 1713
vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424 （周，月，年动态切换数据功能）请参考文章https://blog.csdn.net/qq_42221334/article/details/96307823 主要代码： <template> ...
echarts 3D柱状图
qq_44699269的博客
09-14 528
echarts 3D柱状图。
echarts柱形图多个柱形图，每个柱形图显示多个属性
07-15
您可以使用 ECharts 的堆叠柱状图（stacked bar chart）来显示多个属性。堆叠柱状图将每个属性的值堆叠在一起，以便在同一柱形图中显示多个属性。 下面是一个使用 ECharts 创建堆叠柱状图的示例代码： ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { tooltip: { trigger: 'axis' }, legend: { data: ['属性1', '属性2', '属性3'] }, xAxis: { type: 'category', data: ['柱1', '柱2', '柱3', '柱4', '柱5'] }, yAxis: { type: 'value' }, series: [ { name: '属性1', type: 'bar', stack: '属性', data: [120, 132, 101, 134, 90] }, { name: '属性2', type: 'bar', stack: '属性', data: [220, 182, 191, 234, 290] }, { name: '属性3', type: 'bar', stack: '属性', data: [150, 232, 201, 154, 190] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 在上面的示例中，我们创建了一个堆叠柱状图，其中每个柱形图显示了三个属性（属性1、属性2、属性3）的数据。每个属性的值通过 `series` 数组中的对象进行配置。通过设置 `stack` 属性为相同的值，可以将不同属性的数据堆叠在一起。 您可以根据自己的需求修改示例代码中的数据和配置项来适应您的情况。希望对您有所帮助！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值