datavizstocklib/src/dynamicbar.js

测试一下呗

import * as d3 from "d3";

let config = {
    /** 控件名    */
    name: "DynamicBar",
    /** svg 对象  */
    svg: {},
    /** 展示类型 Dynamic Fixed Custom  */
    scaleType: "Dynamic",
    /** 数据 */
    data: [],
    /** 内部使用 */
    jsonData: {},
    /** 内部使用 当前展示的数据 */
    currentData: [],
    /** 表头名集合 */
    columnName: [],
    /** 图表默认高度 */
    clientHeight: 500,
    /** 图表默认宽度 */
    clientWidth: 0,
    /** Y轴比例尺 */
    yScale: {},
    /** X轴比例尺 */
    xScale: {},
    /** 边距设置 上，右，下，左 */
    margin: [60, 100, 60, 100],
    /** colors */
    colors: [],
    /** 最大文字的字号 */
    YfontSize: 25, //字号
    /** 字体 */
    fontfamilyBase: "SourceHanSansK-Regular-plotly,Helvetica Neue,PingFang SC,Microsoft YaHei,Helvetica,Hiragino Sans GB,Arial,sans-serif",
    /** 文字颜色 */
    rectTextColor: "#A3A3A3",
    /** 条数 */
    barNumber: 5,
    /** 柱高度自适应 */
    rectHeightFixed: false,
    // 柱子高度
    rectHeight: 100,
    /** 柱高度和 柱间距的比例 */

    rectRate: 5,
    /** 内部使用 */
    rectSpace: 0,
    /** X轴坐标位置 bottom top */
    xAxisPos: "top",
    /** 动画时长 */
    durationTime: 1000,
    /** 最大值 */
    maxValue: 0,
    /** 延时播放 */
    delay: 2000,
    height: 35,
    /** 内部使用 */
    isRun: false,
    replay: false,
    showRanking: true,
    /** 矩形圆角 */
    rx: 2,
    index: 0,
    dataIndex: 0,
    timeout: null,
    rankingFontsize: 16,
    xSicks: 5,
    showThousands: true,
    pointFormat: 'auto',
    el: '_dataviz',
    d3Ease: '',
    // 是否填充渐变色
    ifGradient: false,
    // 是否填显示尖角
    rectSharpCorner: false,
    // 图片
    useImages: true,
    // 名称显示在左边，否则显示在柱子上
    nameAtLeft: true,
    // 是否倒序排列
    reverseOrder: false
}

