行列互转 D:\ireport365\ireport365.war\js\enduser\designer\vs-component-widget-grid.js 本文件 1 在设置配置面板 写以下代码 ~~~ p.groups.push({ name: "", title: { text: "行列置换" }, elements: [{ title: "开启-关闭", type: "switch", bind: "col_row", on: vsLang.on, off: vsLang.off }] }); ~~~ 监听col-row ~~~ t.$watch("component.config.col_row", function (w, u) { // console.log(w) // console.log(u) var p = o.config.chartConfig; if (w != null && w) { // console.log(p.data) // 加旋转的css $('.test_table').attr('class','test_table vertical').find('th, td').wrapInner('<div>'); p.col_row = 'test_table vertical' console.log(p.col_row) //$('table').addClass('vertical');//数字会变垂直，不能用 // 刷新下组件 o.context.chart.setOption(p) }else{ // 去掉css $('.test_table').attr('class','test_table'); p.col_row = 'test_table' // 刷新下组件 console.log(p.col_row) o.context.chart.setOption(p) } }); ~~~ 在D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js 和D:\ireport365\ireport365.war\js\enduser\designer\vs-component-widget-grid.js 这两个文件里分别添加 在这里添加html 前后都要加 把原来的htm 包裹着 末尾别忘记 判断里都要加  `o.push("<div class='test_table' style='height:100%;width:100%;overflow:hidden;'>");` 末尾的 `o.push("</div>")` 添加样式 风别在designer.css 和 design.css 里添加 ~~~ /* 转置 */ .vertical{ -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; } .vertical th, .vertical td{ /* width: 100px; */ /* height: 14px; */ } .vertical td div{ /* width: 100px; */ -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; text-align:center; margin-top: 20px } .vertical tr div{ /* width: 100px; */ -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; text-align:center; margin-top: 20px } .vertical #header{ width:20% !important; height: 100%!important; } .vertical #body{ width:80% !important; height: 100%!important; } .vertical .gbody{ height: 100%!important; } /* end */ ~~~