echarts 3D 柱状图

已于 2023-06-30 11:29:14 修改
阅读量1.3w 收藏 66
点赞数 8
分类专栏： vue vue3.0 eachrts 可视化 文章标签： echarts vue echarts 数据可视化组件 vue3.0 echarts eharts 3d 柱状图
于 2022-05-20 11:23:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aibujin/article/details/124879825
版权

Echarts 常用各类图表模板配置

注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

图标模板目录

一、3D 柱状图

注意： 以下背景图来源于网络，如果失效请自行替换；

在这里插入图片描述

var xAxisData = ['北京', '上海', '深圳', '广州', '杭州'];
var data1 = [200, 100, 200, 50, 100];
var data2 = [300, 200, 300, 200, 400];
option = {
  backgroundColor: '#191970',
  tooltip: {
    trigger: 'item'
  },
  grid: {
    top: '20%',
    bottom: '20%',
    right: '10%',
    left: '18%'
  },
  graphic: [
    {
      type: 'image', // 图形元素类型
      id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
      right: 'center', // 根据父元素进行定位 （居中）
      bottom: '0%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
      z: 0, // 层叠
      bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
      style: {
        image:
          'https://img0.baidu.com/it/u=3846011338,1538056540&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500', // 这里一定要注意、注意，必须是https开头的图片路径地址
        width: 1345,
        height: 800
      }
    }
  ],
  xAxis: {
    data: xAxisData,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      interval: 0,
      textStyle: {
        color: '#fff',
        fontSize: 20
      },
      margin: 40
    }
  },
  yAxis: {
    splitLine: {
      show: false
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      inside: true
    },
    axisLine: {
      show: true
    },
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    }
  },
  series: [
    // 底部的光晕
    {
      name: '',
      type: 'pictorialBar',
      tooltip: {
        show: false
      },
      symbolSize: [90, 40],
      symbolOffset: [0, 20],
      z: 1,
      itemStyle: {
        normal: {
          color: 'transparent',
          borderColor: '#26B2E8',
          borderType: 'solid',
          borderWidth: 4
        }
      },
      data: [1, 1, 1, 1, 1]
    },
    {
      //三个最低下的圆片
      name: '',
      type: 'pictorialBar',
      symbolSize: [45, 25],
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          var a = params.name.slice(0, 2);
          if (a === '北京') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFD56E' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '上海') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#5DF076' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '深圳') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '广州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFFBB' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '杭州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'red' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FF3EFF' // 100% 处的颜色
                }
              ],
              false
            );
          }
        }
      },
      data: [0, 0, 0, 0, 0]
    },
    //下半截柱状图
    {
      name: '2020',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      itemStyle: {
        opacity: 0.7,
        color: function (params) {
          var a = params.name.slice(0, 2);
          if (a === '北京') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FF9A22' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFD56E' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '上海') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#00EC28' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#5DF076' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '深圳') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#12B9DB' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '广州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FFFF33' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFFBB' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '杭州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FF3EFF' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFB3FF' // 100% 处的颜色
                }
              ],
              false
            );
          }
        }
      },
      data: data1
    },
    {
      name: '2022',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      itemStyle: {
        color: function (params) {
          var a = params.name.slice(0, 2);
          if (a === '北京') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FF9A22' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFD56E' // 100% 处的颜色
                }
              ],
              false
            );
          }
        }
      },
      data: data1
    },
    {
      name: '', // 头部
      type: 'pictorialBar',
      symbolSize: [45, 25],
      symbolOffset: [0, -10],
      z: 12,
      symbolPosition: 'end',
      itemStyle: {
        color: '#D28EFF',
        opacity: 1
      },
      data: data2
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [45, 25],
      symbolOffset: [0, -10],
      z: 12,
      itemStyle: {
        opacity: 1,
        color: function (params) {
          var a = params.name.slice(0, 2);
          if (a === '北京') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FF9A22' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFD56E' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '上海') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#00EC28' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#5DF076' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '深圳') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#12B9DB' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '广州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FFFF33' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFFBB' // 100% 处的颜色
                }
              ],
              false
            );
          } else if (a === '杭州') {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#FF3EFF ' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFB3FF' // 100% 处的颜色
                }
              ],
              false
            );
          }
        }
      },
      symbolPosition: 'end',
      data: data1
    },
    {
      name: '2021',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      z: 0,
      itemStyle: {
        color: '#E8CCFF',
        opacity: 0.7
      },
      data: data2
    },
    {
      name: '总数',
      type: 'bar',
      barWidth: 45,
      barGap: '-100%',
      z: 0,
      label: {
        show: true,
        lineHeight: 30,
        formatter: function (params) {
          var index = params.dataIndex;
          return data1[index] + data2[index] + ' °C';
        },
        position: 'top',
        textStyle: {
          color: '#fff',
          fontSize: 15
        },
        padding: [10, 0]
      },
      data: data2
    }
  ]
};

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

