首页 > 其他分享 >柱形图“变个装”,跟上时尚步伐!

柱形图“变个装”,跟上时尚步伐!

时间:2024-05-28 09:43:52浏览次数:18  
标签:变个 代码 BI 柱形图 item 跟上 器中 组件

前言

职场中,日报、周报、月报、年度总结,都离不开图表的制作,而柱状图又是最常用的一种,怎样的柱状图,才能让领导更容易阅读,甚至是眼前一亮呢?今天小编就将为大家介绍一下如何借助葡萄城公司的嵌入式BI工具——Wyn商业智能软件修改柱形图的样式,让柱形图有不一样的样式。

环境准备

安装指导:Wyn商业智能设计器

实现步骤

实现步骤分为代码和无代码两种形式。

1)代码实现

(1)首先打开设计器,选择柱形图(Echarts),绑定数据分类和数值。

(2)打开设计器中的组件自定义属性,通过前端的JS代码编写的方式修改柱形图的形状,前端代码如下:

option.series.forEach(item => {
//设置柱形图的形状为三角形
  item.type = 'pictorialBar',
    item.symbol = 'triangle',
        item.barGap = '35%',
    item.barWidth = '15%'
})

return option

实现效果如下图所示:

(3)最终预览如下。

2)无代码实现

无代码的方式为在设计器中直接使用封装好的组件,具体操作方式如下所示:

(1)打开葡萄城市场,并找到对应的组件,如下图所示。

(2)下载对应的的组件。

(3)然后在设计器中导入下载的组件。

(4)最后在仪表板设计器左侧工具箱的"组件模板库"选择即可。

总结

以上就是在BI中对柱形图进行样式修改的步骤,如果您想了解更多的信息,欢迎点击这里查看更多资料。

扩展链接:

创意展示:打造数据大屏的炫酷天气预报插件

聊一聊数字孪生与3D可视化

探秘移动端BI:发展历程与应用前景解析

标签:变个,代码,BI,柱形图,item,跟上,器中,组件
From: https://www.cnblogs.com/powertoolsteam/p/18060804

相关文章

  • Origin2022中文版绘制套娃式柱形图,大柱套小柱!
    柱形图是科研中常用的图表之一,为了同时展示分数据与总数据之间的趋势分布,我们可以采用大柱形图(总数据)嵌套小柱形图(分数据)的展示方式,使图表更清晰直观,下面给大家分享如何制作套娃式柱形图;操作步骤:1、先打开Origin2022软件,然后在Book1中输入如下示例数据:2、选中A-D列的数据:......
  • amCharts粒状梯度柱形图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts简单柱形图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • [echarts]vue2项目中折柱图-柱形图伪3d效果实现
    不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦一.需求分析与设计思路项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是......
  • GPT-4引领AI新纪元,Claude3、Gemini、Sora能否跟上步伐?
    【最新增加Claude3、Gemini、Sora、GPTs讲解及AI领域中的集中大模型的最新技术】2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认......
  • 43、excel快速填充序列号,删除行时序号自动跟上
    平时填充序号的做法:首先在第1、2行输入1、2,然后用手往下拖动,填充后面的行,缺点:当我删除一行时,后面的序号不会自动按顺序填充上 解决方法:1、在excel上选中A6单元格,然后左上角输入A6:A110,按【回车】键2、直接输入【=ROW()-1】,再按【ctrl+回车】键盘就可以了缺点:由于公......
  • eCharts记录一柱形图案例
     option={color:'#8AE6C7',grid:{left:'50',right:'50',bottom:'50',containLabel:true},textStyle:{color:'rgba(0,0,0,.58)'},xAxis:{type:'catego......
  • echarts柱形图给X轴坐标类目添加点击事件
    在项目中遇到这么个需求要在柱形图上的x轴添加点击事件,当点击对应x轴文字的时候要弹出模态框展示子图表根据echarts的Api给图表实例绑定点击事件myChartInstance?.on('click','xAxis.category',(params)=>{if(params.value==='其他变动成本'){set......
  • 如何使用Matplotlib模块的text()函数给柱形图添加美丽的标签数据?
    (如何使用Matplotlib模块的text函数给柱形图添加美丽的标签数据?)1简单引入在进行数据分析时,当一些图表数据,比如柱形图我们想让它更直观的显示一些内容,有时候会给柱形图添加标签,那如何实现这样的效果呢?还有比如我们把某手机品牌1-12月每月的销量制作成柱形图,那如何在柱形图上......
  • echarts折线图 分段柱形图
    option={tooltip:{trigger:'axis',axisPointer:{//Useaxistotriggertooltiptype:'shadow'//'shadow'asdefault;canalsobe'line'or'shadow'}},legend:{t......