DynamicHistogramHelper

DynamicHistogramHelper

目前的standard-chart为单次渲染模式，两次渲染间的状态不能做记录，所以框架为柱状图与时间轴的联动做了一个辅助类DynamicHistogramHelper

DynamicHistogramHelper初始化在standardChart之后

const ecBarChart = standardChart.init(dom, 'pc-wencai-light');
const helper = new standardChart.helper.DynamicHistogramHelper(
    ecBarChart,
    option,
    data,
    {
        watermarkFormatter(date) {
            return `自定义 \n ${date}`;
        }
    }
);

初始化参数

即构造方法 standardChart.helper.DynamicHistogramHelper:

参数配置	类型	默认值	描述	备注
chart	StandardChart	无	动态柱状图的实例对象
option	Option		柱状图的配置项
data	{name: string; value: number; date: number}[] | {name: string; value: number; date: number}[][]		柱状图的数据	二维数组一般用于动态双向柱状图，且0.2.38以下版本不支持传二维数组
otps	{watermarkFormatter: (date: number) => string}		动态变化的时间水印

播放参数

即播放方法 play:

入参	类型	默认值	描述	备注
date	number		播放时间

示例调用:

const ecBarChart = standardChart.init(dom, 'pc-wencai-light');
const helper = new standardChart.helper.DynamicHistogramHelper(
  ecBarChart,
  data
);
helper.play(maxYear);

鼠标移入hover阴影效果配置

standardChart更新之后调用

入参	类型	默认值	描述	备注
dom	HTMLElmentDiv		图表实例的容器dom
shadowColor	string		阴影的颜色
labelColor	string		label的颜色

示例调用:

const ecBarChart = standardChart.init(dom, 'pc-wencai-light');
ecBarChart.on('dv:afterupdate', () => { 
    helper.makeHover(document.querySelector('#container'), 'red', '#f39800')
})

鼠标点击事件回调

standardChart更新之后调用

示例调用:

const ecBarChart = standardChart.init(dom, 'pc-wencai-light');
ecBarChart.on('dv:afterupdate', () => { 
    helper.on('click', (...args) => console.log(...args));
})