美林数据
ABOUT US
美林数据技术股份有限公司(简称:美林数据,NEEQ:831546)是国内知名的数据治理和数据分析服务提供商。

美林新闻/NEWS

首页 美林数据 行业资讯

数据可视化JS脚本使用技巧分享—柱形图的立体效果

2023-06-12 13:56:23
随着大数据时代的到来,数据分析及可视化已经成为企业决策中不可或缺的一环。数据虽然重要,但单纯的数据只是一堆冰冷的数字,如果不能将其直观地呈现出来,很难引起人们的共鸣。因此,数据可视化成为了现代企业重要的数据分析手段之一。JS脚本是一个十分实用的数据可视化工具,能够帮助用户以更加简单和直观的方式来概括和展示数据。借助JS脚本,用户可以非常灵活地定制各种图形化展示效果,省去了复杂的手工制图的过程。在本文中,我们将主要介绍数据可视化JS脚本的使用技巧,让用户更好地发挥数据可视化的作用。

适用图表:柱形图、组合图
使用产品:Tempo数据可视化平台
操作步骤:建立好图表后,点击工具条“脚本”按钮,添加代码,如下:

柱形图的立体效果

柱形图的立体效果

/**
 * 图形渲染之前对option的再次修改
 **/
this.beforeRender = function(option){
    //此处自行处理option的配置 TODO
    $.extend(true, option.series[0], {
        barGap: 0.005,
        barMaxWidth:'25%',
        z : 5,
        label : {normal:{offset : [0, -5]}}
    })
      
    //处理右侧立体片
    const series1 = TempoUtils.clone(option.series[0]);
    const sideData = series1.data.map(item => item + item * 0.023);
    $.extend(true, series1, {
        data:sideData,
        barMaxWidth:'10%',
        z : 1,
        label : {normal : {show : false},emphasis:{show : false}}
    })
      option.series.push(series1);
 
    //处理顶部
     const series2 = TempoUtils.clone(option.series[0]);
    $.extend(true, series2, {
        type : 'pictorialBar',
        symbol: 'path://M 0,0% l 35%,0 l -21%,1% l -43%,0% z',
        symbolSize: ['140%', '2.6%'],
        symbolOffset: ['1%', '-100%'],
        symbolRotate: -1,
        symbolPosition: 'end',
        z:3,
        label : {normal : {show : false}}
    })
      option.series.push(series2);
    
    return option;
}

柱形图的立体效果
本文重点介绍了数据可视化JS脚本—柱形图立体效果的使用技巧,对于数据可视化工作,有了IS脚本的帮助,不仅可以提高数据可视化的效率,还可以丰富展示效果,同时还可以让数据可视化更加灵活多变。但是需要注意的是,在使用JS脚本过程中需要结合实际需求进行调整,以保证图表的准确性和精度。最后,希望大家能够在日常工作中发挥数据可视化工具的作用,提高工作效率和决策水平。
服务热线
400-608-2558
咨询热线
15502965860
美林数据
微信扫描二维码,立即在线咨询