echarts 3D 柱状图_echarts3d柱状图-程序员宅基地

技术标签: css  Eachart  echarts  typescript  javascript  

echarts 3D 柱状图

实例图片:
在这里插入图片描述


.html 文件

<div>
  <div id="mainbar" class="mainbar"></div>
</div>

.ts 文件

eachartBarfunttion() {
    
    let chartDom = <HTMLInputElement>document.getElementById('mainbar');
    let myChart = echarts.init(chartDom, null, {
    
      width: 900,//获取父级的宽//初始化默认的宽
      height: 400//获取父级的高//初始化默认的高
    });
    //监听页面的 window.onresize 事件获取浏览器大小改变的事件,
    //然后调用 echartsInstance.resize 改变图表的大小
    this.resizeBarFun = () => {
    
      console.log("mainbar.clientWidth:", document.getElementById('mainbar').clientWidth)
      console.log("mainbar.clientHeight:", document.getElementById('mainbar').clientHeight)
      myChart.resize({
    
        width: document.getElementById('mainbar').clientWidth,//获取父级的宽
        height: document.getElementById('mainbar').clientHeight//获取父级的高
      })
    }
    window.addEventListener('resize', this.resizeBarFun);

    let option;
       option = {
    
      // 标题
      title: {
    
        text: '3D柱状图',
        x: 'center'//横向居中
      },
      //x轴
      xAxis: {
    
        type: 'category',//坐标轴类型
        //type: 'value' 数值轴,适用于连续数据。
        //type: 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,
        // 或者可通过 xAxis.data 设置类目数据。,category与data一起使用
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      // y轴
      yAxis: {
    
        type: 'value'
      },
      // 直角坐标系内绘图网格
      grid: {
    
        containLabel: true //设置自适应画布大小状态为开,也可通过设置left左移实现相同效果。这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。
      },
      // 图例组件
      legend: {
    
        bottom: '5%'
      },
      // 提示框组件。
      tooltip: {
    },
      series: [
        {
    

          type: 'bar',//柱状图
          barWidth: '40',//柱条的宽度,不设时自适应。
          data: [120, 200, 150, 80, 70, 110, 130],
          backgroundStyle: {
    //是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
            color: 'none',
          },
          itemStyle: {
    //图形样式。
            color: {
    
              type: 'linear',
              x: 0, x2: 1, y: 0, y2: 0,
              colorStops: [
                {
    
                  offset: 0,
                  color: '#00FFFF',
                },
                {
    
                  offset: 0.5,
                  color: '#00FFFF',
                },
                {
    
                  offset: 0.5,
                  color: '#11A6D0',
                },
                {
    
                  offset: 1,
                  color: '#11A6D0',
                },
                {
    
                  offset: 0,
                  color: '#83bac9',
                },
                {
    
                  offset: 0,
                  color: 'rgba(17,166,208,0.3)',
                },
              ]
            }
          },
        },
        {
    
          z: 2,//控制图形的前后顺序
          symbolPosition: 'start',
          //symbolPosition:'start':图形边缘与柱子开始的地方内切。
          // symbolPosition:'end':图形边缘与柱子结束的地方内切。
          // symbolPosition:'center':图形在柱子里居中。
          type: 'pictorialBar',//象形柱图是可以设置各种具象图形元素
          data: [120, 200, 150, 80, 70, 110, 130],
          symbol: 'diamond',柱子显示的样式,'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolOffset: [0, '50%'],
          symbolSize: [40, 10],
          itemStyle: {
    
            normal: {
    
              color: {
    
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                  {
    
                    offset: 0,
                    color: '#00FFFF',
                  },
                  {
    
                    offset: 0.5,
                    color: '#00FFFF',
                  },
                  {
    
                    offset: 0.5,
                    color: '#11A6D0',
                  },
                  {
    
                    offset: 1,
                    color: '#11A6D0',
                  },
                  {
    
                    offset: 0,
                    color: '#83bac9',
                  },
                  {
    
                    offset: 0,
                    color: 'rgba(17,166,208,0.3)',
                  },
                ]
              }
            },
          },

        },
        {
    
          z: 3,//控制图形的前后顺序
          type: 'pictorialBar',
          symbolPosition: 'end',
          //symbolPosition:'start':图形边缘与柱子开始的地方内切。
          // symbolPosition:'end':图形边缘与柱子结束的地方内切。
          // symbolPosition:'center':图形在柱子里居中。
          data: [120, 200, 150, 80, 70, 110, 130],
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [40, 40 * 0.25],
          itemStyle: {
    
            normal: {
    
              color: '#00FFFF',
           
            },
          },
        },



      ]
    };

    option && myChart.setOption(option);
  }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43730595/article/details/123877064

智能推荐

react之antd组件InputNumber控制小数点_antd inputnumber decimalseparator-程序员宅基地

文章浏览阅读3.9k次。InputNumber控制用户输入小数点的个数在项目过程中有个需求,需要控制用户输入小数点的个数问题。话不多说上代码://输入框绑定方法<InputNumber style={{ width: '100%' }} formatter={limitDecimals} parser={limitDecimals}/>方法:const limitDecimals = (value: string | number): string => { const reg_antd inputnumber decimalseparator

matlab 约束条件下三元函数的图像问题_三元函数图像-程序员宅基地

文章浏览阅读4.1k次,点赞5次,收藏15次。题目:绘制z=x+y,0<x<1,0<y<1,0.5<x+y<1(0.5<z)约束条件下的图像代码:clc;clear;x=0:0.01:1;y=0:0.01:1;[xx,yy]=meshgrid(x,y);[m,n]=size(xx); for i=1:m for j=1:n z(i,j)=x(i)+y..._三元函数图像

