const e="be616a00-e2bc-4849-8b28-8cdd35cd198b",a="custom-bar-chart",t="柱状图",n='',i="svg",l="动态",o="图表组件",u=!1,c=!0,s="时序",d=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"radios","label":"渲染模式","name":"renderMode","options":[{"label":"canvas","value":"canvas"},{"label":"svg","value":"svg"}],"id":"u:047a1336613a","mode":"horizontal"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"布局","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"grid.left","id":"u:1778e7d54c41","mode":"horizontal","size":"full"}],"id":"u:720608fd274b"},{"body":[{"type":"input-text","label":"右边距","name":"grid.right","id":"u:41e8804639dd","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:175b96654696","mode":"horizontal","size":"full"}]}],"id":"u:fb776ace0e8b"}],"id":"u:aea0c21b7ba2","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"grid.top","id":"u:8f1e65861eca","mode":"horizontal","size":"full"}],"id":"u:97a259e6edde"},{"body":[{"type":"input-text","label":"下边距","name":"grid.bottom","id":"u:1774c755f248","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:e1d3e5e47502","mode":"horizontal","size":"full"}]}],"id":"u:4699288ff76c"}],"id":"u:a580952c96bd","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-color","label":"背景","name":"grid.backgroundColor","id":"u:f398c821eda1","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"背景","inputClassName":"w-full"}],"id":"u:e14008b58dcb"},{"body":[{"type":"switch","label":"显示","option":"","name":"grid.show","falseValue":false,"trueValue":true,"id":"u:97eb082723ff","value":false,"mode":"horizontal"}],"id":"u:a013d4bd2004"}],"id":"u:94acb2282c6c","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"grid":{}},"wrapperBody":false}],"bodyClassName":"m-b"},{"type":"fieldset","id":"u:0685657fe4bc","className":"","title":"标题","collapsable":true,"body":[{"type":"container","id":"u:73fcc93013bb","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"文本","name":"title.text","id":"u:367bcfaf236d","editorState":"default","mode":"horizontal"}],"id":"u:bcea4c8a21d2"},{"body":[{"type":"switch","label":"显示","option":"","name":"title.show","falseValue":false,"trueValue":true,"id":"u:67b9b8292560","value":false,"mode":"horizontal"}],"id":"u:2e8f807025d3"}],"id":"u:5fafefdb95b3","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"title.left","id":"u:c0774249b76c","mode":"horizontal","size":"full"}],"id":"u:ce7604a06386"},{"body":[{"type":"input-text","label":"右边距","name":"title.right","id":"u:ba7437e94ec2","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:115359876c6b","mode":"horizontal","size":"full"}]}],"id":"u:0b1a46c451fb"}],"id":"u:d5f5d7d1f821","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"title.top","id":"u:26039411388d","mode":"horizontal","size":"full"}],"id":"u:f02a179a6a50"},{"body":[{"type":"input-text","label":"下边距","name":"title.bottom","id":"u:54a0ef638b7d","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:65d1107ed8b8","mode":"horizontal","size":"full"}]}],"id":"u:1989abb0a053"}],"id":"u:aa3c4bbe6aa5","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"data":{"title":{}}},{"type":"fieldset","id":"u:4a7ac0579e1c","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"title.textStyle.color","id":"u:570bce4701ea","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:3b84bfb2ac84"},{"body":[{"type":"input-number","label":"大小","name":"title.textStyle.fontSize","keyboard":true,"id":"u:e4036200c979","step":1,"mode":"horizontal"}],"id":"u:fa52ed3d81ae"}],"id":"u:47c4b60e2f0a"}],"id":"u:26e7e01f73a1"}],"id":"u:1f93884d7cab"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:94fc9c2c1ee3","data":{"textStyle":{}}}],"bodyClassName":""}],"bodyClassName":"m-b","headingClassName":""},{"type":"fieldset","id":"u:a0a8c50d2f9c","className":"","title":"图例","collapsable":true,"body":[{"type":"container","id":"u:5af0a6740a48","body":[{"type":"grid","columns":[{"body":[{"type":"input-text","label":"左边距","name":"legend.left","id":"u:0228dee14f3e","mode":"horizontal","size":"full","editorState":"default","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%, 或， 'left', 'center', 'right'"}}],"id":"u:ffb4d6853cbb"},{"body":[{"type":"input-text","label":"右边距","name":"legend.right","id":"u:99d884571158","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:9048b9fc654f","mode":"horizontal","size":"full"}],"editorState":"default","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%"}}],"id":"u:5b434cc50594"}],"id":"u:254dccfe46f5","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"input-text","label":"上边距","name":"legend.top","id":"u:3efa5a6f1d46","mode":"horizontal","size":"full","editorState":"default","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%, 或， 'top', 'middle', 'bottom'"}}],"id":"u:79668537c91d"},{"body":[{"type":"input-text","label":"下边距","name":"legend.bottom","id":"u:6030173b41b3","mode":"horizontal","size":"full","body":[{"type":"input-text","label":"右边距","name":"right","id":"u:c035f176036c","mode":"horizontal","size":"full"}],"editorState":"default","placeholder":"","remark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"输入：auto, 20, 20%"}}],"id":"u:e9f3fe39e864"}],"id":"u:211aaa4653cc","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"select","label":"布局","name":"legend.orient","options":[{"label":"横向布局","value":"horizontal"},{"label":"纵向布局","value":"'vertical'"}],"id":"u:a18ac2f33143","multiple":false,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:5e71ee86aec4"},{"body":[{"type":"switch","label":"显示图例","option":"","name":"legend.show","falseValue":false,"trueValue":true,"id":"u:25bc165dc563","value":false,"mode":"horizontal"}],"id":"u:90592ff9b2a3"}],"id":"u:49360f5a1bcb","className":"m-b"},{"type":"fieldset","id":"u:272913f05159","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"legend.textStyle.color","id":"u:ddd5a5134e19","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:b2df858e74f3"},{"body":[{"type":"input-number","label":"大小","name":"legend.textStyle.fontSize","keyboard":true,"id":"u:eec3185223ca","step":1,"mode":"horizontal"}],"id":"u:865c3447f663"}],"id":"u:5de46ec9b165"}],"id":"u:dfbc505ddf7a"}],"id":"u:36dd156f03e5"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:265de21133fd","data":{"textStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"data":{"legend":{}},"wrapperBody":false}],"bodyClassName":"","headingClassName":""},{"type":"fieldset","id":"u:2321d062ada5","className":"","title":"提示框","collapsable":true,"body":[{"type":"container","id":"u:3661446fb8ad","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"tooltip.show","falseValue":false,"trueValue":true,"id":"u:8df1faada29d","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:8a7218821e27"},{"body":[{"type":"input-color","label":"背景","name":"tooltip.backgroundColor","id":"u:b3a6408a8dae","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full"}],"id":"u:7b83edc11d08"}],"id":"u:eda33b0d0f98","className":"m-b"},{"type":"grid","columns":[{"body":[{"type":"select","label":"触发","name":"tooltip.trigger","options":[{"label":"数据项触发","value":"item"},{"label":"坐标轴触发","value":"axis"}],"id":"u:fd2fa797125e","multiple":false,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:da210f3ca364"},{"body":[{"type":"switch","label":"显示内容","option":"","name":"tooltip.showContent","falseValue":false,"trueValue":true,"id":"u:902a4a22cdfc","value":false,"mode":"horizontal"}],"id":"u:824cae55e184"}],"id":"u:2730c1b6116e","className":"m-b"},{"type":"grid","id":"u:5300fcaff465","columns":[{"body":[{"type":"input-color","label":"边色","name":"tooltip.borderColor","id":"u:c2f4d40b92ed","format":"rgba","mode":"horizontal","inputClassName":"w-full myColorPick"}],"id":"u:a25f8b35520a"},{"body":[{"type":"input-number","label":"边宽","name":"tooltip.borderWidth","keyboard":true,"id":"u:5e4fdc86abc5","step":1,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:1d06c49dbc3c"}],"className":"m-b"},{"type":"fieldset","id":"u:b8ee82cc2eb9","title":"字体","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"tooltip.textStyle.color","id":"u:70c1fbf4672f","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:ae2f495b3764"},{"body":[{"type":"input-number","label":"大小","name":"tooltip.textStyle.fontSize","keyboard":true,"id":"u:72ceba01a7cc","step":1,"mode":"horizontal"}],"id":"u:33cec15972d4"}],"id":"u:2526fcd05096"}],"id":"u:6922018dd6d1"}],"id":"u:7e7d67ef7752"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:6c0348f13581","data":{"textStyle":{}}}],"bodyClassName":""}],"id":"u:47aacf20a627"}],"id":"u:3749f665c04b","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"tooltip":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","id":"u:3a48dd399109","className":"","title":"x坐标轴","collapsable":true,"body":[{"type":"input-text","label":"坐标轴名称","name":"xAxis.name","id":"u:abb02410fd1c","editorState":"default","mode":"horizontal"},{"type":"input-color","label":"名称颜色","name":"xAxis.nameColor","id":"u:b900d1025127","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"container","id":"u:eefe19817538","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"xAxis.show","falseValue":false,"trueValue":true,"id":"u:2096af8308a3","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:4eef8d1cc676"}],"id":"u:ea0f62118b56","className":"m-b"},{"type":"fieldset","id":"u:907187f7e2a1","title":"x轴线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"x轴轴线显示","option":"","name":"xAxis.axisLine.show","falseValue":false,"trueValue":true,"id":"u:71b59c2bed70","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:118aba12cec1","title":"x轴轴线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisLine.lineStyle.color","id":"u:8ed5e076ca5c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:55813e1f8142"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.axisLine.lineStyle.width","keyboard":true,"id":"u:41934b04ff67","step":1,"mode":"horizontal"}],"id":"u:d7abe8fad5ca"}],"id":"u:893ab7d1ed57"}],"id":"u:227994a18fe9"}],"id":"u:6262674c1c5c"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:85847be141b3","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:92c4666bcef8","data":{"axisLine":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:75c8b571aac0","title":"x轴刻度","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"显示","option":"","name":"xAxis.axisTick.show","falseValue":false,"trueValue":true,"id":"u:fd9e421b00ca","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:0fd48ddb098a","title":"x轴刻度风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisTick.lineStyle.color","id":"u:e5fca7b0b79b","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:f9e6ec4896c4"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.axisTick.lineStyle.width","keyboard":true,"id":"u:1571934a432c","step":1,"mode":"horizontal"}],"id":"u:17179e81c729"}],"id":"u:ef9eaed28557"}],"id":"u:d9f5024d9671"}],"id":"u:1b3520d785a5"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:e7dfac0e99fd","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:19673ccefa01","data":{"axisTick":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:20a14bb0f788","title":"x轴标签","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.axisLabel.color","id":"u:caf5a900530e","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:cd95dc526524"},{"body":[{"type":"input-number","label":"大小","name":"xAxis.axisLabel.fontSize","keyboard":true,"id":"u:21b8c8b2b0ae","step":1,"mode":"horizontal"}],"id":"u:6db43f6de611"}],"id":"u:b098a9ec59df","className":"m-b-xs"},{"type":"switch","label":"显示","option":"","name":"xAxis.axisLabel.show","falseValue":false,"trueValue":true,"id":"u:1d7c622a336f","value":false,"mode":"horizontal","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:86e6b7d652a0","data":{"axisLabel":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:a1e52778791f","title":"x轴分割线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"x轴分割线显示","option":"","name":"xAxis.splitLine.show","falseValue":false,"trueValue":true,"id":"u:e95df5c45a7e","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:66c502dea7a7","title":"x轴分割线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"xAxis.splitLine.lineStyle.color","id":"u:3a618618dae0","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:f46d328a3f22"},{"body":[{"type":"input-number","label":"宽度","name":"xAxis.splitLine.lineStyle.width","keyboard":true,"id":"u:a3ee7bf1223d","step":1,"mode":"horizontal"}],"id":"u:309b42de5f47"}],"id":"u:7c58df9998ec"}],"id":"u:8dd911474f86"}],"id":"u:824a429f7da1"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:6aa6764ef192","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:3a6bddcca5ee","data":{"splitLine":{}}}],"bodyClassName":""}],"id":"u:a8e29911a8e3"}],"id":"u:78f1615eb5a3","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"xAxis":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","id":"u:f9aa35a53b3c","className":"","title":"y坐标轴","collapsable":true,"body":[{"type":"container","id":"u:180e8b28f9fa","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"switch","label":"显示","option":"","name":"yAxis.show","falseValue":false,"trueValue":true,"id":"u:c4ef30d500dc","value":false,"mode":"horizontal","className":"m-b"}],"id":"u:8eea96d4f12d"}],"id":"u:acc7e6a4e520","className":"m-b"},{"type":"fieldset","id":"u:ce9d777193df","title":"y轴线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"y轴轴线显示","option":"","name":"yAxis.axisLine.show","falseValue":false,"trueValue":true,"id":"u:634fa0ea84a5","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:6a2865630e68","title":"y轴轴线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisLine.lineStyle.color","id":"u:aea16c2c7a84","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:4a754fe50e08"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.axisLine.lineStyle.width","keyboard":true,"id":"u:290a931d904f","step":1,"mode":"horizontal"}],"id":"u:86515517aa68"}],"id":"u:5529505abbd4"}],"id":"u:219a49a719e6"}],"id":"u:ad675db55c48"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:68d3d781451b","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:1be7f231b28e","data":{"axisLine":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:3fdec5dec631","title":"y轴刻度","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"显示","option":"","name":"yAxis.axisTick.show","falseValue":false,"trueValue":true,"id":"u:58e04faa3c92","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:f18f86b00d5d","title":"y轴刻度风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisTick.lineStyle.color","id":"u:be3f5eee553c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:7bcc36e22821"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.axisTick.lineStyle.width","keyboard":true,"id":"u:e04f3f6f2cc3","step":1,"mode":"horizontal"}],"id":"u:4ba5d2e1ea07"}],"id":"u:6440d669f360"}],"id":"u:ad68ce859a7c"}],"id":"u:4a7d06fdb2b4"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:b25293793d7f","data":{"lineStyle":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:93bd4fed48ff","title":"y轴标签","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.axisLabel.color","id":"u:7fa26ddc1ab5","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:fd3336725b84"},{"body":[{"type":"input-number","label":"大小","name":"yAxis.axisLabel.fontSize","keyboard":true,"id":"u:65037a8397ee","step":1,"mode":"horizontal"}],"id":"u:d5b399f13ea4"}],"id":"u:95ad7678203e","className":"m-b-xs"},{"type":"switch","label":"显示","option":"","name":"yAxis.axisLabel.show","falseValue":false,"trueValue":true,"id":"u:7cb8264230b1","value":false,"mode":"horizontal","className":"m-b"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:95667fb0c244","data":{"axisLabel":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:c845c3a67039","data":{"axisTick":{}}}],"bodyClassName":""},{"type":"fieldset","id":"u:0a1a84201903","title":"y轴分割线","collapsable":true,"body":[{"type":"container","body":[{"type":"switch","label":"y轴分割线显示","option":"","name":"yAxis.splitLine.show","falseValue":false,"trueValue":true,"id":"u:caa3b966e95b","value":false,"mode":"horizontal","className":"m-b"},{"type":"fieldset","id":"u:97085338bd02","title":"y轴分割线风格","collapsable":true,"body":[{"type":"container","body":[{"type":"grid","columns":[{"body":[{"type":"grid","columns":[{"body":[{"type":"input-color","label":"颜色","name":"yAxis.splitLine.lineStyle.color","id":"u:729dbec8be7c","mode":"horizontal","size":"full","className":"m-b","format":"rgba","placeholder":"请选择","inputClassName":"w-full myColorPick"}],"id":"u:18f6ccdafb5f"},{"body":[{"type":"input-number","label":"宽度","name":"yAxis.splitLine.lineStyle.width","keyboard":true,"id":"u:8c714596c1b2","step":1,"mode":"horizontal"}],"id":"u:d0cd18f6138e"}],"id":"u:d0902c0487aa"}],"id":"u:2bed8554fd13"}],"id":"u:5356527017b0"}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:b4e230155075","data":{"lineStyle":{}}}],"bodyClassName":""}],"style":{"position":"static","display":"block"},"wrapperBody":false,"id":"u:e2ba52918887","data":{"splitLine":{}}}],"bodyClassName":""}],"id":"u:a9fe7db6d069"}],"id":"u:40507e55fde2","className":"m-b"}],"style":{"position":"static","display":"block"},"data":{"yAxis":{}},"wrapperBody":false}],"bodyClassName":""},{"type":"fieldset","title":"代码配置","collapsable":true,"body":[{"type":"editor","label":"function (option, datas, instance) {","name":"codeConfig","id":"u:689625dc5d7d","language":"javascript","value":"return option","labelClassName":"text-left","inputClassName":"text-left","className":"m-b-xs"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:f533d43d9ee4","className":"m-t-xs p-t-xs"}],"id":"u:cf0267c9669d","headingClassName":""}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"常规","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"input-text","label":"数据点","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","mode":"horizontal","multiple":false,"size":"md","horizontal":{"leftFixed":"sm"},"source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"actionType":"change","target":"u:1cdb908c23a8"},{"type":"combo","label":"设备属性","name":"deviceAttrs","id":"u:98559a2dd514","multiple":false,"mode":"horizontal","size":"full","horizontal":{"leftFixed":"sm"},"items":[{"type":"input-table","label":false,"id":"u:41dfc35c368c","name":"table","strictMode":false,"needConfirm":false,"addable":true,"removable":true,"columns":[{"type":"input-text","label":"序号","id":"u:434e22030bc6","name":"num","size":"sm","mode":"horizontal","quickEdit":{"mode":"popOver","id":"u:c6a294f5c93a"},"horizontal":{"left":2,"right":10},"placeholder":"例：A/B/C/AA/BB","width":200},{"type":"select","name":"devices","id":"u:1cdb908c23a8","label":"设备","multiple":false,"mode":"horizontal","quickEdit":true,"size":"sm","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10},"checkAll":false},{"type":"select","name":"dataPoint","id":"u:8147daea685d","label":"数据点","multiple":false,"quickEdit":true,"mode":"horizontal","size":"sm","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}]}],"strictMode":true,"syncFields":[],"tabsMode":false,"canAccessSuperData":true,"inputClassName":"w-full","className":"m-b-sm"},{"type":"checkbox","label":"数据处理","name":"enableDataHandle","id":"u:034ca60f2135","mode":"horizontal","horizontal":{"leftFixed":"normal"},"option":""},{"type":"combo","id":"u:a06125153fa6","name":"calcRules","label":"计算规则","mode":"horizontal","visibleOn":"this.enableDataHandle","multiple":true,"items":[{"name":"formular","label":"计算公式","type":"input-text","id":"u:318a7f0c6449","placeholder":"例： (A + B) / C","width":"50%","size":"full"},{"name":"resultAttr","label":"计算结果属性","type":"input-text","id":"u:1e6e491ccbaa","placeholder":"例：A8、B、C...","width":"50%"}],"strictMode":true,"syncFields":[],"hidden":false,"inputClassName":"w-full","multiLine":false,"className":"calcRules"},{"type":"input-text","label":"唯一数据点","name":"uniquePoint","id":"u:3b257b599c19","mode":"horizontal","visibleOn":"this.enableDataHandle","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"场景：","content":"当有数据处理，并且只需绑定一个数据点作为 【实时/立即/最新数据】时，请填写所需数据点的序号或计算结果属性。"},"inputControlClassName":"m-b"}],"id":"u:51f0e51abd7c","data":{"attrs":[],"deviceCode":"\${deviceCode || ''}","devices":"\${devices || ''}","dataPoint":"\${dataPoint || ''}","dataSource":"\${dataSource || ''}","deviceAttrs":"\${deviceAttrs || []}"},"submitText":"","onEvent":{"inited":{"actions":{"actionType":"custom","script":"if(event.data.devices && event.data.dataPoint && event.data.deviceAttrs.length === 0) { const dataPoints = event.data.dataPoint.split(','); const newDeviceAttrs = dataPoints.map((point, idx) => ({ num: String.fromCharCode(65+idx), devices: event.data.devices, dataPoint: point }) ); doAction({ 'actionType': 'setValue', 'componentId': 'u:51f0e51abd7c', 'args': { value: {deviceAttrs: { table: newDeviceAttrs } }} }); }"}}}}],"id":"u:5505e7ef7cab"},{"title":"虚拟变量","body":[{"type":"tpl","tpl":"暂时无虚拟变量可配置","wrapperComponent":"","inline":false,"id":"u:722592249b31"}],"id":"u:b739cc6a6ed7"}],"id":"u:3b446450d643"}],"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:f46c2439c983","data":{"&":"\${dataPoint | toJson}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}"},"onEvent":{"confirm":{"actions":[{"actionType":"custom","script":"const tableData = event.data.deviceAttrs.table; let devices = ''; let dataPoint = ''; if(tableData) { tableData.forEach(item => { devices += (item.devices + ',');dataPoint += (item.dataPoint + ','); });}; if(tableData && tableData.length > 0) { devices = devices.substring(0, devices.length - 1); dataPoint = dataPoint.substring(0, dataPoint.length - 1); const newValue = {...event.data, devices: devices, dataPoint: dataPoint, dataSource: event.data.dataSource} ; doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(newValue) } }) } else {doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(event.data) } }) };"}]}},"closeOnEsc":false,"size":"lg"}}]}},"className":"w-full m-b-sm","inputClassName":"w-full","clearable":true},{"type":"input-text","label":"默认值","clearable":true,"name":"defaultValue","id":"u:13ccbc565f5e","mode":"horizontal","size":"full","inputControlClassName":"mb-sm","labelClassName":"mb-sm","className":"m-b-sm"},{"type":"input-text","label":"单位 ","name":"unit","id":"u:0f606558e8c7","mode":"horizontal","size":"full","className":"m-b-sm"},{"type":"input-number","label":"渲染间隔","name":"renderInterval","keyboard":true,"id":"u:3f7cb08b0e2b","step":1,"mode":"horizontal","unitOptions":["ms"],"min":30000,"labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"最低渲染间隔为30秒","title":"提示："}},{"type":"switch","label":"开启渲染间隔","option":"","name":"renderIntervalEnabled","falseValue":false,"trueValue":true,"id":"u:9486003439ac","value":true,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"关闭渲染间隔，将会渲染socket 推送的实时数据，意味着此时配置的数据源api如果不是 “最新” 值，将不会渲染。并且关闭渲染间隔后，需保存并刷新看板，才能看到效果。","title":"提示："}},{"type":"select","label":"时间轴格式化","name":"timeAxisFormatter","options":[{"label":"时","value":"HH"},{"label":"时分","value":"HH:mm"},{"label":"日","value":"DD"},{"label":"日 时分","value":"DD HH:mm"},{"label":"月","value":"MM"},{"label":"月日","value":"MM-DD"},{"label":"月日时分","value":"MM-DD HH:mm"}],"id":"u:362d1b26c7f0","multiple":false,"mode":"horizontal","inputClassName":"w-full","clearable":true},{"type":"switch","label":"补全数据","option":"","name":"completeDatas","falseValue":false,"trueValue":true,"id":"u:ce012e34fcb6","value":false,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"补齐一个时间区间内没有的数据"}},{"type":"select","label":"时间对比","name":"timeCompare","options":[{"label":"今日-昨日","value":"day"},{"label":"当月-上月","value":"month"},{"label":"今年-去年","value":"year"}],"id":"u:12f8f50a7559","mode":"horizontal","inputClassName":"w-full","clearable":true,"labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"用于时间区间，例如【两日、两月、两年】等的【对比分析】场景"},"visibleOn":"this.completeDatas","multiple":false},{"type":"radios","label":"数据展示","name":"dataShowTypes","options":[{"label":"单个物单个属性","value":"oneThingOneAttr"},{"label":"单个物多个属性","value":"oneThingManyAttr"},{"label":"多个物多个属性","value":"manyThingManyAttr"},{"label":"多个物一个属性","value":"manyThingOneAttr"}],"id":"u:b8aeecd9e52f","mode":"horizontal","inputClassName":"w-full","itemClassName":"w-full","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"请确保数据点的选择与数据展示方式一致"},"onEvent":{"change":{"actions":[{"componentId":"u:0fc48eacd2a4","actionType":"setValue","args":{"value":""}}]}}},{"type":"select","label":"图例名称展示","name":"legendNameType","options":[{"label":"物名称","value":"thingName","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr' "},{"label":"物编码","value":"thingCode","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr'"},{"label":"属性名称","value":"attrName","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"属性编码","value":"attrCode","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"物名称 + 属性名称","value":"thingNameAttrName"},{"label":"物编码 + 属性编码","value":"thingCodeAttrCode"}],"id":"u:0fc48eacd2a4","multiple":false,"mode":"horizontal","inputClassName":"w-full","value":"attrName"},{"type":"switch","label":"自定义数据源","option":"","name":"customDatasource","falseValue":false,"trueValue":true,"id":"u:648ca964f693","value":false,"mode":"horizontal"},{"type":"input-text","label":"数据源api","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","className":"w-full m-b-sm","inputClassName":"w-full","clearable":true,"visibleOn":"this.customDatasource"},{"type":"radios","label":"请求方式","name":"requestMethod","options":[{"label":"get 请求","value":"get"},{"label":"post 请求","value":"post"}],"id":"u:2c48207f4f65","mode":"horizontal","visibleOn":"this.customDatasource","value":"get"},{"type":"editor","label":"请求入参","name":"requestParams","id":"u:e94982b03d0c","language":"javascript","value":"return {};","visibleOn":"this.customDatasource","inputClassName":"","className":"text-left"},{"type":"editor","label":"数据过滤","name":"dataFilterFn","id":"u:f9ef754971e0","language":"javascript","value":"// datas 数据处理\\n// ....\\n","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"入参api返回数据： datas"},"labelClassName":"text-left","inputClassName":"text-left","options":{"lineNumbers":"off"},"visibleOn":"this.customDatasource"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,r={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true},{"url":"./plugins/echarts.min.js","isModule":false,"disabled":false}]',json:`{
"nodes": [
{
"id": "a3c0bb09-4bc9-4717-8adc-ff83e5eee086",
"type": "custom-bar-chart",
"x": 200,
"y": 200,
"text": {
"value": "",
"x": 200,
"y": 200
},
"properties": {
"id": "a3c0bb09-4bc9-4717-8adc-ff83e5eee086",
"width": 350,
"height": 250,
"x": 200,
"y": 200,
"rotation": 0,
"opacity": 1,
"grid": {
"show": false,
"top": "25",
"left": "30",
"right": "15",
"bottom": "20"
},
"title": {
"show": true,
"padding": "",
"left": "30",
"right": "2",
"top": "2",
"bottom": "2",
"text": "kWh",
"textAlign": "auto",
"textVerticalAlign ": "middle"
},
"legend": {
"show": true,
"orient": "horizontal"
},
"tooltip": {
"show": true,
"showContent": true,
"trigger": "axis",
"backgroundColor": "rgba(0, 0, 0, 0.5)",
"textStyle": {
"color": "rgba(255, 255, 255, 1)"
}
},
"xAxis": {
"show": true,
"axisLine": {
"show": true
},
"axisTick": {
"show": true
},
"axisLabel": {
"show": true,
"fontSize": 12
},
"splitLine": {
"show": false
},
"type ": "category",
"name": "",
"nameColor": ""
},
"yAxis": {
"show": true,
"axisLine": {
"show": true
},
"axisTick": {
"show": true
},
"axisLabel": {
"show": true,
"fontSize": 12
},
"splitLine": {
"show": false
},
"type ": "value"
},
"codeConfig": "option.color = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'];\\r\\n\\r\\n// 值保留为两位小数。\\r\\noption.valueFormatter = (value) => {\\r\\n if (typeof value === 'number') {\\r\\n return value.toFixed(2);\\r\\n } else {\\r\\n return value\\r\\n }\\r\\n};\\r\\n\\r\\noption.series.forEach((item) => {\\r\\n // item.stack = \\"total\\";\\r\\n})\\r\\n\\r\\n\\r\\n\\r\\nreturn option;",
"fontSize": 0,
"showDefaultValue": false,
"showUnit": false,
"nodeAlias": "柱状图",
"renderMode": "canvas",
"dynamic": {
"normalData": {
"dataPoint": "",
"compareType": "",
"conditionVariables": [],
"defaultValue": "",
"unit": "",
"renderIntervalEnabled": true,
"completeDatas": false,
"legendNameType": "attrName",
"customDatasource": false,
"timeAxisFormatter": "",
"dataShowTypes": "oneThingManyAttr",
"requestMethod": "get",
"requestParams": "return {};",
"dataFilterFn": "// datas 数据处理\\n// .....\\n"
}
}
}
}
]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})
const timeArr = new Array(24).fill('');
const totals = [];
timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A29", thingCode: 'A001' }) });
const defaultSocketValue = totals
const xAxisLabelFormatter = function (val) {
if (this.timeCompare) return;
if (this.timeAxisFormatter) {
return dayjs(+val).format(this.timeAxisFormatter);
}
const { months, days } = this;
if (months === 0 && days === 0) {
return dayjs(+val).format("HH:mm");
} else if (months === 0 && days > 0) {
return dayjs(+val).format("DD HH:mm");
} else if (months > 0 && days >= 0) {
return dayjs(+val).format("MM-DD HH:mm");
}
};
// 工具提示格式化
const tooltipFormatter = function (params) {
let strs = "";
const timeFormatterMap = {
"HH": '时',
"DD": '日',
'MM': '月'
}
const time = this.timeCompare ? params[0].name : window.dayjs.unix(+params[0].name / 1000).format(this.timeAxisFormatter || "YYYY-MM-DD HH:mm:ss");
strs += \`\${time} \${timeFormatterMap[this.timeAxisFormatter] || ''}
\`;
params.forEach((param) => {
strs += param.marker + " " + param.seriesName + ": " + Number(param.value).toFixed(2) + "
";
})
return strs;
};
// 图例格式化
const assembleLegend = (api, thingKey, attrkey, dataShowTypes, legendNameType, datas) => {
if (api) {
const infos = window.totalDeviceInfos[api];
if (!infos) return;
if (!datas[0]) return;
const thing = infos[datas[0].thingCode];
if (!thing) return;
const thingName = thing.entityName;
const attrName = thing.attrs[attrkey].name;
if (dataShowTypes.value === 'oneThingOneAttr') {
switch (legendNameType.value) {
case "thingName":
return thing.entityName;
case "thingCode":
return thingKey;
case "attrName":
return attrName;
case "attrCode":
return attrkey;
case "thingNameAttrName":
return thingName + '-' + attrName;
case "thingCodeAttrCode":
return thingKey + '-' + attrkey;
}
} else if (dataShowTypes.value === 'oneThingManyAttr') {
switch (legendNameType.value) {
case "attrName":
return thing.attrs[attrkey].name;
case "attrCode":
return attrkey;
case "thingNameAttrName":
return thingName + '-' + attrName;
case "thingCodeAttrCode":
return thingKey + '-' + thingKey
}
} else if (dataShowTypes.value === 'manyThingManyAttr') {
switch (legendNameType.value) {
case "thingNameAttrName":
const attrName = thing.attrs[attrKey].name
return thingName + '-' + attrName;
case "thingCodeAttrCode":
return thingKey + '-' + thingKey;
}
} else if (dataShowTypes.value === 'manyThingOneAttr') {
switch (legendNameType.value) {
case "thingName":
return thingName;
case "thingCode":
return thingKey;
case "thingNameAttrName":
const attrName = thing.attrs[attrKey].name
return thingName + '-' + attrName;
case "thingCodeAttrCode":
return thingKey + '-' + thingKey;
}
}
} else {
return attrkey
}
}
const BarChart = {
template: '',
props: {
lineId: {
type: String,
default: ''
},
historyDatas: {
type: Array,
default: () => []
},
width: {
type: Number,
default: 350
},
height: {
type: Number,
default: 150
},
grid: {
type: Object,
default: () => { }
},
title: {
type: Object,
default: () => { }
},
legend: {
type: Object,
default: () => { }
},
tooltip: {
type: Object,
default: () => { }
},
xAxis: {
type: Object,
default: () => { }
},
yAxis: {
type: Object,
default: () => { }
},
codeConfig: {
type: String,
default: ''
},
timeAxisFormatter: {
type: String,
default: ''
},
completeDatas: {
type: Boolean,
default: false
},
totalTimes: {
type: Array,
default: () => []
},
timeCompare: {
type: String,
default: '',
},
dataShowTypes: {
type: String,
default: 'oneThingManyAttr',
},
legendNameType: {
type: String,
default: 'attrName',
},
apiid: {
type: String,
default: '',
},
renderMode: {
type: String,
default: 'canvas',
}
},
computed: {
getStyle() {
return {
width: \`\${this.width}px\`,
height: \`\${this.height}px\`
}
}
},
setup(props) {
const { onMounted, nextTick, toRefs, watch } = Vue;
const { grid, title, legend, tooltip, xAxis, yAxis, historyDatas, codeConfig, timeAxisFormatter, completeDatas, totalTimes, timeCompare, dataShowTypes, legendNameType, apiid, renderMode } = toRefs(props)
const tooltipFormatterBound = tooltipFormatter.bind({ timeCompare: timeCompare.value, timeAxisFormatter: timeAxisFormatter.value });
let myChart = null;
let timeCompareMap = {
'day': {
prev: '昨日',
curr: '今日'
},
'month': {
prev: '上月',
curr: '当月'
},
'year': {
prev: '去年',
curr: '今年'
},
}
const initChart = (datas) => {
// 基于准备好的dom，初始化echarts实例
const dom = document.getElementById(props.lineId);
if (dom && !myChart) {
if (!myChart) {
myChart = echarts.init(dom, null, {
renderer: renderMode.value
});
}
if (datas) {
let series = [];
let legends = [];
let xAxisData = [];
let xAxisLabelFormatterBound = null;
if (datas.length > 0) {
const thingGrouped = window._.groupBy(datas, 'thingCode');
for (const thingKey in thingGrouped) {
const attrGrouped = window._.groupBy(thingGrouped[thingKey], 'attrKey')
const keysLen = Object.keys(attrGrouped).length;
for (const key in attrGrouped) {
let serieData = attrGrouped[key];
const legendKey = assembleLegend(apiid.value, thingKey, key, dataShowTypes, legendNameType, serieData);
legends.push(legendKey);
if (!xAxisLabelFormatterBound) {
const first = serieData[0];
const last = serieData[serieData.length - 1];
if (first.ts > last.ts) {
serieData = serieData.reverse()
}
const dayjs = window.dayjs;
const firstDay = dayjs(+first.ts);
const lastDay = dayjs(+last.ts);
const days = firstDay.diff(lastDay, 'day');
const months = firstDay.diff(lastDay, 'month');
xAxisLabelFormatterBound = xAxisLabelFormatter.bind({
months,
days,
timeAxisFormatter: timeAxisFormatter.value,
timeCompare: completeDatas.value && timeCompare.value,
})
}
if (completeDatas.value && totalTimes.value.length > 0) {
// 如果需要补全一个区间内的缺失数据
// console.log('serieData', serieData);
if (timeCompare.value) {
const splitTimes = window.splitTimes(totalTimes.value, timeCompare.value);
const realIndexs = {}; // 正确数据索引
const prevValues = splitTimes.prev.map((t, index) => {
let tVal = null;
if (timeCompare.value === 'day') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'HH:mm');
} else if (timeCompare.value === 'month') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'DD');
} else if (timeCompare.value === 'year') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'MM');
}
if (!xAxisData.includes(tVal)) {
xAxisData.push(tVal);
realIndexs[index] = true;
const point = serieData.find(d => +d.ts === t);
return (point && point.val) || 0
}
})
const currValues = splitTimes.curr.map((t, index) => {
if (xAxisData.length === 0) {
let tVal = null;
if (timeCompare.value === 'day') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'HH:mm');
} else if (timeCompare.value === 'month') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'DD');
} else if (timeCompare.value === 'year') {
tVal = dayjs(t).format(timeAxisFormatter.value || 'MM');
}
if (!xAxisData.includes(tVal)) {
xAxisData.push(tVal);
const point = serieData.find(d => +d.ts === t);
return (point && point.val) || 0
}
} else {
if (realIndexs[index]) {
const point = serieData.find(d => +d.ts === t);
return (point && point.val) || 0
}
}
})
let legendPrev = '';
let legendCurr = '';
if (keysLen > 1) {
legendPrev = \`\${legendKey}(\${timeCompareMap[timeCompare.value].prev})\`;
legendCurr = \`\${legendKey}(\${timeCompareMap[timeCompare.value].curr})\`;
} else if (keysLen === 1) {
legendPrev = \`\${timeCompareMap[timeCompare.value].prev}\`;
legendCurr = \`\${timeCompareMap[timeCompare.value].curr}\`;
}
legends.push(legendPrev);
legends.push(legendCurr);
series.push({
name: legendPrev,
type: 'bar',
data: prevValues.filter(Boolean)
})
series.push({
name: legendCurr,
type: 'bar',
data: currValues.filter(Boolean)
})
} else {
const serieValues = totalTimes.value.map(t => {
xAxisData.push(t);
const point = serieData.find(d => +d.ts === t);
return (point && point.val) || 0
})
series.push({
name: legendKey,
type: 'bar',
data: serieValues
})
}
} else {
const serieValues = serieData.map((point) => {
xAxisData.push(+point.ts);
return point.val;
})
series.push({
name: legendKey,
type: 'bar',
data: serieValues
})
}
}
}
} else {
legends = ['测试图例']
xAxisData = [1, 2, 3, 4, 5, 6, 7, 8]
series = [{
type: 'bar',
name: '测试图例',
data: [],
}]
}
// xAxisData 去重
xAxisData = [...new Set(xAxisData)].sort();
const legendConfig = {
...legend.value,
data: legends.filter(Boolean)
}
const xAxisConfig = {
...xAxis.value,
axisLabel: {
...xAxis.value.axisLabel,
formatter: (completeDatas.value && timeCompare.value) ? null : xAxisLabelFormatterBound
},
nameLocation: 'end',
nameGap: 5,
nameTextStyle: {
color: xAxis.value.nameColor,
verticalAlign: 'top',
lineHeight: 28
},
data: xAxisData
}
// 指定图表的配置项和数据
var option = {
grid: grid.value,
title: title.value,
tooltip: {
...tooltip.value,
formatter: tooltipFormatterBound,
borderColor: tooltip.value.backgroundColor,
textStyle: {
...tooltip.value.textStyle,
align: 'left'
}
},
legend: legendConfig,
xAxis: xAxisConfig,
yAxis: yAxis.value,
series: series,
};
const func = new Function('option', 'datas', 'instance', codeConfig.value);
const opt = func(window._.cloneDeep(option), datas, myChart);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(opt);
}
}
}
watch(historyDatas, (val) => {
if (val) {
nextTick(() => {
initChart(val)
})
}
}, {
immediate: true
})
}
}
class CustomBarChartNode extends HtmlResize.view {
chartRendered = false
historyDatas = []
oldProperties = {}
setHtml(rootEl) {
if (!rootEl) return;
const { properties, width, height, } = this.props.model;
const { nodeAlias, grid, title, legend, tooltip, xAxis, yAxis, codeConfig, apiid, renderMode } = properties;
const { normalData } = properties.dynamic || {};
const { timeAxisFormatter, completeDatas, timeCompare, dataShowTypes, legendNameType } = normalData || {};
let totalTimes = [];
if (completeDatas) {
if (apiid) {
const param = window.totalApiParams[apiid];
const info = totalDeviceInfos[apiid];
totalTimes = window.completeTimesForChart(param, info, this.historyDatas);
}
}
const el = document.createElement('div');
rootEl.innerHTML = '';
const instance = createVNode(BarChart, {
apiid,
name: nodeAlias,
lineId: \`line-\${properties.id}\`,
historyDatas: this.historyDatas,
width,
height,
grid, title, legend, tooltip, xAxis, yAxis,
codeConfig,
timeAxisFormatter, completeDatas,
totalTimes,
timeCompare,
dataShowTypes, legendNameType,
renderMode
})
instance.appContext = app._context
render(instance, el)
rootEl.appendChild(el);
}
sameProps(properties) {
const isSame = window._.isEqual(this.oldProperties, properties);
if (isSame) return true;
this.oldProperties = properties;
return false
}
filterHistoryData(thingCodeArr, dataPointArr, apiid, renderIntervalEnabled) {
if (dataPointArr && dataPointArr.length > 0) {
let datas = []
if (renderIntervalEnabled) {
datas = window.totalHistoryDatas[apiid];
} else {
if (window.globalDashboardDatas[apiid]) {
datas = window.globalDashboardDatas[apiid].values;
}
}
if (datas && datas.length > 0) {
const gotValues = datas.filter((val) => thingCodeArr.includes(val.thingCode) && dataPointArr.includes(val.attrKey));
this.historyDatas = gotValues
this.chartRendered = true;
}
}
}
// 生命周期 支持重写内容, 但格式需一致
shouldUpdate() {
const { properties } = this.props.model;
const { apiid } = properties;
const { normalData } = properties.dynamic || {};
const { dataPointArr, defaultValue, thingCodeArr, customApiDatas } = normalData || {}
if (normalData && !normalData.dataPoint && !normalData.defaultValue) {
this.historyDatas = defaultSocketValue;
return true
} else if (normalData && !normalData.dataPoint && normalData.defaultValue) {
this.historyDatas = JSON.parse(defaultValue);
return true
}
// 如果采用来自自定义数据源的数据
if (customApiDatas) {
this.historyDatas = customApiDatas;
return true
}
const propertiesBack = window._.cloneDeep(properties);
if (propertiesBack.dynamic.normalData) {
propertiesBack.dynamic.normalData.defaultValue = '';
if (this.sameProps(propertiesBack) && this.chartRendered) {
return false
}
if (dataPointArr && apiid && !this.chartRendered) {
this.filterHistoryData(thingCodeArr, dataPointArr, apiid, normalData.renderIntervalEnabled);
return true;
}
}
return true;
}
updateHtml() {
this.setHtml(this.rootEl);
}
componentDidMount() {
// 防止拖动时候频繁渲染图表
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
const { properties } = this.props.model;
const { normalData } = properties.dynamic || {};
const { renderInterval, dataPointArr, thingCodeArr } = normalData || {};
if (this.shouldUpdate()) {
this.setHtml(this.rootEl);
}
const initRender = () => {
// 第一次历史数据返回可能比较慢，轮询判断
let times = 0
const inter = setInterval(() => {
if (window.totalHistoryDatas && window.totalHistoryDatas[properties.apiid]) {
this.filterHistoryData(thingCodeArr, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
this.setHtml(this.rootEl);
clearInterval(inter);
}
if (times > 20) {
clearInterval(inter)
}
times++;
}, 1000)
}
initRender();
let inters = parseInt(renderInterval || '300000')
if (normalData && !normalData.renderIntervalEnabled) {
inters = 1000
}
setInterval(() => {
if (window.totalHistoryDatas[properties.apiid]) {
this.filterHistoryData(thingCodeArr, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
this.setHtml(this.rootEl);
}
}, inters)
}
componentDidUpdate() {
if (this.shouldUpdate()) {
this.updateHtmlDebounced();
}
}
}
class CustomBarChartModel extends HtmlResize.model {
initNodeData(data) {
// 自定义组件，需最开始重置一下text 。
data.text = {
value: "",
x: data.x,
y: data.y,
};
super.initNodeData(data);
const { properties } = this;
this.width = properties.width || 80;
this.height = properties.height || 35;
this.text.editable = false; // 不允许文本被编辑
}
setAttributes() {
// 自定义组件需重置 text
const { x, y, properties } = this;
const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
this.text = {
...this.text,
x: x + textHorizontalMove,
y: y + textVerticalMove,
value: "",
}
}
}
lf.register({
type: 'custom-bar-chart',
view: CustomBarChartNode,
model: CustomBarChartModel,
})`,css:`.custom-bar-chart svg {\r
stroke: none;\r
}`,fakeData:""},m={id:e,name:a,aliasName:t,image:n,imageType:i,groupName:l,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:r};export{t as aliasName,d as config,m as default,r as files,l as groupName,o as groupType,e as id,n as image,i as imageType,c as isDefault,u as isRemote,a as name,s as sectionType};