datavizstocklib/src/banlance.js

测试一下呗

import * as d3 from "d3";
import $ from "jquery";
import infoPanel from "./infoPanel";
import vizlog from "./vizlog";

let config = {
    name: "banlanceChart",
    svg: {},
    screenWidth: document.documentElement.clientWidth, //屏幕宽度
    screenHeight: document.documentElement.clientHeight, //屏幕高度
    comWidth: "", //当前页面宽度
    comHeight: "", //当前页面高度
    widthHeightRate: 0.5, // 宽高度比率
    fillopacity: 1,
    showAxisY: true, //是否添加Y轴，默认添加
    /**
    * 0 正常情况， 1 正常情况下，但权益有负值，2资不抵债
    */
    chartType: 0,
    perfitSourceData: [],
    resData: [],
    unitnumber: 100000000,
    dataMaxMin: [],
    yScale: {},
    margin: [60, 60, 20, 20], //上，右，下，左
    colorSet: [
        "#E04C4C",
        "#F98080",
        "#F96262",
        "#02A4C4",
        "#2AC4D8",
        "#1F5DAD",
        "#3B7DC4",
        "#5D9FDB",
        "#56D8E2"
    ], // 色系
    colors: [['#ca465d', '#d2485d', '#d9495d', '#e24b5d'],
    ['#2b57a7', '#265cb0', '#2161ba', '#186aca'],
    ['#2ab9cd', '#2aadc7', '#2aa2c2', '#2a9cbf']],
    colorname: [],
    ws: 3, // ws white space 空白
    baseW: 7, //控件左右间距
    comW: 100, //控件宽度
    xlength: 0, //X 轴宽度
    referenceYaxis: 0, //参考 Y坐标
    fontsize: 0, //字号
    fontfamilyBase: "SourceHanSansK-Regular-plotly,Helvetica Neue,PingFang SC,Microsoft YaHei,Helvetica,Hiragino Sans GB,Arial,sans-serif",
    fontfamilyPost: "SourceHanSansK-Regular-plotly,Helvetica Neue,PingFang SC,Microsoft YaHei,Helvetica,Hiragino Sans GB,Arial,sans-serif", //字体 Bold Medium
    axisfontsize: [13, 13],//坐标轴字号 先x，再y
    rectTextColor: "#EFEFEF", //文字颜色
    responsedatamin: 0, // 数据中的最小值
    companytype: 0, // 1/普通  2/证券601881  3/银行000001  4/保险601628
    el: '_dataviz',
    comSize: [8.5, 9.5],//各控件位置个数
    timer: {},
    click: {},
    shadow: true,
    textHeight: '',//文字高度
    shadowid: '',
    numberFixed:2 //数值保留位数
}
export class Banlance {
    constructor() {
        let newconfig = JSON.parse(JSON.stringify(config));
        Object.assign(this, newconfig)
    }
    init(obj) {
        Object.assign(this, obj);
        this.companytype = this.resData[3].value;
        if (this.companytype != 1) {
            this.chartType = 3;
            this.comSize = [3.5, 4.5];
        }
        this.svg = d3.select("#" + this.el).append("svg");

        let textid = "suntest" + parseInt(Math.random() * 10000);
        this.svg
            .append("defs")
            .append("text")
            .style("font-size", this.fontsize)
            .attr("x", 0)
            .attr("y", 0)
            .style("color", "transparent")
            .text("资产")
            .attr("fill-opacity",this.fillopacity)
            .attr("id", textid);
        this.textHeight = this.fontsize;
        // document.querySelector("#" + textid).getBBox().height;

        this.unitChange();
        this.show();
    }
    show() {
        this.shadowid = infoPanel.randomWord(8);
        this.colorname = [];
        for (var i = 0; i < this.colors.length; i++) {
            for (var j = 0; j < this.colors[i].length - 1; j++) {
                var _name = "cname" + parseInt(Math.random() * 10000);
                if (i == 0) {
                    infoPanel.gradient(this.svg, _name, this.colors[i][j + 1], this.colors[i][j]);
                } else {
                    infoPanel.gradient(this.svg, _name, this.colors[i][j], this.colors[i][j + 1]);
                }
                this.colorname.push(_name);

            }
        }
        // this.getComw(); //初始化宽度值
        if (this.dataMaxMin.length == 0) {
            this.dataMaxMin = this.maxNumberOfData();
        } else {
            this.dataMaxMin['max'] = this.dataMaxMin['max'] / this.unitnumber;
            this.dataMaxMin['min'] = this.dataMaxMin['min'] / this.unitnumber;
        }
        this.createAxis();
        vizlog.i("创建资产");
        this.zc();
        vizlog.i("创建负债");
        this.fz();
        infoPanel.initInfoPanel(this.svg, this.el, this.fontfamilyBase);
        infoPanel.black(this.shadowid);

    }


