3f:null 40:["$","title",null,{"children":"table svg | zq | Observable"}] 46:T412, function gen(v,text,option){ option = Object.assign({ color:"#f00", max:10, height:"initial", width:"initial", },option); let r = Math.sqrt(v/option.max*(option.max*option.max)); let boxstyle= ` height:${option.height};width:${option.width}; padding:6px;box-sizing: border-box; border-right:1px solid #ccc;border-bottom:1px solid #ccc; text-align:center;position: relative; ` let svgstyle=`height:100%;width:100%;position:absolute;left:0;top:0;` return html`

${text}

` }47:T62b,new Vue({ el:html`

数据列表

`, data:function(){ return { max:10, color:c1, list:[ {value:1+Math.floor(Math.random()*10)}, {value:1+Math.floor(Math.random()*10)}, {value:1+Math.floor(Math.random()*10)}, {value:1+Math.floor(Math.random()*10)}, {value:1+Math.floor(Math.random()*10)}, {value:1+Math.floor(Math.random()*10)} ] } }, methods:{ viewValue(v){ return Math.sqrt(v/this.max*(this.max*this.max)); } } }).$el48:[] 44:{"id":"8baaef357e7436ae","slug":"table-svg","title":"table svg","thumbnail":"9c75d994e0e618c109e3865a5b346f91a273807dbabfb6b1bfa370f0a440787f","access_level":"public","create_time":"$D2020-12-25T05:36:28.074Z","update_time":"$D2022-03-24T07:30:05.321Z","view_time":null,"first_public_time":"$D2020-12-25T05:52:57.532Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":391,"publish_version":391,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"table svg","cells":[{"id":0,"value":"md`# table svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`\nflex 布局示例\n

\n toolbar\n

flex:1

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`\nto 花花\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"html`\n

横向

\n ${(new Array(23)).fill().map((_,i)=>gen(1+Math.floor(Math.random()*10),i+1,{max:10,color:c1,width:\"10%\"}))}\n

纵向

\n ${(new Array(23)).fill().map((_,i)=>gen(1+Math.floor(Math.random()*10),i+1,{max:10,color:c1,height:\"100px\"}))}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof c1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`\n\n### js 代码\n~~~js\n// 容器\nvar box = $(\"#box\").empty()\n\n// 模拟输入5个\n[8,1,4,6,2].forEach(function(v,i){\n box.append(gen(v,{color:\"#f00\",max:10,height:\"33%\"}));\n})\n~~~\n### html 代码\n#### 纵向布局\n~~~html\n

\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`## 结合VUE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"{\n let box = html`

`;\n box.style.background=Random.color();\n setInterval(function(){\n box.style.background=Random.color();\n },1000)\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`### 非必要资源`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"Mock = require(\"https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"Random = Mock.Random","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"Vue = require(\"vue\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"