echarts 3D 柱状图

这篇具有很好参考价值的文章主要介绍了echarts 3D 柱状图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Echarts 常用各类图表模板配置

注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项;

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



一、3D 柱状图

注意: 以下背景图来源于网络,如果失效请自行替换;

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文章来源地址https://www.toymoban.com/news/detail-515318.html

到了这里,关于echarts 3D 柱状图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一、下载echarts与echarts gl 二、vue引入与页面使用 1.引入 2.页面引入echarts-gl 三、下载地图数据 四、使用地图 1、html初始化地图放入位置: 2、data创建变量 3、创建地图 4、钩子函数渲染地图 5、渲染完成效果 总结 提示:本项目使用vue,请提前搭建好vue项目 本次需求

    2024年02月12日
    浏览(43)
  • Echarts 3D立体柱状图(源码+例图)

    Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! 

    2024年02月15日
    浏览(44)
  • echarts实现3D柱状图(视觉层面)和3D饼图

    原理: 立体图形从一个方向只能看到三个面,于是我们通过echarts图表实现 顶部,明面,和暗面。 效果图如下: 需要四份数据, 两个柱子的数据+X轴数据+颜色数据, 通过 setData 和 setColor 生成需要的数据,横向柱状图同理,参照代码中注释。 以下是完整案例代码: 3D饼图没

    2024年02月16日
    浏览(40)
  • vue echarts实现3D效果柱状图

    在vue2项目里面,研究了哈,这里记录下eacharts 实现3D效果柱状图 在main.js引入eacharts 展示效果:大屏demo

    2024年02月15日
    浏览(44)
  • echarts3d柱状图

     

    2024年02月21日
    浏览(43)
  • Echarts实现3d图表

    注意:在使用一些3d类的echart的时候会发现报下面的错误  这个是因为echarts引用3d图形需要引入echarts和echarts-gl (这里我们可能会遗漏掉引入echarts-gl) 要注意不同版本echarts对应不同版本echarts-gl 【如果版本不匹配就重新安装对应版版本】

    2024年02月16日
    浏览(37)
  • echarts3D地图+3D柱状图+3D飞线图

    echarts版本:5.4.0 echarts-gl版本:2.0.8 DataV.GeoAtlas地理小工具系列

    2024年02月07日
    浏览(37)
  • vue3 echarts实现3D立体柱状图效果,多柱状图

    使用插件vchart+echarts5.x按需引入实现 需要注意下,底下的椭圆,是在柱子底下“透”出来,颜色应该暗一点,才能视觉上看着有立体感。 成品,还原了大部分设计效果

    2024年02月06日
    浏览(44)
  • 封装一个公用的【Echarts图表组件】的3种模板

    1、模板1:vue2+javascript 2、模板2:vue3+javascript vue3中,有的图表调用不到,初始化echarts时使用 shallowRef 3、模板3:vue3+typescript 1、vue2 2、vue3+js 3、vue3+ts 1、鼠标单击/左键事件 2、鼠标移入/进入事件 3、鼠标移出/离开事件 4、让图表跟随屏幕去自适应 5、轮播动画效果 需要配置

    2024年02月03日
    浏览(40)
  • echarts实现3d柱状图的两种方式

    看了不少关于3d柱状图的案例,发现做3d柱状图 常用的两种方式就是 自定义图形和象型柱图, 两种实现方式效果如下: 方法1: echarts.graphic.extendShape 自定义图形 echarts自定义图形的详细用法点这里, 官网点这里, 图中第一个3d柱状图我参考的案例在这里, 看了很多 echarts这种3d案例,

    2024年02月01日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包