V6.5版本重要功能更新

报告

1.度量预警功能的增强

对有日期或日期时间字段下图表设置度量预警时,允许添加同环比的数据作为度量预警的触发条件;

  • 日期类型为精确到日以下粒度,如:年-月-日-小时、年-月-日-小时-分、年-月-日-小时-分-秒,仅支持选择【与前一项比】对比;
  • 日期类型为精确到日粒度,如:年-月-日,支持选择【与前一项比】、【与上周同期比】(即周同比)、【与上月同期比】(即月同比);
  • 日期类型为精确到周粒度,如:年-周,支持选择【与前一项比】;
  • 日期类型为精确到月粒度,如:年-月,支持选择【与前一项比】、【与上年同期比】;
  • 日期类型为精确到季度粒度,如年-季度,持选择【与前一项比】、【与上年同期比】;
  • 日期类型为精确到年粒度,如年(精确时间),支持选择【与前一项比】;

2.指标看板&指标卡同环比计算逻辑的优化

勾选【自动补齐周期】选项后,若当前数据范围跟某一个时间周期(月、季、年)重合时,对比数据范围将会自动选择前一个周期;

3.自定义图表控件支持地理角色的转换,转换后自动生成经纬度数据,更轻松地绘制地图;

地理地图的转换详见地图 章节,转换后的经纬度数据可直接用于地图的绘制,不需要用户自己查找经纬度数据。

4.echarts标记地图支持拖入pill添加标签

echarts-标记地图,用户可手动拖入pill显示标签,样式面板可以对标签显示及样式进行设置。

5.对比表格的功能改进

对比设置可选择更多动态时间:

对比控件显示具体日期时间:

对比控件允许单独设置宽高,拖拽改变大小:

6.创建图表联动时,允许维度字段不完全匹配

创建图表联动时,跨模型关联时,至少关联一个维度即可创建图表联动。

大屏

1.新增自定义图表控件,用户可编写JavaScript代码绘制自定义图表

利用大屏的自定义图表控件,编写JavaScript绘制自定义图表的过程与报告相同,这里给一个echarts 3D地图的案例:

将经纬度数据、想要展示的度量值,和地理坐标对应的城市名称维度拖入数据面板,然后利用外部请求获取地理位置信息,加上刚刚引入的数据,通过echarts gl绘制如下3D地图:

var barDataSet = dataSet.map(function (dataItem) {
    return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
});
var maxValue = Math.max(...barDataSet.map(d => d[2]));
window.top.fetch('https://ydcdn.nosdn.127.net/echarts/assets/map/json/china.json').then(e => e.json()).then(chinaJson => {
    echarts.registerMap('china', chinaJson);
    myChart.setOption({
        backgroundColor: 'transparent',
        geo3D: {
            map: 'china',
            shading: 'lambert',
            label: {
                show: true,
                textStyle: {
                    color: '#fff', //地图初始化区域字体颜色
                    fontSize: 12,
                    opacity: 1,
                    backgroundColor: 'rgba(0,0,0,0)'
                },
            },
            light: {
                main: {
                    intensity: 3,
                    shadow: true,
                    shadowQuality: 'high',
                    alpha: 30
                },
                ambient: {
                    intensity: 0.3
                },
            },
            viewControl: {
                distance: 80,
                center: [0, -10, 0],
                panMouseButton: 'left',
                rotateMouseButton: 'right'
            },
            groundPlane: {
                show: false,
                color: '#999'
            },
            postEffect: {
                enable: true,
                bloom: {
                    enable: false
                },
                SSAO: {
                    radius: 1,
                    intensity: 1,
                    enable: true
                },
                depthOfField: {
                    enable: false,
                    focalRange: 10,
                    blurRadius: 10,
                    fstop: 1
                }
            },
            temporalSuperSampling: {
                enable: true
            },
            itemStyle: {
                color: '#222535',
                borderWidth: 1,
                borderColor: '#4B516D',
            },

            regionHeight: 2
        },
        visualMap: {
            max: maxValue,
            calculable: true,
            realtime: false,
            inRange: {
                color: ['#0B1F4C', '#303369', '#3D429A', '#A02B3B', '#C8352C', '#D04E32', '#D76638', '#E0823F', '#E89D46', '#EDAD49', '#F6C750']
            },
            outOfRange: {
                colorAlpha: 0
            }
        },
        series: [{
            type: 'bar3D',
            coordinateSystem: 'geo3D',
            shading: 'lambert',
            data: barDataSet,
            barSize: 0.5,
            minHeight: 0.2,
            silent: false,
            itemStyle: {
                color: 'orange'
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: p => dataSet[p.dataIndex][3] + ': ' + p.data[2]
                }
            }
        }]
    });
})

绘制完成的3D地图如下:

echarts图表控件不只能绘制echarts图表,实际上它有无尽的可能,你可以在里面绘制一个自己的表格,也可以引入外部插件,如d3,antv等可视化框架,完成你想要绘制的任何酷炫图表。下面以antv L7地理空间数据可视化框架为例,绘制一张3D柱状地图

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/@antv/l7'; // 引入antv L7框架
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function () {
    const map = document.querySelector('#main');
    map.style = 'position:absolute;top:0;bottom:0;width:100%;'
    emitter.emit('renderDone');
    const scene = new L7.Scene({
      id: 'main',
      map: new L7.GaodeMap({
        pitch: 35.210526315789465,
        style: 'dark',
        center: [ 104.288144, 31.239692 ],
        zoom: 4.4
      })
    });
    scene.on('loaded', () => emitter.emit('renderDone')); // 图表加载完成后手动触发图表renderDone
    fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
      .then(res => res.json())
      .then(data => {
        const pointLayer = new L7.PointLayer({})
          .source(data.list, {
            parser: {
              type: 'json',
              x: 'j',
              y: 'w'
            }
          })
          .shape('cylinder')
          .size('t', function(level) {
            return [ 1, 2, level * 2 + 20 ];
          })
          .active(true)
          .color('t', [
            '#094D4A',
            '#146968',
            '#1D7F7E',
            '#289899',
            '#34B6B7',
            '#4AC5AF',
            '#5FD3A6',
            '#7BE39E',
            '#A1EDB8',
            '#CEF8D6'
          ])
          .style({
            opacity: 1.0
          });
        scene.addLayer(pointLayer);
      });
}
emitter.on('resize', () => {
    // 在这里处理报表resize事件
});

绘制完成的3D地图如下:

需要注意的点是绘制非echarts时,需要手动在代码中监听图表的renderDone事件,保证有数能知道该自定义报表何时绘制完成,否则会影响该报表的导出截图、定时邮件功能;另外如果需要监听报表resize事件,可在代码中监听resize事件自行处理,以上2个事件在上述例子中均有代码实现说明。

2.新增点击交互,创建图表联动后,允许点击触发图表联动

大屏柱状图、折线图、双轴图、气泡图、填充地图、轮播表、色块图新增【交互】模块,可创建图表联动,并选择播放动画时进行图表联动以及点击时进行图表联动。

若勾选了【点击时进行图表联动】,则允许点击交互,触发图表联动:

以下结果符合搜索条件 ""

    没有结果符合搜索条件 ""