const A="95ec29f9-1c19-445a-8bc5-df727b6a347b",e="custom-pictorial-bar",n="象形图",a=`
`,t="svg",l="动态",i="图表组件",r=!1,f=!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","id":"u:047a1336613a","label":"渲染模式","name":"renderMode","options":[{"label":"canvas","value":"canvas"},{"label":"svg","value":"svg"}],"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","id":"u:5fafefdb95b3","className":"m-b","columns":[{"body":[{"type":"input-text","label":"文本","name":"title.text","id":"u:367bcfaf236d","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"}]},{"type":"grid","id":"u:d5f5d7d1f821","className":"m-b","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"}]},{"type":"grid","id":"u:aa3c4bbe6aa5","className":"m-b","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"}]}],"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","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"}],"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","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"}],"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","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":"默认值","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":"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":"editor","label":"数据过滤","name":"dataFilterFn","id":"u:f9ef754971e0","language":"javascript","value":"// datas 数据处理\\n// .....\\nconst defaultHeader = ['列1', '列2', '列3']\\nconst defaultDatas = [\\n[{ val: '行1列1', style: {color: 'red'}},{ val: '行1列2', style: {color: 'green'}}, { val: '行1列3', style: {color: 'blue', cursor: 'pointer'}}],\\n[{ val: '行2列1', style: {color: 'red'}},{ val: '行2列2', style: {color: 'green'}}, { val: '行2列3', style: {color: 'blue', cursor: 'pointer'}}],\\n]\\n// 或\\n// const defaultDatas = [\\n// ['行1列1', '行1列2', '行1列3'],\\n// ['行2列1', '行2列2', '行2列3'],\\n// ]\\n\\nreturn {\\n headerDatas: defaultHeader ,\\ntableDatas: defaultDatas \\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":""}`,o={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": "0abd541c-81c3-4ecc-b57c-870569fa52d0",
"type": "custom-pictorial-bar",
"x": 200,
"y": 200,
"text": {
"value": "",
"x": 200,
"y": 200
},
"properties": {
"id": "0abd541c-81c3-4ecc-b57c-870569fa52d0",
"width": 350,
"height": 250,
"x": 200,
"y": 200,
"rotation": 0,
"opacity": 1,
"grid": {
"show": false,
"left": "30",
"right": "15",
"top": "25",
"bottom": "20"
},
"title": {
"show": true,
"text": "单位：kWh",
"left": "30",
"right": "2",
"bottom": "2",
"top": "2",
"textStyle": {
"fontSize": 10
}
},
"legend": {
"show": true,
"orient": "horizontal"
},
"tooltip": {
"show": true,
"showContent": true,
"trigger": "axis"
},
"xAxis": {
"show": true,
"axisLine": {
"show": true
},
"axisTick": {
"show": true
},
"axisLabel": {
"show": true
},
"splitLine": {
"show": false
}
},
"yAxis": {
"show": true,
"axisLine": {
"show": true
},
"axisTick": {
"show": true,
"lineStyle": {
"width": ""
}
},
"axisLabel": {
"show": true,
"fontSize": 12
},
"splitLine": {
"show": false
}
},
"codeConfig": "return option",
"nodeAlias": "象形图",
"showDefaultValue": false,
"showUnit": false,
"valueColor": "rgba(245, 166, 35, 1)",
"fontSize": 12,
"renderMode": "canvas",
"dynamic": {
"normalData": {
"dataPoint": "",
"compareType": "",
"conditionVariables": [],
"defaultValue": "",
"unit": "",
"customDatasource": true,
"renderIntervalEnabled": true,
"completeDatas": false,
"legendNameType": "attrName",
"dataFilterFn": "// datas 数据处理\\n// .....\\nconst xAxisData = ['电子', '石化', '能源', '纺织', '装备', '船舶', '轻工']\\nconst seriesData = [{\\n 能耗总量: {\\n val: 1220,\\n unit: 'tce'\\n },\\n 电: {\\n val: 120,\\n unit: 'kWh'\\n },\\n 蒸汽: {\\n val: 220,\\n unit: 't'\\n },\\n}, {\\n 能耗总量: {\\n val: 620,\\n unit: 'tce'\\n },\\n 电: {\\n val: 20,\\n unit: 'kWh'\\n },\\n 蒸汽: {\\n val: 520,\\n unit: 't'\\n },\\n }]\\nconst colorList = [\\n ['#F76B1C', '#FAD961'],\\n ['#4D7CFE', '#51C0F8'],\\n ['#0096AF', '#00D6BE'],\\n]\\n\\nreturn {\\n colorList: colorList,\\n xAxisData: xAxisData,\\n seriesData: seriesData\\n}"
}
}
}
}
]
}`,javascript:`const { createApp, createVNode, render } = Vue;
const app = createApp({})
const xAxisData = ['电子', '石化', '能源', '纺织', '装备', '船舶', '轻工']
const seriesData = [{
能耗总量: {
val: 1220,
unit: 'tce'
},
电: {
val: 120,
unit: 'kWh'
},
蒸汽: {
val: 220,
unit: 't'
},
}, {
能耗总量: {
val: 620,
unit: 'tce'
},
电: {
val: 20,
unit: 'kWh'
},
蒸汽: {
val: 520,
unit: 't'
},
}]
const colorList = [
['#F76B1C', '#FAD961'],
['#4D7CFE', '#51C0F8'],
['#0096AF', '#00D6BE'],
]
const historyDatas = {
colorList: colorList,
xAxisData: xAxisData,
seriesData: seriesData
}
// 工具提示格式化
const tooltipFormatter = function (params) {
const {seriesData, colorList} = this;
console.log('params', params)
const param = params[0];
const dataIdx = param.dataIndex;
let strs = "";
strs += \`\${param.name}
\`;
const item = seriesData[dataIdx];
const keys = Object.keys(item);
keys.forEach((k) => {
strs += '' + k + ": " + item[k].val + " " + item[k].unit + "
";
})
return strs;
};
const PictorialBar = {
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: ''
},
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, apiid, renderMode } = toRefs(props)
let myChart = null;
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 xAxisDataArr = [];
let tooltipFormatterBound = null;
if (Object.prototype.toString.call(datas) === '[object Object]') {
const { xAxisData, seriesData, colorList } = datas;
xAxisDataArr = xAxisData;
const seriesDataFinal = seriesData.map((item) => {
const keys = Object.keys(item);
return item[keys[0]].val;
})
series = [{
type: 'pictorialBar',
barCategoryGap: '0%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
barWidth: '60%',
itemStyle: {
color: function (params) {
let itemColor = colorList[params.dataIndex];
let curColor = '';
if (Array.isArray(itemColor)) {
curColor = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: itemColor[0] // 0% 处的颜色
},
{
offset: 1,
color: itemColor[1] ? itemColor[1] : itemColor[0] // 100% 处的颜色
}
],
global: false // 缺省为 false
}
} else {
curColor = itemColor;
}
return curColor
}
},
data: seriesDataFinal,
z: 10
}]
tooltipFormatterBound = tooltipFormatter.bind({seriesData, colorList})
}
const legendConfig = {
...legend.value,
data: legends.filter(Boolean)
}
const xAxisConfig = {
...xAxis.value,
axisLabel: {
...xAxis.value.axisLabel,
},
nameLocation: 'end',
nameGap: 5,
nameTextStyle: {
color: xAxis.value.nameColor,
verticalAlign: 'top',
lineHeight: 28
},
data: xAxisDataArr
}
// 指定图表的配置项和数据
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), window._.cloneDeep(datas), myChart);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(opt);
}
}
}
watch(historyDatas, (val) => {
if (val) {
nextTick(() => {
initChart(val)
})
}
}, {
immediate: true
})
}
}
class CustomPictorialBarNode extends HtmlResize.view {
historyDatas = historyDatas
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 { customApiDatas } = normalData || {};
if (customApiDatas) {
this.historyDatas = customApiDatas
}
const el = document.createElement('div');
rootEl.innerHTML = '';
const instance = createVNode(PictorialBar, {
apiid,
name: nodeAlias,
lineId: \`line-\${properties.id}\`,
width,
height,
historyDatas: this.historyDatas,
grid, title, legend, tooltip, xAxis, yAxis,
codeConfig,
renderMode
})
instance.appContext = app._context
render(instance, el)
rootEl.appendChild(el);
}
}
class CustomPictorialBarModel 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-pictorial-bar',
view: CustomPictorialBarNode,
model: CustomPictorialBarModel,
})`,css:"",fakeData:""},u={id:A,name:e,aliasName:n,image:a,imageType:t,groupName:l,groupType:i,isRemote:!1,isDefault:!0,sectionType:s,config:d,files:o};export{n as aliasName,d as config,u as default,o as files,l as groupName,i as groupType,A as id,a as image,t as imageType,f as isDefault,r as isRemote,e as name,s as sectionType};