    createAxis() {
        this.comWidth = $("#" + this.el).width();
        this.comHeight = $("#" + this.el).height() //this.comWidth * this.widthHeightRate;
        //this.svg.attr("width", this.comWidth).attr("height", this.comHeight + this.margin[2]);
        this.svg.attr("width", this.comWidth).attr("height", this.comHeight);
        this.svg.attr("class", "teszhu");

        let width = this.comWidth,
            height = this.comHeight,
            chartWidth = width - this.margin[1] - this.margin[3],
            chartHeight = height - this.margin[0] - this.margin[2];

        let chart = this.svg
            .append("g")
            .attr("transform", `translate(${this.margin[1]}, ${this.margin[0]})`);

        //创建y轴比例尺
        let stepNum = d3.tickStep(Math.floor(this.dataMaxMin["min"]), Math.ceil(this.dataMaxMin["max"]), 10);
        let max = Math.ceil(this.dataMaxMin["max"] / stepNum) * stepNum;
        let min = Math.floor(this.dataMaxMin["min"] / stepNum) * stepNum;
        this.yScale = d3
            .scaleLinear()
            .rangeRound([chartHeight, 0]) // 界面像素范围
            .domain([min, max]); //数据范围 
        if (this.showAxisY) {
            //生成y轴 
            chart
                .append("g")
                .attr("id", "yyyy" + this.el)
                .call(d3.axisLeft(this.yScale))
                .style("font-size", this.axisfontsize[0])
                .style("font-family", this.fontfamilyBase);
            d3.select("#yyyy" + this.el)
                .select("path")
                .remove();

            // 删除Y轴上的多余线
            let linenode = d3.select("#yyyy" + this.el).selectAll("line");
            linenode.each(function (d, i) {
                d3.select(this).remove();
            })
        }
        //绘制平行的坐标系轴线，其实是将刻度线反向延长
        let t = d3
            .axisLeft()
            .scale(this.yScale)
            .tickSize(-chartWidth, 0, 0)
            .tickFormat("");
        chart
            .append("g")
            .attr("class", "grid")
            .attr("id", "yxx" + this.el)
            .call(t)
            .style("color", this.showAxisY ? "#DCDCDC" : "transparent");
        d3.select("#yxx" + this.el)
            .select("path")
            .remove();
        vizlog.i("原点位置：" + 0 + " : " + this.yScale(0));


        this.xlength = document.getElementById("yxx" + this.el).getBBox().width;
        if (this.chartType == 0) {
            this.comW = this.xlength / (this.getComw() + 1.1);
        } else if (this.chartType == 1) {
            this.comW = this.xlength / (this.getComw() + 1.1);
        } else if (this.chartType == 2) {
            this.comW = this.xlength / (this.getComw() + 1.1);
        } else if (this.chartType == 3) {
            this.comW = this.xlength / (18 + 1.1);
            this.comW = this.comW * 2;
        }
        //  this.baseW = 7;
        //  this.ws = 3;
        // x轴加粗 
        infoPanel.addLineForDataviz(this.svg, 0 + this.margin[1], this.yScale(0) + this.margin[0],
            chartWidth + this.margin[1], this.yScale(0) + this.margin[0], 1, "black");
    }
    /**
     * 资产情况
     */
    zc() {
        let that = this;
        let t = that.resData[0];
        var x = that.margin[1] + that.comW * that.comSize[0] + that.baseW;

        let h = that.calNumberHeight(t["value"]);
        let y = that.yScale(0) - h;
        that.addRect(t["name"], t["value"], x, y, that.comW, h, 0, undefined, true);
        let line = 0;
        that.addSecondTitle(
            that.comW,
            100,
            x + that.comW,
            that.yScale(0) - h + that.margin[0] - 8,
            t["value"],
            this.colorSet[0],
            'left'
        );
        that.zcSecond(t.records, x);
    }
    /**
     * 流动资产
     */
    zcSecond(data, x) {
        let that = this;
        that.referenceYaxis = that.yScale(0);

        for (var i = data.length - 1; i >= 0; i--) {
            let t = data[i];
            let h = that.calNumberHeight(t["value"]);
            if (i == 0) {
                h = h - that.ws * (data.length - 0.99);
            }
            that.referenceYaxis = that.referenceYaxis - h;
            let xx = x - that.baseW - that.comW * 3;

            vizlog.i(t['name'] + " : " + t['value'])
            that.addRect(
                t["name"],
                t["value"],
                xx,
                that.referenceYaxis,
                that.comW * 3,
                h,
                1, 'lefttop'
            );

            // 添加子控件
            if (t.records.length > 0) {
                that.addLeftChildRect(t.records, xx, that.referenceYaxis + h, h, 2);
            }
            that.referenceYaxis = that.referenceYaxis - that.ws;
        }
    }
    addLeftChildRect(data, xx, baseY, ph, c) {
        let that = this;
        let y = baseY;
        let x = xx - that.comW * 5 - that.baseW;
        let copydata = [];//
        let sum = 0;
        for (var i = 0; i < data.length; i++) {
            copydata.push(data[i]);
            sum += +data[i].value;
        }
        let restH = ph - that.ws * (data.length - 1);
        copydata = copydata.reverse();
        for (var i = 0; i < copydata.length; i++) {
            let t = copydata[i];
            //let h = that.calNumberHeight(t.value);
            let h = restH * t.value / sum;
            y = y - h;
            that.addRect(t.name, t.value, x, y, that.comW * 5, h, c, 'lefttop');
            y = y - that.ws;
            /* if (i > 0) {
                 // 非第一项 每一项都减去空隙的高度
                 h = that.calNumberHeight(t.value) - that.ws;
             }
 
             if (ph < h) {
                 h = ph;
             }
             y = y - h;
             that.addRect(t.name, t.value, x, y, that.comW * 5, h, c, 'lefttop');
             y = y - that.ws;
             ph = ph - h - that.ws; */
        }
    }
    /**
     * 负债和权益一并处理
     */
    fz() {
        vizlog.i("图表类型：" + this.chartType);
        switch (this.chartType) {
            case 0:
                this.case00();
                break;
            case 1:
                this.case01();
                break;
            case 2:
                this.case02();
                break;
            case 3:
                this.case00();
                break;
        }
    }
    /**
     * 正常情况下，资产大于负债且权益中无负值
     */
    case00() {

        let cIndex = 1;
        let t = this.resData[1];
        let h = this.calNumberHeight(t.value);
        let x = this.margin[1] + this.comW * this.comSize[1] + this.baseW * 2;
        if (h > this.ws) {
            h = h - this.ws;
        }
        let y = this.yScale(this.resData[0].value);
        this.addRect(t.name, t.value, x, y, this.comW, h, cIndex + 2, undefined, true);

        this.addSecondTitle(
            this.comW,
            100,
            x,
            y + this.margin[0] - 8,
            t["value"],
            this.colorSet[5],
            'right'
        );

        //添加负债明细项
        vizlog.i("添加" + t.name + "明细项 H:" + h);

        this.case01fzDetail(
            t.records,
            x + this.comW + this.baseW,
            cIndex + 3,
            y + h,
            this.comW * 3.5,
            h
        );

        //处理权益

        t = this.resData[2];

        h = this.calNumberHeight(t.value);
        y = this.yScale(0) - h;
        this.addRect(t.name, t.value, x, y, this.comW, h, 6);


        this.addSecondTitle(
            this.comW,
            100,
            x + this.comW / 2,
            this.yScale(0) + this.margin[0] + 10,
            t["value"],
            this.colorSet[3]
        );

        //添加权益明细项
        this.case01qyDetail(t.records, x + this.comW + this.baseW, 7);



    }
    case01qyDetail(data, x, c) {
        let tmp = this.yScale(0);
        for (var i = data.length - 1; i >= 0; i--) {
            let t = data[i];
            let h = this.calNumberHeight(t.value);
            if (i == 0) {
                if (h > h - (data.length - 1) * this.ws) {
                    h = h - (data.length - 1) * this.ws;
                }
            }
            tmp = tmp - h;
            this.addRect(t.name, t.value, x, tmp, this.comW * 3.5, h, c, 'lefttop');
            tmp = tmp - this.ws;
        }
    }
    case01fzDetail(data, x, c, y, w, ph) {
        for (var i = data.length - 1; i >= 0; i--) {
            let t = data[i];
            vizlog.i("创建" + t.name + "子项 ph:" + ph);
            let h = this.calNumberHeight(t.value);
            if (i == 0) {
                if (h > h - this.ws * (data.length - 1)) {
                    h = h - this.ws * (data.length - 1);
                }
            }
            if (ph < h) {
                h = ph;
            }
            y = y - h;

            this.addRect(t.name, t.value, x, y, w, h, c, 'lefttop');

            y = y - this.ws;
            ph = ph - h - this.ws;
            //        this.addRightRect();
            if (h > 0) {


                this.case01fzDetail(
                    t.records,
                    x + this.comW * 3.5 + this.baseW,
                    c + 1,
                    y + h + this.ws,
                    (w / 3.5) * 5,
                    h, 2
                );
            }
        }
    }
    /**
     * 虽然资抵过债，但是权益中有负值
     */
    case01() {
        //处理负债
        let cIndex = 1;
        let t = this.resData[1];
        let x = this.margin[1] + this.comW * this.comSize[1] + this.baseW * 2;
        let h = this.calNumberHeight(t.value);
        let y = this.yScale(this.resData[0].value);
        this.addRect(t.name, t.value, x, y, this.comW, h, cIndex + 2, undefined, true);
        this.case01fzDetail(
            t.records,
            x + this.comW + this.baseW,
            cIndex + 3,
            y + h,
            this.comW * 3.5,
            h
        );

        this.addSecondTitle(
            this.comW,
            100,
            x,
            y + this.margin[0] - 8,
            t["value"],
            this.colorSet[5],
            'right'
        );

        //处理权益
        cIndex = 6;
        t = this.resData[2];
        x = this.margin[1] + this.comW * 19 + this.baseW * 5;
        h = this.calNumberHeight(Math.abs(t.value)) - this.ws;
        y = this.yScale(0) - h;
        this.addRect(t.name, t.value, x, y, this.comW, h, cIndex);

        this.addSecondTitle(
            this.comW,
            100,
            x + this.comW / 2,
            this.yScale(0) + this.margin[0] + 10,
            t["value"],
            this.colorSet[3]
        );

        this.referenceYaxis = y;
        let upzero = [];
        let downzero = [];
        for (var i = 0; i < t.records.length; i++) {
            if (t.records[i].value < 0) {
                downzero.push(t.records[i]);
            } else {
                upzero.push(t.records[i]);
            }
        }

        //处理权益中为正值数据
        x = x + this.comW + this.baseW;
        y = this.yScale(0);
        upzero.reverse();
        for (var i = 0; i < upzero.length; i++) {
            t = upzero[i];
            h = this.calNumberHeight(t.value);
            if (i < upzero.length - 1) {
                h = h - this.ws;
            }
            y = y - h;
            this.addRect(t.name, t.value, x, y, this.comW * 3.5, h, cIndex + 1, 'lefttop');
            if (i < upzero.length - 1) {
                y = y - this.ws;
            }
        }

        //处理权益为负的数据
        x = x + this.comW * 3.5 + this.baseW;
        // y = this.referenceYaxis;
        for (var i = 0; i < downzero.length; i++) {
            t = downzero[i];
            h = this.calNumberHeight(Math.abs(t.value));
            h = h - this.ws;
            this.addRect(t.name, t.value, x, y, this.comW * 3.5, h, cIndex + 2, 'lefttop');
            y = y + h + this.ws;
        }
    }
    /**
     * 资不抵债
     */
    case02() {
        //处理负债
        let cIndex = 1;
        let t = this.resData[1];
        let x = this.margin[1] + this.comW * this.comSize[1] + this.baseW * 2;
        let h = this.calNumberHeight(t.value);
        //let y = this.yScale(0) - h;
        let y = this.yScale(this.resData[0].value);
        this.addRect(t.name, t.value, x, y, this.comW, h, cIndex + 2, undefined, true);


        this.addSecondTitle(
            this.comW,
            100,
            x,
            y + this.margin[0] - 8,
            t["value"],
            this.colorSet[5],
            'right'
        );


        this.case01fzDetail(
            t.records,
            x + this.comW + this.baseW,
            cIndex + 3,
            y + h,
            this.comW * 3.5,
            h
        );
        //处理权益
        cIndex = 6;
        t = this.resData[2];
        x = this.margin[1] + this.comW * 19 + this.baseW * 5;
        h = this.calNumberHeight(Math.abs(t.value));
        //y = this.yScale(this.resData[1].value);
        y = this.yScale(0);
        this.addRect(t.name, t.value, x, y, this.comW, h, cIndex);


        this.addSecondTitle(
            this.comW,
            100,
            x + this.comW / 2,
            y + h + this.margin[0] + 10,
            t["value"],
            this.colorSet[3]
        );

        this.referenceYaxis = y + h;

        let upzero = [];
        let downzero = [];
        for (var i = 0; i < t.records.length; i++) {
            if (t.records[i].value < 0) {
                downzero.push(t.records[i]);
            } else {
                upzero.push(t.records[i]);
            }
        }

        upzero.reverse();
        //处理权益中为正值数据
        x = x + this.comW + this.baseW;
        y = this.yScale(0);
        for (var i = 0; i < upzero.length; i++) {
            t = upzero[i];
            h = this.calNumberHeight(t.value);
            if (i < upzero.length - 1) {
                h = h - this.ws;
            }
            y = y - h;
            this.addRect(t.name, t.value, x, y, this.comW * 3.5, h, cIndex + 1, 'lefttop');
            y = y - this.ws;
        }

        y = y + this.ws;
        //处理权益为负的数据
        x = x + this.comW * 3.5 + this.baseW;
        // y = this.yScale(this.resData[1].value);
        // y = this.yScale(0);
        for (var i = 0; i < downzero.length; i++) {
            t = downzero[i];
            h = this.calNumberHeight(Math.abs(t.value));
            if (i == 0) {
                h = h - this.ws * (downzero.length - 1);
            }
            this.addRect(t.name, t.value, x, y, this.comW * 3.5, h, cIndex + 2, 'lefttop');
            y = y + h + this.ws;
        }

    }
    /**
     * 控件id, 控件值, 矩形 x  y 左上角坐标, h 高度, c 色系索引,f是否添加文字 false表示添加
     */
    addRect(id, v, x, y, w, h, c, pos, f) {
        if (h < 0 || x < 0 || y < 0) {
            vizlog.e("注意有负值 ==> x:" + x + " y:" + y + " h:" + h + " c:" + c + " id:" + id + " v:" + v);
            //   return;
        }
        let that = this;
        let circle = this.comWidth >= 500 ? 3 : 1.5;
        let rect = that.svg
            .append("rect")
            .attr("id", infoPanel.randomWord(8) + "_" + that.el)
            .attr("memo", id)
            .attr("vt", id)
            .attr("v", v)
            // .attr("fill", 'url(#gradient)')
            .attr("fill", 'url(#' + that.colorname[c] + ')')
            //            .attr("fill", that.colorSet[c])
            .attr("x", x)
            .attr("y", function () {
                let t = y + that.margin[0];
                return t;
            })
            .attr("width", w)
            .attr("rx", circle)
            .attr("ry", circle)
            .attr("fill-opacity", that.fillopacity)

            .attr("height", function () {
                return h;
            })
            .on('click', function () {
                let _that = d3.select(this);
                _that.attr('transform', 'translate(2,2)');
                d3.timeout(function () {
                    _that.attr('transform', 'translate(0,0)')
                }, 300);
                var thisId = _that.attr("id");
                var thisValue = _that.attr("v");
                var thisXY = d3.mouse(this);
                var t = d3.select(this).node().parentNode.parentNode.id;
                if (typeof that.click === "function") {
                    that.click(thisId, thisValue, thisXY, t, d3.event);
                }
            })
            .on("mouseover", function () {
                var thisId = d3.select(this).attr("id");
                var thisValue = d3.select(this).attr("v");
                var thisXY = d3.mouse(this);
                var t = d3.select(this).node().parentNode.parentNode.id;
                infoPanel.showInfoPanel(thisId, thisValue, thisXY, t);
            })
            .on("mouseout", function () {
                var thisId = d3.select(this).attr("id");
                var t = d3.select(this).node().parentNode.parentNode.id;
                infoPanel.hideInfoPanel(thisId, t);
            })
            .on("mousemove", function () {
                var thisId = d3.select(this).attr("id");
                var thisValue = d3.select(this).attr("v");
                var thisXY = d3.mouse(this);
                var t = d3.select(this).node().parentNode.parentNode.id;
                infoPanel.moveInfoPanel(thisId, thisValue, thisXY, t);
            });
        if (that.shadow) {
            rect.attr("filter", "url(#" + that.shadowid + ")"); // 阴影
        }
        if (f) v = null;
        if ("lefttop" == pos) {
            that.addText(w, h, id, v, x, y, c, 'lefttop');
        } else {
            that.addText(w, h, id, v, x, y, c);
        }
    }
    /**
     * w  h 矩形宽高 t 文本内容  x y  矩形坐标
     */
    addText(w, h, t, v, x, y, c, pos) {
        if (h > this.textHeight && h < 2 * this.textHeight && w < t.length * this.fontsize + 10) {
            return; //高度只够放一行的且矩形宽度不够的
        }
        if (h > this.textHeight) {
            let mx = x + w / 2;
            let my = y + this.margin[0] + h / 2;
            let p = "middle";
            if ("lefttop" === pos) {
                my = y + this.margin[0] + this.fontsize;
                if (h >= this.textHeight * 2 + 10 * 2) {
                    my += 10;
                } else {
                    my += (h - this.textHeight) / 2;
                }
                if (t.length * this.fontsize + 20 > w) {
                    mx = x + (w - t.length * this.fontsize) / 2;
                } else {
                    mx = x + 10;
                }
                p = 'start';
            }
            let id = infoPanel.randomWord(8);
            this.renderText(id, mx, my, w, h, t, p, p, this.fontsize, this.fontfamilyPost, this.rectTextColor);

            let textWidth = d3.select("#" + id).node().getComputedTextLength();
            if (textWidth > w) {// 一行显示不下了
                let maxWord = w / this.fontsize;
                p = "middle"
                mx = x + w / 2
                d3.select("#" + id).remove();
                if (textWidth / 2 > w) return;
                let tmp = t.substring(0, maxWord);
                if (h < this.textHeight * 2 + 2 * 10) {
                    if (h > this.textHeight * 2) {
                        my = y + this.margin[0] + this.fontsize + (h - this.textHeight * 2) / 2 - 3;
                    } else {
                        my = y + this.margin[0] + this.fontsize + (h - this.textHeight) / 2 - 3;
                        tmp = t.substring(0, maxWord - 1) + "...";
                        t = "";
                    }
                }
                this.renderText(infoPanel.randomWord(8), mx, my, w, h, tmp, p, p, this.fontsize, this.fontfamilyPost, this.rectTextColor);
                my = my + this.fontsize
                tmp = t.substring(maxWord);
                if (tmp.length > maxWord) tmp = tmp.substring(0, maxWord - 1) + "...";
                this.renderText(infoPanel.randomWord(8), mx, my, w, h, tmp, p, p, this.fontsize, this.fontfamilyPost, this.rectTextColor);
            }
        }
        if (w > 70 && h > 110) {
            let p = 'middle';
            let mx = x + w / 2;
            let my = y + this.margin[0] + h / 2 + this.fontsize / 2;
            let tmp = v ? v.toFixed(this.numberFixed) : '';
            this.renderText(infoPanel.randomWord(8), mx, my, w, h, tmp, p, p, this.fontsize + 2, this.fontfamilyPost, this.rectTextColor);
        }
    }
    /**
     * w宽度, h高度, x, y, t文本, c色值下标
     */
    addSecondTitle(w, h, x, y, t, c, referenceX) {

        let id = infoPanel.randomWord(8);
        this.renderText(id, x, y, w, h, t, "middle", "middle", this.fontsize, this.fontfamilyPost, c);

        let textWidth = d3.select("#" + id).node().getComputedTextLength();
        if ("left" == referenceX) {
            x = x - textWidth / 2;
        } else if ("right" == referenceX) {
            x = x + textWidth / 2;
        }
        d3.select("#" + id).remove();
        this.renderText(infoPanel.randomWord(8), x, y, w, h, t, "middle", "middle", this.fontsize, this.fontfamilyPost, c);

    }
    /**
    * 文字渲染
    * @param {String} id 编号
    * @param {number} x X 坐标
    * @param {number} y Y 坐标
    * @param {number} w 宽度
    * @param {number} h 高度
    * @param {String} text 文本 
    * @param {String} textanchor 文本水平位置 start|middle|end
    * @param {String} baseline 文本垂直位置 start|middle|end
    * @param {number} fontsize 字号
    * @param {String} fontfamily  字体
    * @param {String} textcolor 颜色
    */
    renderText(id, x, y, w, h, text, textanchor, baseline, fontsize, fontfamily, textColor) {
        this.svg
            .append("text")
            .attr("id", id)
            .text(text)
            .attr("x", x)
            .attr("y", y)
            .attr("style", "text-anchor: " + textanchor)
            .attr("dominant-baseline", baseline)
            .attr("width", w)
            .attr("height", h)
            .attr('font-weight', 700)
            .attr("font-size", fontsize)
            .attr("font-family", fontfamily)
            .attr("fill", textColor)
            .attr("fill-opacity",this.fillopacity)
            .attr("pointer-events", "none");
    }