六、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

七、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

八、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

九、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

十一、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

aibujin
关注
  • 8
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts柱状图（3D）
weixin_61211370的博客
01-10 515
【代码】echarts柱状图（3D）
echarts如何实现3D饼图(环形图)?
weixin_48082900的博客
03-04 1991
自定义修改3D饼图的宽高和legend
echarts实现3d柱状图的两种方式
热门推荐
weixin_69773376的博客
12-06 1万+
echarts实现3d柱状图效果
echarts--3D效果柱状图
生命不息，学习不止
07-05 1118
柱状图实现3D效果
echarts实现一个3d效果柱形图
Ndbsa的博客
01-08 2057
思路是：通过数组循环生成多个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
echarts 实现 3d 柱状图
weixin_38992765的博客
07-28 5096
echart+vue3 实现 3d 柱状图
echarts实现3D柱状图（视觉层面）和3D饼图
布克吉的博客
06-06 8995
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts制作3d柱形图
泪的结晶的博客
11-24 4912
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柱状图
徐___L
02-16 3197
echarts 3d柱状图
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
echarts柱状图
11-11
里面包含了echarts的柱状图和饼状图的一些动态获取数据的demo属于一个简洁明了的小demo方便参考，如果需要其他的功能，介意自己努力练习
Echarts混合图（柱状图、折线图）倒立对比展示
03-13
该文档是用于介绍echarts图形中的柱状图和折线图混合示例，因为官方文档事例中有，这里介绍的是柱状图与折线图Y轴上下对应，折线图正常显示，柱状图倒立展示，共用一个X轴的比较图例情况。
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
3D柱状图 给每根柱子设置不同的颜色.zip
12-21
3D柱状图 给每根柱子设置不同的颜色.zip
后端开发是一个涉及广泛技术和工具的领域.docx
最新发布
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
echarts3D柱状图
09-14
ECharts 是一个由百度开发的数据可视化库，它提供了丰富而强大的图表功能，包括 3D 柱状图。要绘制一个 ECharts 3D 柱状图，你可以按照以下步骤进行操作： 1. 首先，确保你已经引入了 ECharts 库。你可以在 HTML 文件中使用以下代码来引入 ECharts： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> ``` 2. 创建一个具有指定宽度和高度的 DOM 元素，用于容纳图表。例如： ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 使用 JavaScript 代码初始化并配置图表。以下是一个简单的示例： ```javascript // 获取容器元素 var chartContainer = document.getElementById('chart'); // 初始化图表 var chart = echarts.init(chartContainer); // 配置项 var options = { grid3D: {}, // 开启 3D 网格 xAxis3D: {}, // x 轴配置 yAxis3D: {}, // y 轴配置 zAxis3D: {}, // z 轴配置 series: [{ type: 'bar3D', // 使用 3D 柱状图类型 data: [[0, 0, 0, 1]], // 数据数组，每个数据项格式为 [x, y, z, value] shading: 'lambert', // 光照渲染模式 label: { show: true, // 显示柱状图上的标签 textStyle: { fontSize: 16, // 标签字体大小 } }, itemStyle: { opacity: 0.8, // 柱状图透明度 color: '#ff0000' // 柱状图颜色 } }] }; // 使用配置项生成图表 chart.setOption(options); ``` 这是一个简单的示例，你可以根据你的需求进行进一步的配置和样式调整。通过修改 `data` 数组中的数据，你可以绘制更多的柱状图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值