画一个流程图echarts title配置项内容和展示

一个展示各子系统之间数据流向的图

      //浏览器resize重画
function resizeChart() {
    var w = $('body').width();
    var h = $('body').height();
    myChart.resize({
        width: w,
        height: h
    });
    option.series = getSeries();
    myChart.setOption(option, true);
}

var data = [{
    name: '节点1',
    code: 'node1',
    value: {
        interfaceNum: 0,
        kpiNum: 0,
        alarmNum: 0
    },
    x: 0.1,
    y: 0.65
}, {
    name: '节点2',
    code: 'node2',
    value: {
        interfaceNum: 0,
        kpiNum: 0,
        alarmNum: 0
    },
    x: 0.3,
    y: 0.8
}, {
    name: '节点3',
    code: 'node3',
    value: {
        interfaceNum: 0,
        kpiNum: 0,
        alarmNum: 0
    },
    x: 0.3,
    y: 0.5
}, {
    name: '节点4',
    code: 'node4',
    value: {
        interfaceNum: 0,
        kpiNum: 0,
        alarmNum: 0
    },
    x: 0.5,
    y: 0.5
}];

var links = [{
    source: 'node1',
    target: 'node2',
}, {
    source: 'node1',
    target: 'node3',
}, {
    source: 'node3',
    target: 'node4',
}];

var line = 3; //行：把画布上画几行信息框
var column = 4; //列：把画布上画几列信息框

function getScatterData() {
    var scatterData = [];

    //画布宽高
    var c_w = myChart.getWidth();
    var c_h = myChart.getHeight();
    //计算信息框的宽高
    var w = c_w / (column * 2);
    var h = c_h / (line * 2);
    for (var i = 0; i < data.length; i++) {
        //把消息框分为两部分：标题和内容,内容高度为标题高度的3倍，echart是以中心画图，所以要分别计算标题和内容框的中心点位置
        scatterData.push({
            name: data[i].name,
            value: [data[i].x, (data[i].y * c_h + (3 / 8 * h)) / c_h],
            type: 'title',
            w: w,
            h: h / 4,
            label: {
                normal: {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 15
                    }
                }
            }
        }, {
            code: data[i].code,
            value: [data[i].x, (data[i].y * c_h + (1 / 4 * h) - (3 / 4 * h) / 2) / c_h],
            type: 'body',
            w: w,
            h: 3 / 4 * h,
            info: data[i].value,
            label: {
                normal: {
                    textStyle: {
                        color: '#000'
                    }
                }
            }
        });
    }
    return scatterData;
}

function getLinesData() {
    var linesData = [];
    var map = {};
    for (var i = 0; i < data.length; i++) {
        map[data[i].code] = data[i];
    }

    for (var i = 0; i < links.length; i++) {
        var source = map[links[i].source];
        var target = map[links[i].target];

        //画布宽高
        var c_w = myChart.getWidth();
        var c_h = myChart.getHeight();
        //计算信息框的宽高
        var w = c_w / (column * 2);
        var h = c_h / (line * 2);
        //计算信息框的四个边中点的位置
        source.top = {
            x: source.x,
            y: (source.y * c_h + (1 / 2 * h)) / c_h
        };
        source.right = {
            x: (source.x * c_w + (1 / 2 * w)) / c_w,
            y: source.y
        };
        source.bottom = {
            x: source.x,
            y: (source.y * c_h - (1 / 2 * h)) / c_h
        };
        source.left = {
            x: (source.x * c_w - (1 / 2 * w)) / c_w,
            y: source.y
        };

        target.top = {
            x: target.x,
            y: (target.y * c_h + (1 / 2 * h)) / c_h
        };
        target.right = {
            x: (target.x * c_w + (1 / 2 * w)) / c_w,
            y: target.y
        };
        target.bottom = {
            x: target.x,
            y: (target.y * c_h - (1 / 2 * h)) / c_h
        };
        target.left = {
            x: (target.x * c_w - (1 / 2 * w)) / c_w,
            y: target.y
        };

        //s->t：s左：t右
        if (source.right.x < target.left.x) {
            linesData.push(getLine([
                [source.right.x, source.right.y],
                [target.left.x, target.left.y]
            ]));
        }
        //t<-s：s右：t左
        else if (source.left.x > target.right.x) {
            linesData.push(getLine([
                [source.left.x, source.left.y],
                [target.right.x, target.right.y]
            ]));
        }
        //s
        //|
        //t
        else if (source.bottom.y > target.top.y) {
            linesData.push(getLine([
                [source.bottom.x, source.bottom.y],
                [target.top.x, target.top.y]
            ]));
        }
        //t
        //|
        //s
        else if (source.top.y < target.bottom.y) {
            linesData.push(getLine([
                [source.top.x, source.top.y],
                [target.bottom.x, target.bottom.y]
            ]));
        }
    }
    return linesData;
}

function getLine(coords) {
    return {
        name: '',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        symbol: ['none', 'arrow'],
        symbolSize: 10,
        zlevel: 4,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#7480BC',
            symbolSize: 3
        },
        lineStyle: {
            normal: {
                color: '#9EADD6',
                width: 1,
                curveness: 0
            }
        },
        data: [{
            coords: coords
        }]
    };
}

function getSeries() {
    var series = [];
    series.push({
        type: 'scatter',
        symbol: 'rect',
        zlevel: 2,
        silent: true,
        symbolSize: function(value, params) {
            return [params.data.w, params.data.h];
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: function(params) {
                    if (params.data.type == 'title') {
                        return '#007CB8';
                    } else {
                        return '#6DC6F2';
                    }
                }
            }
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                formatter: function(params) {
                    if (params.data.type == 'title') {
                        return params.data.name;
                    } else {
                        return '核心接口数量：' + params.data.info.interfaceNum +
                            '\n监测指标数量：' + params.data.info.kpiNum +
                            '\n告警数量' + params.data.info.alarmNum;
                    }

                },
                textStyle: {
                    color: '#000'
                }
            }
        },
        data: getScatterData(),
    });
    return series.concat(getLinesData());
}
option = null;
option = {
    backgroundColor: '#F3F3F3',
    title: [{
        text: "流程图",
        x: '5%',
        y: 0,
        textStyle: {
            color: '#333',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14,
        }
    }],
    tooltip: {

        /*trigger: 'axis',
        axisPointer: {
            show: true,
            type: 'cross'
        }*/
    },
    grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    xAxis: {
        type: 'value',
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        max: 1,
        min: 0
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        max: 1,
        min: 0
    },
    series: getSeries()
};