echarts 自動生成配置

使用場景

echarts 圖形y軸一般情況下只有一條，但是X軸可能有n（0、1、2…）條,如果需要大量重複的圖形，但是隻是X軸的條數不一樣的
通過傳遞的二維陣列判斷X軸的條數，生成相應的配置，而不用為X軸的不同而寫echarts的不同的option，前提是專案中需要大量
echats圖的基礎。由於專案中只是用了折線圖、堆疊柱狀圖，堆疊面積圖，所以我只實現了這幾個圖形的自動生成，如果需要別的自己
寫根據已有的寫一下，很簡單，就是生成一個json陣列就可以。

code implement

/*** 自動生成echarts的option，主要是針對Y軸的生成做了，優化，
 * 根據Y軸的資料，自動生成Y軸的配置陣列，每個形狀的圖形，做了一個
 * 目前支援，堆疊柱狀圖,折線圖，堆疊面積圖
 */
/**
 * @author zgli
 * 堆疊柱狀圖
 *@param divDom：圖表元素的位置，DOM DIV元素
 *@param colorArr：圖例的顏色
*/
/**
 *
 * @param divDom  圖表元素的位置，DOM DIV元素
 * @param titleArray  圖表元素的名稱陣列，按照圖元素顯示的順序
 * @param colorArr 圖表元素的顏色陣列，按照圖元素顯示的順序
 * @param yAxisName  該圖表Y軸的名稱，在圖表的左上角顯示
 * @param valueArray  這是一個數組（二維），第一個元素是X軸，其他的是Y軸
 *  最後一個元素是差異線條，其他的資料元素是柱狀圖的柱。
 */
function echartsStackedColumn(divDom, titleArray,colorArr,yAxisName,valueArray){
    /* 生成y軸的 serial 陣列*/
    var ySeries = [] ;
    /* y軸資料的，柱狀資料 */
    for(var i = 0; i < titleArray.length -1; i++){
        var temp = {"name":titleArray[i]
            ,"type":"bar"
            ,"label":{ "show": true, "position": "inside"}
            ,"data": valueArray[i + 1]
        }
        ySeries.push(temp);
    }
    /* 生成差異分析的線條, 陣列最後一個元素 */
    var diffLine = {
        "name" :'差異',
        "type" :'line',
        
        "label" : { "normal": { "show": true, "position": 'top' } },
        "itemStyle" : { "normal" : { "lineStyle":{ "color":'#ff0000' } } },
        "data":valueArray[valueArray.length - 1]
    }
    ySeries.push(diffLine);
    /* y軸配置，結束  */
    /* 初始化 echarts 的  dom */
    var Dom = divDom;
    var myChart = echarts.init(Dom);

    /* echarts option */
    var app = {};
    option = null;
    app.title = '堆疊柱狀圖';

    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
            }
        },
        legend: {
            data: titleArray
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color:colorArr,//通過形參傳入圖例的顏色
        xAxis : [
            {
                type : 'category',
                data : valueArray[0]
//            	data :['2018','2019','2020','2021','2022']
            }
        ],
        yAxis : [
            {
                type: 'value',
                //name: '經營現金流入',
                name: yAxisName,//通過形參傳入該值
            },
            {
                type: 'value',
                name: '',
            }
        ],
        series : ySeries
        ,dataZoom: [{}],//初始化滾動條
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    console.log("差異分析Echarts圖表初始化完成："+yAxisName);
};
///* 堆疊狀圖結束 */

/**
 * 堆疊面積圖
 * @author zgli
 * @param divDom  圖表元素的位置，DOM DIV元素
 * @param titleArray  圖表元素的名稱陣列，按照圖元素顯示的順序
 * @param colorArr 圖表元素的顏色陣列，按照圖元素顯示的順序
 * @param yAxisName  該圖表Y軸的名稱，在圖表的左上角顯示
 * @param valueArray  這是一個數組（二維），第一個元素是X軸，其他的是Y軸
 *  最後一個元素是差異線條，其他的資料元素是面積圖的面積。
 */
function echartsStackedArea(divDom, titleArray,colorArr,yAxisName,valueArray){
    /* 生成y軸的 serial 陣列*/
    var ySeries = [] ;
    /* y軸資料的，柱狀資料 */
    for(var i = 0; i < titleArray.length - 1; i++){
        var temp =  {
            "name" : titleArray[i],
            "type" :'line',
           
            "areaStyle" : {"normal": {}},
            "data" : valueArray[i + 1]
        };
        ySeries.push(temp);
    }
    /* 生成差異分析的線條, 陣列最後一個元素 */
   var finalLine = {
        "name" :'淨利潤',
        "type" :'line',
        
        "label" : { "normal" : { "show" : true, "position" : 'top' } },
        "areaStyle": { "normal": {}},
        "data" : valueArray[valueArray.length - 1]
    };
   ySeries.push(finalLine);
   /* 初始化 y 軸 完成  */

    var myCharscost = echarts.init(divDom);
    option = {
        title: {
            text: yAxisName,
            x:'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            // data:['付現成本','折舊攤銷','利息費用','所得稅','淨利潤']
            data: titleArray,
            x:'center',
            padding:40,
            itemGap: 5,//圖例間距
            //y:'bottom'
        },
        color: colorArr,
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                //data : ['2019','2020','2021','2022','2023','2024','2025']
                data :  valueArray[0]
            }
        ],
        yAxis : [
            {
                type : 'value',
                // name: '成本構成表',
                //name: yAxisName,
            }
        ],
        series : ySeries,
        dataZoom: [{}],
    };
    myCharscost.setOption(option);
};
///*成本構成表結束*/

/**
 * 折線圖
 * @author zgli
 * @param divDom  圖表元素的位置，DOM DIV元素
 * @param titleArray  圖表元素的名稱陣列，按照圖元素顯示的順序
 * @param colorArr 圖表元素的顏色陣列，按照圖元素顯示的順序
 * @param yAxisName  該圖表Y軸的名稱，在圖表的左上角顯示
 * @param valueArray  這是一個數組（二維），第一個元素是X軸，其他的是Y軸
 *  最後一個元素是差異線條，其他的資料元素是面積圖的面積。
 */
function echartsLine(divDom, titleArray,colorArr,yAxisName,valueArray){
    /* 生成y軸的 serial 陣列*/
    var ySeries = [] ;
    /* y軸資料的，柱狀資料 */
    for(var i = 0; i < titleArray.length; i++){
        var temp = {
            "name" :  titleArray[i],
            "type" : 'line',
            "data" : valueArray[i + 1]
        };
        ySeries.push(temp);
    }; /* 初始化 y 軸 完成  */
        var myCharloan = echarts.init(divDom);
        option = {
            title: {
                text: yAxisName,
                x:'center'
            },
            // color: ['#D53A35', '#E98F6F', '#6AB0B8', '#334B5C'],
            color: colorArr,
            // title: {
            //    text:
            // },
            tooltip: {
                trigger: 'axis',
                //formatter: "{b} <br> 合格率: {c}%"
            },
            legend: {
                data: titleArray,
                x:'center',
                padding:40
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                name: '日期',
                boundaryGap: false,
                data: valueArray[0]
                //data: ['5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7']
            },
            yAxis: {
                type: 'value',
                //name: yAxisName,
            },
            series: ySeries,
            dataZoom: [{}]
        };
        myCharloan.setOption(option);
};
//結束