String.prototype.replaceAll = function (s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

export class DynamicBar {
    /** 构造器 */
    constructor() {
        let newconfig = JSON.parse(JSON.stringify(config));
        Object.assign(this, newconfig)
    }
    /** 更新图表 */
    update(obj) {
        // this.arrayToJson();
        // 复制新配置
        Object.assign(this, obj)
    }
    /** 重新播放 */
    replay() { }

    /** 播放   */
    play() { }

    /** 暂停   */
    pause() { }

    /** 初始化 */
    init(obj, callback) {
        let that = this;
        Object.assign(this, obj);
        this.index = 1
        let c = that.colors.concat()
        for (let i = 0; i <= that.data.length; i = i + c.length) {
            that.colors = that.colors.concat(c)
        }
        this.getEase();
        that.arrayToJson();
        that.svg = d3.select("#" + this.el).append("svg");


        //添加竖线
        that.svg
            .append("g")
            .attr("class", "grid")
            .style("color", "#A3A3A3")
            .style("font-size", that.XfontSize)


        if (that.clientWidth == 0) {
            that.clientWidth = document.getElementById(this.el).clientWidth;
        }
        that.svg.attr("width", that.clientWidth).attr("height", that.clientHeight);

        let currentData = that.getData();
        let maxValue = that.max(currentData);
        let minValue = that.min(currentData);
        let width = that.clientWidth - this.margin[1] - this.margin[3];
        that.xScale = d3.scaleLinear()
            .range([that.margin[3], width + that.margin[3]]) // 界面像素范围
            .domain([minValue, maxValue]); //数据范围

        //创建y轴比例尺
        let chart = that.svg.append("g").attr("width", that.clientWidth).attr("height", that.clientHeight).append("g");
        //生成y轴
        // chart.append("g").attr("id", "yyyy")
        //   生成x轴
        // chart.append("g").attr("id", "xxxx")
        that.bar = that.svg.append("g");
        that.svg.append("text").attr("class", "topText")
            // .attr("x", that.svg.attr("width") - that.margin[1] + 80)

            .attr("x", that.svg.attr("width") * 0.9)
            .attr("y", that.margin[0] - that.rectRate * 5 - 10)
            .text('')
            .attr("text-anchor", "end")
            .attr("font-size", that.rankingFontsize)
            .attr("fill", that.fontColor);
        this.dataIndex = this.jsonData.length + 1

        clearTimeout(this.timeout);
        if (this.timeout != null) this.timeout.stop();

        let colorGradient = that.svg.append("defs").append("linearGradient").attr('id', 'colorGradient').attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%")
        colorGradient.append('stop').attr('id', 'stop1').attr('offset', '0%').attr('stop-color', that.colors[0])
        colorGradient.append('stop').attr('id', 'stop2').attr('offset', '100%').attr('stop-color', that.colors[1])

        let rectFilter = that.svg.append("defs").append("filter").attr('id', 'f1').attr('x', '0').attr('y', '0').attr('width', '200%').attr('height', '200%')
        rectFilter.append('feOffset').attr('result', 'offOut').attr('in', 'SourceAlpha').attr('dx', '2').attr('dy', '2')
        rectFilter.append('feGaussianBlur').attr('result', 'blurOut').attr('in', 'offOut').attr('stdDeviation', '10')
        rectFilter.append('feBlend').attr('in', 'SourceGraphic').attr('in2', 'blurOut').attr('mode', 'normal')

        let rectFilter2 = that.svg.append("defs").append("filter").attr('id', 'empty').attr('x', '0').attr('y', '0').attr('width', '200%').attr('height', '200%')
        rectFilter2.append('feOffset').attr('result', 'offOut').attr('in', 'SourceAlpha').attr('dx', '0').attr('dy', '0')
        rectFilter2.append('feGaussianBlur').attr('result', 'blurOut').attr('in', 'offOut').attr('stdDeviation', '0')
        rectFilter2.append('feBlend').attr('in', 'SourceGraphic').attr('in2', 'blurOut').attr('mode', 'normal')
        that.updateChart(callback);
        // that.updateXAxis();
    }
    getEase() {
        this.d3Ease = d3;
        this.animateType.split(".").forEach(item => {
            if (item.indexOf("(") > -1) {
                let arr = item.split("(")
                this.d3Ease = this.d3Ease[arr[0]](arr[1].replace(")", ""))
            } else {
                this.d3Ease = this.d3Ease[item]
            }
        })
    }

    updataImages() {
        let that = this;
        for (var i = 0; i < that.jsonData.length; i++) {
            that.jsonData[i]["image"] = that.dynamicImages[i]
        }
    }
    /**
     * 页面渲染
     * @param {*} year 
     */
    updateChart(callback) {
        let that = this;
        this.arrayToJson()
        this.getEase();
        let currentData = that.getData();
        // if (that.rectHeightFixed) {
        //     that.rectHeight = (that.clientHeight - that.margin[0] - that.margin[2]) / (that.barNumber + (that.barNumber - 1) * that.rectRate);
        // }
        that.svg.attr("width", that.clientWidth).attr("height", that.clientHeight);

        d3.select('#stop1').attr('stop-color', that.colors[0])
        d3.select('#stop2').attr('stop-color', that.colors[1])

        let uirange = [];

        uirange.push(that.clientHeight - that.margin[2]);
        uirange.push(that.margin[0]);

        that.yScale = d3.scaleBand()
            .paddingInner(that.rectRate)
            .paddingOuter(that.rectRate)
            .range(uirange) // 界面像素范围
            .domain(d3.range(that.barNumber)); //数据范围
        //  设定最大值
        that.height = Math.min(that.yScale.bandwidth(), 60)//(that.clientHeight - that.margin[0] - that.margin[2]) * 0.95 / that.barNumber * that.rectRate
        that.rectHeight = that.height
        that.yScale.domain(d3.range(currentData.length)); //数据范围
        let imageHeight = Math.max(that.rectHeight, 30)

        let width = that.clientWidth - this.margin[1] - this.margin[3];
        that.xScale = d3.scaleLinear()
            .range([that.margin[3], width + that.margin[3]]); // 界面像素范围
        let xScale = that.xScale;
        let yScale = that.yScale;

        let maxValue = that.max(currentData);// 获取最大值
        let minValue = 0; //that.min(currentData);
        that.xScale.domain([minValue, maxValue]); //数据范围


        let gridHeight = that.clientHeight - that.margin[0] - that.margin[2];

        // if (that.barNumber == currentData.length) {
        //     gridHeight = (yScale(currentData.length - 1) - yScale(0) - that.height);
        // } else {
        //     gridHeight = yScale(currentData.length) - yScale(0);
        // }
        if (!that.showAxisX) that.xSicks = 0
        that.gridscale = d3["bottom" == that.xAxisPos ? "axisBottom" : "axisTop"]()
            .tickPadding(12)
            .scale(that.xScale)
            .ticks(that.xSicks)
            .tickSize(-gridHeight, 0, 0)
            .tickFormat(d => {
                if (d < 0) {
                    return "";
                }
                if (!that.showAxisX) return "";
                return that.format(d);
            })

        that.svg.select(".grid")
            .attr('transform', () => {
                if ("bottom" == that.xAxisPos) {
                    return 'translate(' + 0 + ',' + (that.clientHeight - that.margin[0] - 20) + ' )'
                } else {
                    return 'translate(' + 0 + ',' + (that.margin[0] + 20) + ' )'
                }
            })
            .style("font-size", that.XfontSize)
            .transition()
            .duration(that.durationTime)
            .call(that.gridscale)
            .ease(that.d3Ease)

        that.svg.select(".grid").selectAll("Text")
            .attr('transform', 'translate(0,10)')
            .attr("dy", function () {
                return 0;
            })
            .style("font-size", that.XfontSize)
            .attr("fill", that.fontColor)
            .attr("fill-opacity", 1);
        that.svg.select(".grid").selectAll("line").attr("opacity", 0.4);


        that.svg.select(".grid").select("path").remove();
        var binding = that.bar.selectAll('g')
            .data(currentData, function (d) {
                return d[that.columnName[0]] + d['_inner_color']
            });

        binding.exit().transition().duration(that.durationTime)
            .attr("transform", function (d, i) {
                return "translate(" + xScale(minValue) + "," + (yScale(0) + that.height + 20) + ")";
            })
            .ease(that.d3Ease).attr("opacity", 0.0001).remove();

        //补充新的元素
        let enterG = binding.enter().append("g").attr("opacity", 1);
        // console.log(xScale(minValue));
        // 新元素初始化
        enterG.attr("opacity", 0.0001)
            .attr("transform", function (d, i, data) {
                if (currentData.length == that.barNumber) {
                    return "translate(" + xScale(minValue) + "," + (yScale(data.length - 1) - that.height + 50) + ")";
                } else {
                    return "translate(" + xScale(minValue) + "," + (yScale(data.length - 1) - that.height + 50) + ")";
                }
            })
            .transition()
            .duration(that.durationTime)
            .attr("transform", function (d, i) {
                return "translate(" + xScale(minValue) + "," + (yScale(i) + 20) + ")";
            })
            .attr("opacity", 1)
            .ease(that.d3Ease);

        // 添加path替换原始的rect，提升代码的通用性和可配置性
        enterG.append("path")
            .attr("class", "rect-path")
            .transition()
            .ease(that.d3Ease)
            .duration(that.durationTime)
            .attrTween("d", function (d) {
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                d3.select(this).attr("pre-width", width)
                let inter = d3.interpolateNumber(0, width)
                return function (t) {
                    let rx = that.rx
                    let height = that.height
                    width = inter(t)
                    if (width < 12 && that.templateType == "template_csl") width = 12
                    rx = d3.min([width / 2, rx, that.height / 2])
                    // 判断是否绘制锐角
                    let cornerStr = ""
                    if (that.rectSharpCorner) {
                        cornerStr = `l -${height / 3} , `
                    } else {
                        cornerStr = "v"
                    }
                    // 下方从右到左绘制直线的长度
                    let cornerStr2 = ""
                    if (that.rectSharpCorner) {
                        cornerStr2 = width - rx * 2 - height / 3
                    } else {
                        cornerStr2 = width - rx * 2
                    }
                    return `M${rx},${0} h${width - rx * 2} a${rx},${rx} 0 0 1 ${rx},${rx} ${cornerStr} ${height - rx * 2} a${rx},${rx} 0 0 1 -${rx},${rx} h${-cornerStr2} a${rx},${rx} 0 0 1 -${rx},-${rx} v-${height - rx * 2} a${rx},${rx} 0 0 1 ${rx},-${rx} z`
                }
            })
            .attr("fill", function (d, i) {
                if (that.templateType == 'template1' && that.gradient || that.ifGradient) return 'url(#colorGradient)'
                return d['_inner_color'];
            })
            .attr("stroke", "#fff")
            .attr("stroke-width", function () {
                if (that.templateType == 'template0') return '2px'
                return '0px'
            })
            .attr('filter', function () {
                if (that.templateType == 'template1' || that.templateType == "template_csl") return "url(#f1)"
                return 'url(#empty)'

            });

        enterG.append("text")
            .text(function (d, i) {
                if (that.nameAtLeft) {
                    return d[that.columnName[0]];
                }
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                if (d[that.columnName[0]].length * that.YfontSize > width) {
                    return ''
                }
                return d[that.columnName[0]];
            })
            .attr("font-size", that.YfontSize)
            .attr("font-family", that.fontfamilyBase)
            .attr("fill", that.fontColor)
            .attr("class", 'yText')
            .attr("text-anchor", "end")
            // .attr("alignment-baseline","middle")
            .transition()
            .duration(that.durationTime)
            .ease(that.d3Ease)
            .attrTween("transform", function (d, i) {
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                let inter = d3.interpolateNumber(0, width)
                return function (t) {
                    if (that.nameAtLeft) {
                        return "translate(" + -20 + "," + (that.height / 2 + 0.8 * that.YfontSize / 2) + ")";
                    } else {
                        return "translate(" + (inter(t) - 10) + "," + (that.height / 2 + 0.8 * that.YfontSize / 2) + ")";
                    }
                }

            })
            ;

        binding.selectAll('.yText')
            .attr("font-size", that.YfontSize)
            .attr("opacity", function (d, i) {
                if (that.nameAtLeft) {
                    return 1;
                }
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                if (d[that.columnName[0]].length * that.YfontSize > width) {
                    return 0
                }
                return 1;
            })
            .transition()
            .duration(that.durationTime)
            .ease(that.d3Ease)
            .attr("transform", function (d, i) {
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                // let inter=d3.interpolateNumber(0,width)
                // return function(t){
                if (that.nameAtLeft) {
                    return "translate(" + -20 + "," + (that.height / 2 + 0.8 * that.YfontSize / 2) + ")";
                } else {
                    return "translate(" + (width - 10) + "," + (that.height / 2 + 0.8 * that.YfontSize / 2) + ")";
                }
                // }
            })
            .attr("fill", that.fontColor)
        // 添加柱子右侧的文字——数字
        enterG.append("text").attr("class", "tips")
            .text(function (d, i) {
                let text = ''
                if (!that.nameAtLeft) {
                    let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                    if (d[that.columnName[0]].length * that.YfontSize > width) {
                        text = d[that.columnName[0]] + ' '
                    }
                }
                if (that.showLabel) return text + that.format(d[that.columnName[1]]);
                return ''
            })
            .attr("stroke", "#fff")
            .attr("stroke-width", function () {
                if (that.templateType == 'template0') return '0.5px'
                return '0px'
            })
            .attr("transform", function (d, i) {
                let posY = that.height / 2 + 0.8 * that.YfontSize / 2
                return "translate(" + 0 + "," + posY + ")";
            })
            .transition().duration(that.durationTime)
            .attr("font-size", that.YfontSize + 4)
            .attr("transform", function (d, i) {
                let posY = that.height / 2 + 0.8 * that.YfontSize / 2
                if (that.useImages) {

                    if (!d.image) {

                        return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 10) + "," + posY + ")"//that.height / 2 + (7 * that.YfontSize / that.height + that.height / that.barNumber)) + ")";
                    }
                    return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + imageHeight * 1.8) + "," + posY + ")";
                }
                return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 20) + "," + posY + ")";
            })
            .attr("text-anchor", "start")
            .attr("fill", function (d) {
                if (that.templateType == 'template1' && that.gradient) return that.colors[1]
                if (that.templateType == 'template0') return d['_inner_color'];
                return that.fontColor
            })
            .attr('font-family', 'DINPro')
            .ease(that.d3Ease);

        binding.selectAll(".tips").text(function (d, i) {
            let text = ''
            if (!that.nameAtLeft) {
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                if (d[that.columnName[0]].length * that.YfontSize > width) {
                    text = d[that.columnName[0]] + ' '
                }
            }
            if (that.showLabel) return text + that.format(d[that.columnName[1]]);
            return ''
            // if (that.showLabel) return that.format(d[that.columnName[1]]);
            // return ''
        })

        binding.selectAll(".tips")
            .transition()
            .duration(that.durationTime)
            .attr("transform", function (d, i) {
                let posY = that.height / 2 + 0.8 * that.YfontSize / 2
                if (that.useImages) {
                    if (!d.image) {
                        return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 10) + "," + posY + ")";
                    }
                    return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + imageHeight * 1.8) + "," + posY + ")";
                }
                return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 20) + "," + posY + ")";
            })
            .attr("text-anchor", "start")
            .attr("font-size", that.YfontSize + 4)
            .attr("fill", function (d) {
                if (that.templateType == 'template1' && that.gradient) return that.colors[1]
                if (that.templateType == 'template0') return d['_inner_color'];
                return that.fontColor
            })
            .ease(that.d3Ease);

        binding.selectAll(".rect-path")
            .transition()
            .duration(that.durationTime)
            .attrTween("d", function (d) {
                let preWidth = Number(d3.select(this).attr("pre-width"))
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                let inter = d3.interpolateNumber(preWidth, width)
                return function (t) {
                    let rx = that.rx
                    let height = that.height
                    width = inter(t)
                    if (width < 12 && that.templateType == "template_csl") width = 12
                    rx = d3.min([width / 2, rx, that.height / 2])
                    // 判断是否绘制锐角
                    let cornerStr = ""
                    if (that.rectSharpCorner) {
                        cornerStr = `l -${height / 3} , `
                    } else {
                        cornerStr = "v"
                    }
                    // 下方从右到左绘制直线的长度
                    let cornerStr2 = ""
                    if (that.rectSharpCorner) {
                        cornerStr2 = width - rx * 2 - height / 3
                    } else {
                        cornerStr2 = width - rx * 2
                    }
                    return `M${rx},${0} h${width - rx * 2} a${rx},${rx} 0 0 1 ${rx},${rx} ${cornerStr} ${height - rx * 2} a${rx},${rx} 0 0 1 -${rx},${rx} h${-cornerStr2} a${rx},${rx} 0 0 1 -${rx},-${rx} v-${height - rx * 2} a${rx},${rx} 0 0 1 ${rx},-${rx} z`
                }
            })
            .on("end", function (d) {
                let width = xScale(d[that.columnName[1]]) - xScale(minValue)
                d3.select(this).attr("pre-width", width)
            })
            .attr('filter', function () {
                if (that.templateType == 'template1' || that.templateType == "template_csl") return "url(#f1)"
                return 'url(#empty)'
            })
            .ease(that.d3Ease);

        binding.transition().duration(that.durationTime).attr("transform", function (d, i) {
            return "translate(" + xScale(minValue) + "," + (yScale(i) + 20) + ")";
        }).ease(that.d3Ease);

        that.svg.selectAll("g").attr('opacity', '1')
        that.svg.select('.topText')
            .attr('visibility', that.showRanking ? 'visible' : 'hidden')
            // .attr("x", that.svg.attr("width") - that.margin[1] + 80)
            .attr("x", that.svg.attr("width") * 0.9)
            .attr("y", that.margin[0] - that.rectRate * 5 - 10)
            .attr("font-size", that.rankingFontsize)
            .text(function (d, i) {
                if (that.index - 1 < 0 || that.index > that.jsonData.length) return ''
                let valueArr = that.jsonData.map(d => {
                    return d[that.columnName[1]]
                }).reverse()
                let showName = that.jsonData[that.index - 1][that.columnName[0]]
                let showValue = that.jsonData[that.index - 1][that.columnName[1]]
                let rank = valueArr.indexOf(showValue) + 1

                let rankingText = '第' + rank + '名 ' + showName
                if (that.language == 'en') rankingText = 'No.' + rank + ' ' + showName
                return rankingText
                //return '第' + that.dataIndex + '名 ' + d[that.columnName[0]];
            })
            .attr("fill", that.fontColor)
        // 添加图表icon
        if (that.useImages) {

            enterG.append('image')
                .attr("class", "image")
                .attr("preserveAspectRatio", "xMidYMid meet")
                .attr("width", function (d, i) {
                    if (d["image"]) {
                        return imageHeight * 3 / 2 - 5
                    } else {
                        return 0
                    }
                })
                .attr("height", function (d, i) {
                    return imageHeight
                })
                .attr("x", -10)
                .attr("y", function (d, i) {
                    return 0//(that.rectHeight + (8 * that.YfontSize / that.rectHeight + 1.5 * that.rectHeight / that.barNumber)) - that.rectHeight - that.rectHeight/2
                    //return that.rectHeight + i * (that.rectHeight + that.rectSpace);
                })
                .transition()
                .duration(that.durationTime)
                .ease(that.d3Ease)
                .attr("transform", function (d, i) {
                    return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 20) + "," + (that.rectHeight - imageHeight) / 2 + ")";
                })
                .attr("xlink:href", function (d, i) {
                    let img = d["image"]
                    if (img) return img
                    return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABVCAYAAADNCyPqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAADGSURBVHhe7dAxAQAwDMCg+ffctSr4cmCA92c2TsFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjBWMFYwVjB1OwBeFHfxoh6bUcAAAAASUVORK5CYII="
                })
                ;

            binding.selectAll(".image")
                .transition().duration(that.durationTime)
                .attr("width", function (d, i) {
                    if (d["image"]) {
                        return imageHeight * 3 / 2 - 5
                    } else {
                        return 0
                    }
                })
                .attr("height", function (d, i) {
                    return imageHeight
                })
                .attr("x", -10)
                .attr("y", function (d, i) {
                    return 0//(that.rectHeight + (8 * that.YfontSize / that.rectHeight + 1.5 * that.rectHeight / that.barNumber)) - that.rectHeight - that.rectHeight/2
                }).attr("text-anchor", "start")
                .attr("transform", function (d, i) {
                    return "translate(" + (xScale(d[that.columnName[1]]) - xScale(minValue) + 20) + "," + (that.rectHeight - imageHeight) / 2 + ")";
                }).ease(that.d3Ease);
        }
        this.timeout = d3.timeout(function () {
            if (that.index + 1 > that.jsonData.length) {
                callback(0, true)
                that.index = 0
            } else {
                if (that.isPlay) {
                    callback(that.index + 1, false)
                    that.index++;
                    that.dataIndex--
                    that.updateChart(callback);
                }
            }
        }, that.durationTime);
    }

    updateObj(obj, callback) {
        clearTimeout(this.timeout);
        this.timeout.stop();

        Object.assign(this, obj)

        if (this.replay) {
            this.dataIndex = this.jsonData.length + 1
            this.index = 0
            d3.select("#" + this.el).html('')
            this.init(obj, callback)
        } else {
            let c = this.colors.concat()
            for (let i = 0; i <= this.data.length; i = i + c.length) {
                this.colors = this.colors.concat(c)
            }
            this.updateChart(callback)
        }
        // let that = this
        // this.currentRect.attr("fill", function(d, i) {
        //     return that.colors[i]
        // });
    }
    destroy() {
        clearTimeout(this.timeout);
        if (this.timeout != null) this.timeout.stop();
        Object.assign(this, null)
    }

    // max(currentData) {
    //     let tmp = that.columnName[1];
    //     return d3.max(currentData, d => d[tmp])*1.2;
    // }

    min(currentData) {
        let that = this;
        let tmp = that.columnName[1];
        return d3.min(currentData, d => d[tmp]) * 0.9;
    }

    getData() {
        let that = this;
        let currentData = [];
        // console.log(that.index)
        if (that.index <= that.barNumber) {
            for (let i = 0; i < that.index; i++) {
                if (that.jsonData[i]) currentData.push(that.jsonData[i]);
            }
        } else {
            for (let i = that.index - that.barNumber; i < that.index; i++) {
                if (that.jsonData[i]) currentData.push(that.jsonData[i]);
            }
        }
        return currentData;
    }


    /** 千分位格式化 */
    format(num) {
        if (this.pointFormat == 0) {
            num = parseInt(num)
        } else if (this.pointFormat == 1) {
            num = parseFloat(num).toFixed(1)
        } else if (this.pointFormat == 2) {
            num = parseFloat(num).toFixed(2)
        } else {
            num = Number(num)
        }

        let result = '';
        if (this.showThousands) {
            num = (num || 0).toString();
            let a = num.split('.')[0] || num
            let b = num.split('.')[1] || ""
            while (a.length > 3) {
                result = ',' + a.slice(-3) + result;
                a = a.slice(0, a.length - 3);
            }
            if (a) { result = a + result; }
            if (b) { result = result + "." + b }
        } else {
            result = num
        }
        if (this.showPercent) result = result + '%'
        return result
    }
    /** 计算最大值 */
    max(currentData) {
        let that = this;
        let tmp = that.columnName[1];
        return d3.max(currentData, function (d) { return parseFloat(d[tmp]); });
    }

    sortJsonData() {
        let that = this;
        for (let i = 0; i < that.jsonData.length; i++) {
            that.jsonData[i]['_inner_color'] = that.colors[i];
        }
        that.jsonData.sort(function (a, b) {

            let aValue = Number(a[that.columnName[1]]);
            let bValue = Number(b[that.columnName[1]]);
            if (that.reverseOrder) {
                return bValue >= aValue ? 1 : -1;
            }
            return bValue >= aValue ? -1 : 1;
        })
    }

    arrayToJson() { //添加配色
        let that = this;
        that.data = that.removeNull(that.data)
        that.columnName = that.data[0];
        let json = [];
        for (let i = 1; i < that.data.length; i++) {
            let res = {};
            for (let j = 0; j < that.columnName.length; j++) {
                res[that.columnName[j]] = that.data[i][j];
            }
            // let cIndex = i % that.colors.length;
            //res['_inner_color'] = that.colors[i-1];
            json.push(res);
        }
        that.jsonData = json;
        if (that.useImages) this.updataImages();
        that.sortJsonData();
    }

    removeNull(data) {
        let array = []
        for (let i = 0; i < data.length; i++) {
            let a = []
            for (let j = 0; j < data[i].length; j++) {
                if (data[i][j] != null && data[i][j] != "" && data[i][j] != " ") {
                    data[i][j] = (data[i][j] + '').replace(/,/g, '')
                    a.push(data[i][j])
                }
            }
            if (a.length > 0) array.push(a)
        }
        return array
    }
}
export default DynamicBar;