    /**
     * 控件默认宽度
     */
    getComw() {
        var total = 0;
        if (this.resData[0].value > this.resData[1].value) {
            total = 19;
            this.chartType = 0;
            for (var t = 0; t < this.resData[2].records.length; t++) {
                if (this.resData[2].records[t].value < 0) {
                    total = 28.5;
                    this.chartType = 1;
                    break;
                }
            }
        } else {
            total = 28.5;
            this.chartType = 2;
        }
        return total;
    }
    //获取最大数和最小数
    maxNumberOfData() {
        let max = this.resData[0].value;
        vizlog.i("MAX:" + max);
        vizlog.i(
            "that.responsedatamin =" +
            this.responsedatamin +
            " chartType:" +
            this.chartType
        );
        let min = 0;
        if ((this.chartType == 2 && this.responsedatamin < 0)
            || this.resData[0].value < this.resData[1].value) {//资不抵债了
            min = this.resData[2].value;
            let a = this.resData[2].value - this.responsedatamin;
            max = max < a ? a : max;
        }

        let sum = 0;
        for (var i = 0; i < this.resData[2].records.length; i++) {
            if (this.resData[2].records[i].value > 0) {
                sum = sum + this.resData[2].records[i].value;
                max = max < sum ? sum : max;
            } else {
                min = min < this.resData[2].value ? min : this.resData[2].value;
            }
        }
        max = max < sum ? sum : max;
        this.sortData();
        return { max: max, min: min };
    }
    /**
     * 对数据进行排序
     */
    sortData() {
        this.sortRecords(this.resData[0]);
        this.sortRecords(this.resData[1]);
        this.sortRecords(this.resData[2]);
    }
    sortRecords(data) {
        let records = data.records;
        let nullIndex = [];
        if (records.length > 0) {
            for (let i = 0; i < records.length; i++) {
                if (records[i].records.length > 0) {
                    this.sortRecords(records[i]);
                } else {
                    for (let j = i + 1; j < records.length; j++) {
                        if (records[i].doubleValue < records[j].doubleValue) {//进行交换
                            let tmp = records[j];
                            records[j] = records[i];
                            records[i] = tmp;
                        }
                    }
                }
                if (parseInt(records[i].value) == 0) {
                    nullIndex.push(i);
                }
            }
            //删除空值
            let tmparray = [];
            for (let j = 0; j < nullIndex.length; j++) {
                records[nullIndex[j]] = 0;
            }
            for (let i = 0; i < records.length; i++) {
                if (records[i] != 0) {
                    tmparray.push(records[i]);
                }
            }
            data.records = tmparray;
        }
    }
    unitChange() {
        for (var i = this.resData.length - 1; i >= 0; i--) {
            this.unitChangeRecursion(this.resData[i], this.resData, i);
        }
    }
    /**
     * 递归处理 单位
     */
    unitChangeRecursion(obj, resData, index) {
        let that = this;
        if (obj) {
            if (obj.records) {
                for (var i = obj.records.length - 1; i >= 0; i--) {
                    that.unitChangeRecursion(obj.records[i], obj.records, i);
                }
            }
            if (obj.value) {
                let t = (obj.value / that.unitnumber);
                if (t.toFixed(2) == '0.00') {
                    resData.splice(index, 1);
                    return;
                }
                obj.value = parseFloat((obj.value / that.unitnumber).toFixed(that.numberFixed));
                that.responsedatamin =
                    that.responsedatamin > obj.value ? obj.value : that.responsedatamin;
            }
        }
    }
    /**
     * 计算数据对应 Y 轴高度
     */
    calNumberHeight(numberValue) {
        return this.yScale(0) - this.yScale(numberValue);
    }

    /**
     * 页面大小切换
     */
    resize() {
        let that = this;
        clearTimeout(that.timer);
        that.timer = setTimeout(function () {
            that.svg.selectAll("*").remove();
            that.show();
        }, 200);
    }
};

export default Banlance;