仪表盘ECharts Gallery

20:11:45图表已生成
代码
var data1 = [{
    "q": [{
        "y": "西二旗",
        "x": "13号线",
        "id": "1",
        "z": "3.87",
        "t": "201601",
        "time": "6-8时",
        "r": "第1行"
    }, {
        "y": "西二旗",
        "x": "13号线",
        "id": "2",
        "z": "30.20",
        "t": "201601",
        "time": "12-14时",
        "r": "第1行"
    }, {
        "y": "西二旗",
        "x": "13号线",
        "id": "3",
        "z": "30.61",
        "t": "201601",
        "time": "18-20时",
        "r": "第1行"
    }, {
        "y": "西二旗",
        "x": "13号线",
        "id": "4",
        "z": "6.46",
        "t": "201601",
        "time": "6-8时",
        "r": "第2行"
    }, {
        "y": "西二旗",
        "x": "13号线",
        "id": "5",
        "z": "56.19",
        "t": "201601",
        "time": "12-14时",
        "r": "第2行"
    }, {
        "y": "西二旗",
        "x": "13号线",
        "id": "6",
        "z": "57.24",
        "t": "201601",
        "time": "18-20时",
        "r": "第2行"
    }]
}, {
    "q": [{
        "y": "天通苑",
        "x": "5号线",
        "id": "13",
        "z": "0.93",
        "t": "201601",
        "time": "6-8时",
        "r": "第1行"
    }, {
        "y": "天通苑",
        "x": "5号线",
        "id": "14",
        "z": "5.66",
        "t": "201601",
        "time": "12-14时",
        "r": "第1行"
    }, {
        "y": "天通苑",
        "x": "5号线",
        "id": "15",
        "z": "7.19",
        "t": "201601",
        "time": "18-20时",
        "r": "第1行"
    }, {
        "y": "天通苑",
        "x": "5号线",
        "id": "16",
        "z": "1.53",
        "t": "201601",
        "time": "6-8时",
        "r": "第2行"
    }, {
        "y": "天通苑",
        "x": "5号线",
        "id": "17",
        "z": "11.41",
        "t": "201601",
        "time": "12-14时",
        "r": "第2行"
    }, {
        "y": "天通苑",
        "x": "5号线",
        "id": "18",
        "z": "13.71",
        "t": "201601",
        "time": "18-20时",
        "r": "第2行"
    }]
}];
obj = createGaugeOption(data1, "q", ["x", "y"], "z", ["r", "time"]);
option = {
    title: {
        text: '长宽比必须是2比1\n另外legend处echars还是有bug'
    },
    legend: obj.legend,
    series: obj.series
};

function createGaugeOption(datas, colName, legColName, dataColName, categoryColName) {
    console.log(JSON.stringify(datas))
    var colors = ['#3374b4', '#f23b67', '#04a0ea', '#aad529', '#f0b503', '#12b5b2'];
    var obj = {};
    var series = new Array();
    var legs = new Array();
    var rows = new Array();
    var cols = new Array();
    for (var n = 0; n < datas.length; n++) {
        var data = datas[n];
        var d = eval("data." + colName);
        for (var i = 0; i < d.length; i++) {
            var rowname = ArrToStr(d[i], categoryColName[0]);
            var colname = ArrToStr(d[i], categoryColName[1]);
            if ($.inArray(rowname, rows) < 0) {
                rows.push(rowname);
            }
            if ($.inArray(colname, cols) < 0) {
                cols.push(colname);
            }
        }
    }
    rows = rows.sort(fncSort);
    cols = cols.sort(fncSort);
    for (var n = 0; n < datas.length; n++) {
        var data = datas[n];
        var d = eval("data." + colName);
        if (d.length > 0) {
            var lstr = "";
            lstr = ArrToStr(d[0], legColName);
            legs.push({
                name: lstr,
                textStyle: {
                    color: colors[n]
                }
            });
        }
        for (var i = 0; i < d.length; i++) {
            var rowname = ArrToStr(d[i], categoryColName[0]);
            var colname = ArrToStr(d[i], categoryColName[1]);
            var x = ($.inArray(colname, cols) + 1) / (cols.length + 1);
            var y = ($.inArray(rowname, rows) + 1) / (rows.length + 1);
            var size = 0;
            size = 1 / rows.length - 0.05 - 0.15 * n;
            var offset = [];
            if (($.inArray(rowname, rows) * cols.length + $.inArray(colname, cols)) % 2 == 0) {
                offset = [0, titleOffset(0.15, y, size) + '%'];
            } else {
                // offset=[titleOffset(0.15,x,size),0];
                offset = [titleOffset(0.15, x, size) * 2 + '%', -10];

            }

            var o = {
                name: lstr,
                type: 'gauge',
                z: 100 - n,
                min: 0,
                max: 100,
                splitNumber: 10,
                center: [x * 100 + '%', y * 100 + '%'],
                startAngle: 180,
                endAngle: 0,
                radius: size * 100 + '%',
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 8,
                        color: [
                            [100, colors[n]]
                        ]
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 5, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 15, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 4
                },
                title: {
                    show: (n == 0) ? true : false,
                    offsetCenter: offset,
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail: {
                    show: false
                },
                data: [{
                    value: eval("d[i]." + dataColName),
                    name: (($.inArray(rowname, rows) * cols.length + $.inArray(colname, cols)) % 2 == 0) ? colname : rowname
                }]
            }
            series.push(o);
        }
    }

    obj.series = series;
    obj.legend = {
        selectedMode: false,
        data: legs
    };
    return obj;
}

function ReservedDecimal(data, digit) {
    var num = data + "";
    if (num.indexOf(".") < 0) {
        return num;
    }
    return num.substring(0, num.indexOf(".") + digit + 1);
}

function ArrToStr(data, arr) {
    var str = "";
    if (isArray(arr)) {
        for (var i = 0; i < arr.length; i++) {
            if (i != 0) {
                str += ",";
            }
            str += eval("data." + arr[i]);
        }
    } else {
        str = eval("data." + arr);
    }

    return str;
}

function fncSort(a, b) {
    var x = parseInt(a);
    var y = parseInt(b);
    if (x != y) {
        return x - y;
    } else {
        return a - b;
    }
}

function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
}

function titleOffset(final, center, size) {
    return ((final - center * 2) / size) * 100
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
