platform-bi-web/src/components/chart/resolveChartOption.js

export default (config, silent) => {
    const { viewType, option } = config;
    let o;
    switch(viewType) {
        case 'bar': {
            o = barConfig(option, silent);
            break;
        }
        case 'pie': {
            o = pieConfig(option, silent);
            break;
        }
        case 'line': {
            o = lineConfig(option, silent);
            break;
        }
        case 'scatter': {
            o = scatterConfig(option, silent);
            break;
        }
        case 'aggregateTable': {
            o = tableConfig(option, silent);
            break;
        }case 'dataView' : {
            o = tableConfig(option, silent);
            break;
        }
        default:{
            o = {};
            break;
        }
    }
    return o;
}

function barConfig(option, silent) {
    const { xAxis, serieses, xTitle, yTitle } = option;

    let o = {
        animation: !silent,
        tooltip : {
            show: !silent,
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    backgroundColor: "#6a7985"
                }
            }
        },
        legend: {
            show: !silent
        },
        grid: {
            left: silent ? 0 : '10%',
            right: silent ? 0 : '10%',
            top: silent ? 0 : 60,
            bottom: silent ? 0 : 60,
            containLabel: !silent
        },
        xAxis: [{
            show: !silent,
            type: 'category',
            data: xAxis,
            name: xTitle || '横轴',
        }],
        yAxis: [{
            show: !silent,
            name: yTitle || '纵轴',
            type: 'value'
        }],
        series: serieses.map(s => {
            return {
                name: s.name,
                type: 'bar',
                data: s.value,
                showSymbol: !silent,
                silent,
            }
        }) 
    }
    return o;
}

function pieConfig(option, silent) {

    const { xAxis, columnName, serieses } = option;

    let o = {
        animation: !silent,
        grid: {
            left: silent ? 0 : '10%',
            right: silent ? 0 : '10%',
            top: silent ? 0 : 60,
            bottom: silent ? 0 : 60,
            containLabel: !silent
        },
        tooltip : {
            show: !silent,
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: !silent,
            data: xAxis
        },
        series : [
            {
                name: columnName,
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data: serieses[0].value,
                label: { show: !silent },
                labelLine: { show: !silent },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                silent
            }
        ]
    };
    return o;
}

function lineConfig(option, silent) {
    const { serieses, xTitle, yTitle } = option;

    let o = {
        animation: !silent,
        grid: {
            left: silent ? 0 : '10%',
            right: silent ? 0 : '10%',
            top: silent ? 0 : 60,
            bottom: silent ? 0 : 60,
            containLabel: !silent
        },
        tooltip: {
            show: !silent,
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            show: !silent
        },
        xAxis:  {
            show: !silent,
            name: xTitle,
            type: 'time'
        },
        yAxis: {
            show: !silent,
            name: yTitle,
            type: 'value'
        },
        
        series: serieses.map(s => {
            return {
                name: s.name,
                type: 'line',
                data: s.mdata.map(m => {
                    return [m.date, m.value]
                }),
                showSymbol: !silent,
                silent
            }
        })
    };

    return o;
}

function scatterConfig(option, silent) {
    const { serieses, xTitle, yTitle } = option;
    let o = {
        animation: !silent,
        grid: {
            left: silent ? 10 : '10%',
            right: silent ? 10 : '10%',
            top: silent ? 10 : 60,
            bottom: silent ? 10 : 60,
            containLabel: !silent
        },
        tooltip : {
            show: !silent,
            showDelay : 0,
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            }
        },
        legend: {
            show: !silent
        },
        xAxis : [
            {
                show: !silent,
                type : 'value',
                name: xTitle,
                scale:true,
                splitLine: {
                    show: false
                }
            }
        ],
        yAxis : [
            {
                show: !silent,
                type : 'value',
                name: yTitle,
                scale:true,
                splitLine: {
                    show: false
                }
            }
        ],
        series : serieses.map(s => {
            return {
                name: s.name,
                type: 'scatter',
                data: s.mdata.map(m => {
                    return [m.date, m.value]
                }),
                silent
            }
        })
    };
    return o;
}

function tableConfig(option, silent) {
    const { columns, data } = option;
    let o = {
        columns,
        data: data.map((d, i) => {
            return { ...d, key: i}
        })
    };
    return o;
}