菜单 搜索
首页 前端知识 Echarts 3D柱形图和3D堆叠柱形图实现

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

2024-04-29 11:04:38 前端知识 前端哥 576 510 我要收藏

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

  • 实现目标展示
  • 1、双柱图实现步骤
    • 内容分析
    • 代码实现
  • 2、堆叠图实现步骤
    • 内容分析
    • 代码实现

实现目标展示

在这里插入图片描述

在这里插入图片描述

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自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。

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

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6259.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

2024 Flutter 重大更新，Dart 宏（Macros）编程开始支持，JSON 序列化有救

2024-05-05 22:05:19

golang struct json tag的使用及深入理解_go struct json tag

2024-05-05 22:05:12

@JsonCreator和@JsonValue

2024-05-05 22:05:05

【好物推荐】JSONView，一款查看json数据的神器

2024-05-05 22:05:03

cesium实战(1)、cesium 加载本地json、GeoJson数据

2024-05-05 22:05:01

Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cann

2024-05-05 22:05:00

MySQL语句 ｜ 在MySQL中解析JSON或将表中字段值合并为JSON

2024-05-05 22:05:00

Python 字符串转换为 JSON

2024-05-05 22:05:00

JSONException（JSON解析异常）可能的原因和解决方法

2024-05-05 22:05:00

【Python】【VS Code】VS Code中python.json和setting.json文件配置说明

2024-05-05 22:05:58

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用

2024-05-05 22:05:07999
10

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！