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.新增点击交互，创建图表联动后，允许点击触发图表联动

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

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