css樣式 在designer.css desing.css ~~~ /* 表格圖例 */ .zuan_tag>li{ display: inline-block; cursor: pointer; } ~~~ main.html 里 加開啟組件html片段 ~~~ <div ng-switch-when="drillDownSelect"> <div class="col col-xs-5" style="line-height:30px;"> {{element.title}} </div> <div class="col col-xs-7" style2="max-height:300px; overflow-y:auto;padding-right:10px !important;"> <ui-select multiple sortable="true" close-on-select="false" ng-model="component.config[element.bind].drillDown" theme="select2" ng-disabled="disabled" style="width:100%;"> <ui-select-match placeholder="">{{$item.label}}</ui-select-match> <ui-select-choices repeat="item in component.config.datasourceConfig.metadataConfig.metadataTable.modelInfo.dimensions | filter:$select.search"> <span ng-bind-html="item.label | highlight: $select.search"></span> </ui-select-choices> </ui-select> </div> </div> ~~~ vs-component-widget-grid。js // 3357行 d.internalBuildColumnDescription(t, m, o, n, q); 下面 ~~~ var x = { name: "zuanqu", title: "數據鉆取", groups: [] }; x.groups.push({ name: "", title: { text: "數據鉆取" }, elements: [ { title: "下鉆開啟", bind: "drilling_show", type: "switch-55", on: vsLang.on, off: vsLang.off }] }); if (t.component.config.datasourceConfig == null) { t.component.config.datasourceConfig = {} } var U = function() { return t.component.config.datasourceConfig != null && t.component.config.datasourceConfig.metadataConfig != null && t.component.config.datasourceConfig.metadataConfig.metadataTable != null && t.component.config.datasourceConfig.datasourceType == "metadata" }; x.groups.push({ show: U, title: { text: "維度選擇" }, elements: [{ title: "選擇"+vsLang.dimension, type: "drillDownSelect", bind: "datasourceConfig" }] }); var ac = null; if (t.component.config.datasourceConfig.metadataConfig != null) { ac = t.component.config.datasourceConfig.metadataConfig.metadataTable.modelInfo } x.groups.push({ name: "", title: { text: "圖例" }, elements: [{ title: "開啟-關閉", type: "switch", bind: "drilling_tu", on: vsLang.on, off: vsLang.off, }, { title: "水平位置", type: "radio-icon", bind: "legendPosX", items: [{ name: "左對齊", value: "left", icon: "fa fa-align-left" },{ name: "居中", value: "center", icon: "fa fa-align-center" },{ name: "右對齊", value: "right", icon: "fa fa-align-right" }] },{ title: vsLang.font_color, type: "colorpicker", bind: "drilling_color" }] }); console.log(x) // 監聽數據鉆取開啟與關閉 t.$watch("component.config.drilling_show", function (v, u) { var p = o.config.chartConfig; if (v != null && (u == null || u !== v)) { // console.log(v) o.config.drilling_show = v; console.log(o.config.drilling_show) } }); // 轉取方式 t.$watch("component.config.drillingType", function (v, u) { var p = o.config.chartConfig; if (v != null && (u == null || u !== v)) { console.log(v) console.log(u) } }); // 顯示或隱藏 t.$watch("component.config.drilling_tu", function (v, u) { if (v != null && (u == null || u !== v)) { var p = o.config.chartConfig; console.log(v) if(v == true){ p.drillingShow = 'block' console.log(p) o.context.chart.setOption(p) }else if(v == false){ p.drillingShow = 'none' console.log(p) o.context.chart.setOption(p) } } }); // 新增加 // end // 字體顏色 t.$watch("component.config.drilling_color", function (w, u) { if (w != null && g.isValidColor(w)) { var v = o.config.chartConfig; v.drilling_color = w; o.context.chart.setOption(v) } }); // 垂直方向 // t.$watch('component.config.legendPosY', function(w, u){ // if(w != null && (u == null || w !== u)){ // var v = o.config.chartConfig; // v.legendPosY = w; // console.log(v.legendPosY) // o.context.chart.setOption(v) // } // }); //水平方向 t.$watch('component.config.legendPosX', function(w, u){ if(w != null && (u == null || w !== u)){ var v = o.config.chartConfig; v.drilling_x = w; console.log(v.drilling_x) o.context.chart.setOption(v) } }); o.description.categories.push(x); // end ~~~   # 分別添加 在design.js也就是分享頁 也要添加這兩行代碼 `o.push("<div class='zuan_tag' style='width:100%;right:0;height:40px;line-height:40px;' ng-style=\"{'display':component.config.drilling_tu?'block':'none' ,'color':component.config.drilling_color ,'text-align':component.config.legendPosX }\" ><li ng-repeat='item in component.config.datasourceConfig.drillDown'>{{ item.label }}>></li></div>");`  # 添加這行代碼 `s.config.drillDown = true;` # 在點擊事件里添加   搜索component.config.chartConfig.onRowSelected = function(d, i, orgIndex) { 可以找到代碼位置 具體添加代碼如下： ~~~ // 判斷下鉆 if(i==orgIndex && component.config.drilling_show === true){ isACtive = true; // console.log(index) var d = component.config.datasourceConfig.dimensions; if(index <=number.length ){ alert("111") index++; number[index] = d[0]; // component.config.datasourceConfig.drillDown = component.config.datasourceConfig.dimensions; // component.config.datasourceConfig.drillDown[index] = component.config.datasourceConfig.dimensions[index]; newDimensions.push(component.config.datasourceConfig.drillDown[index]); console.log(component.config.datasourceConfig.drillDown[index+1]) } // number.push(d[0]) // console.log(number) console.log(component.config.datasourceConfig.drillDown) function test(){ var dimensions = component.config.datasourceConfig.drillDown; var measures = component.config.datasourceConfig.measures; if (dimensions && dimensions.length > 0) { scope.component.config.showDimensionBar = true; console.log(dimensions) scope.queryModelData({ eventParam: {}, dimensions: dimensions, measures: measures, tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key, number:{ data:number, paramKeys:component.config.datasourceConfig.drillDown, newDimensions:newDimensions }, onQuerySuccess: function(response) { if (response.data.success) { console.log(response.data) refreshChartView(); // console.log('kanaknkankan') console.log(component.config.chartConfig.data) } else { console.log(response.data.message) } }, onError: function() {} }) } } scope.$on(event_refreshBindingData,test() ) } ~~~ 搜索代碼上面添加這個 ~~~ var dril = (component.config.datasourceConfig.drillDown.length); var number = new Array(dril) for(var i = 0;i < dril;i++){ number[i]=''; } var newDimensions = []; // console.log(number) var index = -1; ~~~ # engine.js 查看最終參數變化的位置  查看具體代碼變化的主要字段 數組的順序索引要保持一致 不然沒有數據