echarts基礎封裝

function getToken() {
    let regex = /^csrftoken=([^;.]*).*$/;
    let cookies = document.cookie.split('; ')
    let cookiesFilters = cookies.filter(v => {
      if(v.match(regex)) {
        return v
      }
    })
    return cookiesFilters[0].split('=')[1]
}
/**
 *
 * @param {string} echarData.element - 生成echarts圖表的標籤ID
 * @param {string} echarData.title - echarts的標題
 * @param {list} echarData.dataX - echarts的X軸數據
 * @param {list} echarData.dataY - echarts的Y軸數據
 */
function echartFun(echarData) {
    let myChart = echarts.init(document.getElementById(echarData.element))
    let option = {}
    if(echarData.type == 'pie') {
        let legendData = []
        echarData.data.forEach(val => {
            legendData.push(val.name)
        });
        option = {
            title: {//標題屬性
                text: echarData.title, //標題內容
                x: 'center', //標題X軸定位 可用參數 center | left | right | 數字
                y: 0 //標題Y軸定位 可用參數 center | left | right | 數字
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip: {//鼠標懸浮層內容
                trigger: 'item', // 懸浮層類型
                formatter: '{a}<br/>{b} : {c} ({d}%)' //自定義懸浮層內容 a：series中的name值 b：對應data的name值 c：對應data的value值 d：對應value值的百分比佔比
            },
            legend: {//圖例
                orient: 'vertical',
                x: 'left', //圖例相對X軸定位center | left | right | 數字
                y: 0, //圖例相對Y軸定位 可用參數 center | left | right | 數字
                data: legendData //圖例數據  爲data的每一項name值組成的列表
            },
            series: [
                {
                    name: '容量：',
                    type: 'pie', //圖形類型
                    radius: ['25%', '75'], //餅圖大小 0 - 100
                    center: ['50%', '60%'], //餅圖對應整個標籤的位置 [X, Y]
                    label: { //餅圖圖形上的文本標籤
                            normal: {
                                show: true, //是否顯示文本標籤
                                formatter: '{c}', // 文本標籤的內容
                            },
                        },
                    data: echarData.data, // 餅圖的具體數據
                }
            ]
        };
    } else {
        let series = []
        // 定義圖形的顯示格式
        if(echarData.dataY[0].constructor == Array) {
            echarData.dataY.map((v, i) => {
                series[i] = {}
                series[i].data = v
                series[i].type = echarData.type
            })
        } else {
            series[0] = {}
            series[0].data = echarData.dataY
            series[0].type = echarData.type
        }
        option = {
            title: {
                text: echarData.title,
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x: 'center',
                y: 'bottom',
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '8%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: echarData.dataX,
                // axisLabel: {
                    // interval: 0,// 強制顯示全部x值不寫會自動隱藏
                    // rotate: 50,  //傾斜50度
                    // fontSize: 11 //字體大小
                // }
            },
            yAxis: {
                type: 'value',
            },
            series: series
        };
    }
    myChart.setOption(option);
};

function exportCSV({tableLable = [], tableData = [], fileUrl = '未命名'}){
    fileUrl += '.csv'
    let addobj = {}
    // 2.1獲取表頭內容 以rowData形式從新賦值
    try {
        tableLable.map((v, i) => {
            addobj['rowData' + i] = v
        })
    } catch (error) {
        this.$message.error('請填寫tableLable表頭屬性')
        return
    }
    // 2.2用JSON轉義清理對象的內存地址關聯  來獲取表格數據
    let tableData2 = JSON.parse(JSON.stringify(tableData))
    // 2.3把表頭添加到表格數據的最前面充當表頭
    tableData2.unshift(addobj)
    // 2.4列標題，逗號隔開，每個逗號就是隔開一個單元格
    let str = ``;
    // 2.5增長\t爲了避免讓表格顯示科學計數法或者其餘格式
    for(let i = 0; i < tableData2.length; i++) {
        for(let item in tableData2[i]) {
            // 2.5.1 注意要將自己就有換行或者英文逗號的內容進行變換 不然表格內容會錯亂
            tableData2[i][item] = tableData2[i][item].replace(/\n/g, ' ')
            tableData2[i][item] = tableData2[i][item].replace(/,/g, '，') // 英文替換爲中文
            str += `${tableData2[i][item] + '\t'},`;
        }
        str += '\n';
    }
    // 2.6encodeURIComponent解決中文亂碼
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    // 2.7經過建立a標籤實現
    let link = document.createElement('a');
    link.href = uri;
    // 2.8對下載的文件命名
    link.download = fileUrl;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
複製代碼