修改内容

whychdw

2019-12-20 7658bca4d9aa7a7bd0ea96104e522477e927ff27

 platforms/android/app/src/main/assets/www/js/common_functions.js

@@ -366,4 +366,183 @@
        }
    }
    return rs;
}
}

// F2封装
function FGraph(el, type) {
    this.id = el.getAttribute("id");
    this.minMax = {
        min: 0,
        max: 0
    };
    this.colors = {
        min: 'red',
        max: 'green',
        normal: 'blue'
    };
    this.chart = "";
    this.txtShapes = {
        show: true,
        list: []
    };
    if (this.id) {
        this._init(this.id, type);
    } else {
        this._init(null, type);
    }
};

// 初始化
FGraph.prototype._init = function (id, type) {
    var self = this;
    // 创建 Chart 对象
    this.chart = new F2.Chart({
        id: id,
        pixelRatio: window.devicePixelRatio, // 指定分辨率
        syncY: true,
        animate: false
    });

    // 设置x轴线
    this.chart.axis("x", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true // 展示在最上层
        }
    });
    // 设置y轴线
    this.chart.axis("y", {
        line: {
            lineWidth: 1,
            stroke: '#bbb',
            top: true // 展示在最上层
        },
        grid: {
            lineWidth: 1,
            stroke: '#bbb'
        }
    });

    // 设置提示框
    this.chart.tooltip({
        alwaysShow: false
    });

    // 载入数据源
    this.chart.source([]);

    // 设置最大值和最小值
    this.setMinMax([]);

    // 设置图表类型
    this._setType(type);

    // 不显示legend
    this.chart.legend(false);

    // 渲染图表
    this.chart.render();
};
// 设置图表类型
FGraph.prototype._setType = function (type) {
    var self = this;
    // 根据类型设置图表
    switch (type) {
        case 'line':
            this.chart.line().position('x*y');
            // 不显示文本
            this.txtShapes.show = false;
            break;
        default:
            // 设置颜色
            this.chart.interval().position('x*y').color('x*y', function (x, y) {
                var minMax = self.minMax;
                var colors = self.colors;
                var color = colors.normal;
                if (y == minMax.min) {
                    color = colors.min;
                } else if (y == minMax.max) {
                    color = colors.max;;
                }
                return color;
            });
            break;
    }
};
// 更新数据
FGraph.prototype.changeData = function (data) {
    // 设置最大值和最小值
    this.setMinMax(data);
    // 更改数据
    this.chart.changeData(data);
};

// 设置文本
FGraph.prototype._addTxtShape = function (data) {
    //  判断是否显示文本
    if (!this.txtShapes.show) {
        return;
    }
    var self = this;
    var chart = this.chart;
    // 移除文本
    this._txtShapesDestory();
    // 绘制柱状图文本
    var offset = -5;
    var canvas = chart.get('canvas');
    var group = canvas.addGroup();
    data.forEach(function (obj) {
        var point = chart.getPosition(obj);
        var text = group.addShape('text', {
            attrs: {
                x: point.x,
                y: point.y + offset,
                text: obj.y,
                textAlign: 'center',
                textBaseline: 'bottom',
                fill: '#808080'
            }
        });
        self.txtShapes.list.push(text);
    });
};
// 修改大小
FGraph.prototype.changeSize = function (width, height) {
    width = width ? width : null;
    height = height ? height : null;
    this.chart.changeSize(width, height);
};

// 根据data的值获取最大值和最小值
FGraph.prototype.setMinMax = function (data) {
    var rs = {
        min: 0,
        max: 0
    };
    // 设置data第一个值到rs中
    if (data.length != 0) {
        rs.min = data[0].y;
        rs.max = data[0].y;
    }
    // 遍历data的值
    for (var i = 1; i < data.length; i++) {
        var _data = data[i];
        // 设置最大值和最小值
        rs.min = rs.min > _data.y ? _data.y : rs.min;
        rs.max = rs.max < _data.y ? _data.y : rs.max;
    }
    this.minMax = rs;
};
// 销毁txtShapes
FGraph.prototype._txtShapesDestory = function () {
    var txtShapes = this.txtShapes.list;
    // 遍历txtShapes
    for (var i = 0; i < txtShapes.length; i++) {
        var txtShape = txtShapes[i];
        // 销毁
        txtShape.destroy();
    }
    // 重置数组
    this.txtShapes.list = [];
};