linux下恢复误删除oracle的数据文件_oracle 数据文件误删 linux-程序员宅基地

文章浏览阅读480次。场景描述:操作系统级别的删除数据文件(/oracle/oradata/ora10g/system1.dbf),而且数据库没有崩溃,仍然处于open状态。原理:在Linux操作系统中,如果文件从操作系统级别被删除掉,之前打开该文件的进程仍然持有相应的文件句柄,所指向的文件仍然可以读写,并且该文件的文件描述符可以从/proc目录中获得。如果关闭数据库,则句柄就会丢失。恢复步骤如..._oracle 数据文件误删 linux

VScode 自定义代码颜色、背景颜色、方法名、括号颜色-程序员宅基地

文章浏览阅读10w+次,点赞108次,收藏323次。自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,代码提示啥方面做的也特别好,很好上手,作为小白我用了很长一段时间。后来浅浅学习微信小程序开发,得写wxml,Hbilder上没有wxml格式的代码提示,代码高亮等。于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。于是后来又接触了sublime,sublime相比..._vscode 自定义代码颜色、背景颜色、方法名、括号颜色

深度学习框架Tensorflow学习与应用 图像数据处理之二_tensorflow深度学习框架实现了对图像亮度的调整-程序员宅基地

文章浏览阅读255次。四:图像色彩调整 和图像翻转类似,调整图像的亮度、对比度、饱和度和色相在很多图像识别应用中都不会影响识别结果。所以在训练神经网络模型时,可以随机的调整训练图像的这些属性,从而使训练得到的模型尽可能地受到无关因素的影响。话不多说,上代码了。注意:路径要用英文,不要有中文(一)调整亮度与调整对比度import matplotlib.pyplot as pltimport tensorf..._tensorflow深度学习框架实现了对图像亮度的调整

《ASP.NET5》无法路由到Web API Controller控制器_.net的web无法访问到控制器-程序员宅基地

文章浏览阅读5.6k次。这个标题不知道恰当不恰当,具体的问题就是我在一个现有的项目上创建了一个Web API Controller Class,但是按F5启动调试后,通过给定的路径如“http://localhost:3753/api/values/5”访问Get(int id)方法时,没有反应,设置了断点也进不去。但这个问题在网上又没有找到解决方法,于是又新建了一个ASP.NET Web Application类型的项_.net的web无法访问到控制器

随便推点

嵌入式Linux开发板_迅为iTOP-4412精英版入门篇(一)_4412开发入门-程序员宅基地

文章浏览阅读911次,点赞2次,收藏4次。迅为iTOP-4412开发板平台,ARM Cortex A9架构,主频1.4GHz-1.6GHz,1GB 双通道 DDR3(2GB 可选),4GB EMMC(16GB 可选),提供多种外接模块,如:RFID模块、继电器模块、CAN总线 RS485总线模块、串口转接板、矩阵键盘模块、AVIN模块、GPS模块、VGA模块、500万摄像头模块、WIFI/蓝牙模块等。拥有丰富的板载接口以及众多配套扩展模块,并提供丰富的学习教程与资源,是嵌入式Linux学习与开发最佳选择。_4412开发入门

扫荡倾斜摄影单体化难题_进行模型单体化容易遇到哪些问题-程序员宅基地

文章浏览阅读5.2k次,点赞6次,收藏27次。单体化问题的由来 我们先来说说什么是“单体化”。“单体化”其实指的就是每一个我们想要单独管理的对象,是一个个单独的、可以被选中的实体(Entity);即用鼠标点击时可以显示为不同颜色(称为“高亮”)显示,可以附加属性,可以被查询统计等等。只有具备了“单体化”的能力,数据才可以被管理,而不仅仅是被用来查看。 对于人工建模而言,单体化是一个不言而喻的事情。即在人工建模的过程中,自然会把需要单独管理的_进行模型单体化容易遇到哪些问题

snakeyaml自定义pojo写入yml文件时属性字段排序问题_snakeyaml 写入yaml-程序员宅基地

文章浏览阅读1.1k次。snakeyaml自定义pojo写入yml文件时属性排序问题解决。_snakeyaml 写入yaml

使用jbpm出现异常 java.lang.NoClassDefFoundError: de/odysseus/el/ExpressionFactoryImpl-程序员宅基地

文章浏览阅读2.9k次。java.lang.NoClassDefFoundError: de/odysseus/el/ExpressionFactoryImpl at org.jbpm.pvm.internal.script.JuelScriptEngine.(JuelScriptEngine.java:66) at org.jbpm.pvm.internal.script.JuelS_java.lang.noclassdeffounderror: de/odysseus/el/expressionfactoryimpl

浅谈安全运营中心-程序员宅基地

文章浏览阅读1.9k次,点赞2次,收藏6次。最近两年安全运营中心这个概念被提到的次数越来越多了,虽然没有一个建设的标准模式,但很多大厂都在提,也号称有了各种落地。那么,到底是怎样呢。_安全运营中心

mysql 序列化缓存到txt文件查找数据与直接查找数据 性能对比,13,601条数据文件缓存平均0.085秒后只需0.025秒 推荐 程序员导航网http://www.je666.com_je666com-程序员宅基地

文章浏览阅读2.8k次。推荐 程序员导航网http://www.je666.comCREATE TABLE IF NOT EXISTS `ylmf_site_search` ( `id` int(11) NOT NULL, `displayorder` int(11) NOT NULL, `pinyin` varchar(255) CHARACTER SET gbk NOT NULL,_je666com

推荐文章

热门文章

相关标签