要求繪制下圖系列表格：

實(shí)現(xiàn)步驟:
1.繪制樹，實(shí)現(xiàn)樹勾選字段—>表格繪制字段
邏輯： 樹：@check-change=“treeChart.handleCheckChange” 綁定點(diǎn)擊選擇事件，改變data.column3數(shù)據(jù)項(xiàng)；表格:columns="data.column3"綁定相對(duì)應(yīng)的data.column3實(shí)現(xiàn)表格列自定義；
2.繪制表格，表格中使用插槽去定義繪制曲線圖< template >
邏輯:表格定義插槽，插槽中繪制一個(gè)div,div中的id 與繪制表格的自定義字段勾連起來，根據(jù)Id給對(duì)應(yīng)的div繪制曲線圖

1.繪制樹的部分結(jié)構(gòu)代碼

  <el-tree :data="treeChart.treedata"
   	show-checkbox node-key="prop"
   	@check-change="treeChart.handleCheckChange" 
   	:default-checked-keys="treeChart.TagNode"
  />

對(duì)應(yīng)的setup內(nèi)代碼

表的代碼塊

<el-table 
 :columns="data.column3" 
 :data="treeChart.ListChartTable || []" 
 :border="true"
 :resizable="true"
 highlight-currrent-row 
 :show-overflow-tooltip="true">
	<el-table-column 
		v-for=" (  item, index  ) in   data.column3  " 
		:key="index" 
		:prop="item.prop"
	    :width="item.width" 
	    :fixed="item.fixed" 
	    :sortable="item.sortable" 
	    :label="item.label"
	    :align="item.align" 
	    :formatter="item.formatter" 
	    :show-overflow-tooltip="true">
     	<template v-slot="scope">
            <div :ref="'chartContainer-' + '-' + item.prop + scope.$index"
                 :id="'chart-' + item.prop + '-' + scope.$index" 
                  style="width: 120px; height: 50px;"
            ></div>
     	</template>
    </el-table-column>
</el-table>

勾選樹和表格相連的邏輯處理

 //復(fù)選框是否勾選
            handleCheckChange: async (treedata, checked, indeterminate) => {
                data.column3 = []; //存儲(chǔ)自定義字段的數(shù)組
                if (checked) {
                    if (!treedata.children) {
                        treeChart.TagNode.push(treedata);
                    }
                } else {
                    treeChart.TagNode.forEach(function (item, index, arr) {
                        if (item == treedata) {
                            arr.splice(index, 1);
                        }
                    });
                }
                treeChart.TagNode.forEach((k, v) => {
                    data.column3.push({
                        label: k.label,
                        prop: k.prop,
                        visible: true,
                        align: "center",
                        width: "120",
                    })
                });

                if (data.column3.length > 0) {
                    renderCharts();     //加載曲線
                }
            },

加載曲線代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-649013.html

    //加載曲線 （采用ice的取值BDB數(shù)據(jù)，參考意義不大）
       const renderCharts = async () => {
            data.column3.forEach(item => {
                var i = 0;
                data.piecenoList.forEach(async pieceno => {
                    const chartId = `chart-${item.prop}-` + i;
                    i += 1;
                    try {
                    	//調(diào)用接口獲取數(shù)據(jù)
                        var productPrx = await Chart.locate(pieceno);  
                        const mea = await productPrx.getPosMeasurementSeries(item.prop);
                        drawChart(chartId, mea);
                    } catch (e) {
                        console.log("查詢曲線失敗", e);
                        drawChart(chartId);
                    }
                })
            });
        }

       //繪制曲線
        const drawChart = async (chartId, mea) => {
            //mea自定義存儲(chǔ)數(shù)據(jù) 存在y_data和x_data 兩個(gè)數(shù)組數(shù)據(jù)
            if (mea) {
                var y_data = [];
                var x_data = [];
                for (let i = 0; i < mea.y_data.length; i++) {
                    y_data.push(isFloat(mea.y_data[i]));
                }
                for (let j = 0; j < mea.x_data.length; j++) {
                    x_data.push(isFloat(mea.x_data[j]));
                }
            } else {
            //給一個(gè)默認(rèn)曲線
                x = [0, 1, 2, 3, 4];
                y = [1, 1, 1, 1, 1];
            }
            //繪制曲線
            var chart;
            var chartElement = document.getElementById(chartId);
            if (chartElement && chartElement.getAttribute('_echarts_instance_')) {
                // 存在 ECharts 曲線，執(zhí)行 removeAttribute 操作
                chartElement.removeAttribute('_echarts_instance_');
                chart = echarts.init(document.getElementById(chartId));
            } else {
                chart = echarts.init(document.getElementById(chartId));
            }
            const option = {
                xAxis: {
                    type: 'category',
                    data: x_data,
                },
                yAxis: {
                    type: 'value',
                    max: function (value) { return value.max + 1 },
                    min: function (value) { return value.min - 1 },
                },
                series: [{
                    type: 'line',
                    data: y_data,
                }]
            };
            chart.setOption(option);
        }

到了這里，關(guān)于【elementUi】繪制自定義表格、繪制曲線表格的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！