{"_id":"@dfeidao/fd-wh000020","_rev":"4-b88272042d1bfc06776a7d43eed03327","name":"@dfeidao/fd-wh000020","dist-tags":{"latest":"4.6.201910171452"},"versions":{"4.6.201910091121":{"name":"@dfeidao/fd-wh000020","version":"4.6.201910091121","description":"嵌套环形图","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"高塬","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027","dot":"1.1.2","echarts":"4.2.1"},"devDependencies":{"@types/dot":"^1.1.3","@types/echarts":"^4.1.9"},"_id":"@dfeidao/fd-wh000020@4.6.201910091121","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-WG1ONswVrieqeoujQX1y7XIYfIlQEzXpyX1q/0hmXDvuNxwgrca521Gze5YPFK05mdwidFcfq4LxinhG8i97vA==","shasum":"9343e3dceeded4dd3ff99b526d804f6cfb7756db","tarball":"https://registry.npmjs.org/@dfeidao/fd-wh000020/-/fd-wh000020-4.6.201910091121.tgz","fileCount":6,"unpackedSize":60189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnVJKCRA9TVsSAnZWagAAjvsP/RRm6pJ1KLK1i7rc8o0W\nnDkqefcD56e9ZfAMfFGnp1yrCMjkXBVksHwhz4WriSNg4RtIsixmQ9kO/aSE\nfJsJEjq2+BfV6XCRAOa180wGmLcN+3nT2e2Qt6E3yT2tznQHAYtY0Xf8/jkI\nNo9aPwGV3ozdvC/LMWzJ9MFjmE6bTUGVjaxet6lQ0TupRzAwGqCnPsG2rMKs\n7ZdyIq+WUp0GtJsbqnWX5pF7124wILFWzmek5ku7HsjHfTa60MSb7QnM/Rma\nLt5PbqXd2L7ENJCbJkzha9w44bGTyfAzyn/HDFziUja6nmXjTVMOWV58pGTK\niPBEP5z6tr7EnrAsJlPIVhmCb4muQ1aicMIN34tvByQPEtFGSVsoiDGgbMfT\n7c1GdPV0QYPqYuwcs8GOnrTqx68iPy10BjTycb3CdcwVq1k3eHpKE0W/aQLR\nRRo6mXysxS3/6zQkHHegeCHe289TG2xWkIwr+B9XvSjSKQ2fJMiLgkTzqJYa\nrjNCFE7Z+XMzv8YsrHAcdWiSiSuLiqEyPmBrhIQyLLF4u46FiEE5//p+tid8\ntYG3Gz8/Kji6CGdxq02722FrJua9IBQW6W6gD+N0Ai5Xe2SO4svPRcZiduHC\n+DN1neiTjCwnIu5LzH08ZHQLIN0awdl3YA3woMGSf7Je0qFPFrTJFrvLc3Zd\njYSl\r\n=clDi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxI7D1r9/MU0An2gNh46WkHF95vJhFRSZE2fb+iOPGBwIgY4jdjMm5391Fw3GDch5o0HQCe195huRX0+XhuEBl/Uw="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-wh000020_4.6.201910091121_1570591305435_0.741486017985846"},"_hasShrinkwrap":false},"4.6.201910111545":{"name":"@dfeidao/fd-wh000020","version":"4.6.201910111545","description":"嵌套环形图","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"高塬","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027","dot":"1.1.2","echarts":"4.2.1"},"devDependencies":{"@types/dot":"^1.1.3","@types/echarts":"^4.1.9"},"_id":"@dfeidao/fd-wh000020@4.6.201910111545","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-cJtcdVRPiAcoFoPxQSMS0oJizjHubRAuip0ADKx7uj7kgiP+l/5B8faVQ2Aspkif8Bia2HYB7r8dbrTcrqsRUQ==","shasum":"3573fabf321838475480792cff91e60803850bcb","tarball":"https://registry.npmjs.org/@dfeidao/fd-wh000020/-/fd-wh000020-4.6.201910111545.tgz","fileCount":6,"unpackedSize":60830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoDMyCRA9TVsSAnZWagAAZwwQAIfs4iVnMv9cKU7NAkfN\nvNEtVvfZrrKY9OwVQCstDTCWb0ap7bMhtddRxRfV4IrP5hiMN2qlQ4JEmnyf\ned9u8P9jSO5JtuwfxTdXEPE6Ktevwl8nn+Eb9Rj+A8P/BO145g4Rg+xNPW4X\noVbxhJo8lxlxAjHl5BxGy2T7+aFipGuVgX3tvDIqQCFohewYwLNXCdpwcVgW\nzVAC2WBHHhS1bmg+vbKEAFd09uVIA4zig++5MSNt+nVLMDFO4UriUhtxRE7q\nkzhMp1tpSCPCDnW13SaLyfHr/c3cSSStZdBcqQmqwy31Q67K93MQ01DyEGiT\n14urgZAItQtq8/Zk0P/hC9oGWgCY6XPC/npCrT6j1sxCeVxTniqvduW6UkEJ\nWi4n5/T9/YtwFCAeAcv9oswOGPIJLPXJRl8frFNUepo81iaTpXblqlp9euVk\nNmOQxrE05WBLfFJpAeihrYRL0Kh1oaxArAr/L+cqDMjtM9x/VEh+P3CHMZpS\n1QvF2FNrdLfFDnapP4QnApnc3erG3PcuNSvOR/4H0F+JEfB45xvmI3sAwiP2\nRLEzmoshjF6REdYPiD9HtlJdq65Mxvm0Er0UVddJ0i6EAF+rWTuLh1IHItv+\n9cyldwZWbGP/ZMNvnG9i6uIeJBheUVjPDMYzzMq1eolgbiNuAsiDyHLkZGBz\n6uLk\r\n=g+3O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMMf/DFAewdCtuovTQhqqM6s46R/WuxROA35+bEhlkOwIgXzssBNXMXEh/3T+bEeTrgU3uKfRqjLNaD6fEy4qK/oY="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-wh000020_4.6.201910111545_1570779953260_0.2899451774418118"},"_hasShrinkwrap":false},"4.6.201910151754":{"name":"@dfeidao/fd-wh000020","version":"4.6.201910151754","description":"嵌套环形图","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"高塬","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027","dot":"1.1.2","echarts":"4.2.1"},"devDependencies":{"@types/dot":"^1.1.3","@types/echarts":"^4.1.9"},"_id":"@dfeidao/fd-wh000020@4.6.201910151754","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-NGo/0xIBZEENBriVm2QrBgg0RAqdN5Yw/n80eaL6rT7Ry/ZPuroqEcLMy+HpAWoQD9nYiwyCMkhYsp0wcNvuog==","shasum":"572871cbc05addfc6f98b2ed325c65f492bf5826","tarball":"https://registry.npmjs.org/@dfeidao/fd-wh000020/-/fd-wh000020-4.6.201910151754.tgz","fileCount":6,"unpackedSize":62011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpZdOCRA9TVsSAnZWagAAcAYP/iLTYoyzzO3zvG5wjea7\nDtCelXPd/rGj0vJN7gemRgDPI2aCUNIlJ2beYJ5oN97DcMXbwACoXNvpXRe8\n2NQpbunm3c1Ya9c3EMY87ogAIn6vqR/oQpdRJRRksLBYECNuyTNW5VBazuR7\nCsn1X1MdYjW90KQ+PgwpVDsf+sZGZukQw9CDNwZWcr7zJqmeOSvtksulilYy\nuYymx+vscN9Wl9sKiYiaPD2nv/NdgW8B0zy52sx7WhjuCdyI1aZ7rSyixFV5\nzwM1K3cTCJ8b25vHSGY7qCmotGfqAf/EZ1pYeoExzjhdpfMF/WK3mAzqbzTC\nvnuG0eedKpBaxFrzg0yzEmNXW8jQA056lOBFvTKqND6raMfM7ReuymHpZiV+\nJKUUtdAovAh53facnJnS9E7DPTA0LROLKHdRHKmQ3gFIKrRZzWQ5T19gqfzB\n3UeP4g2aOmYIbc5DgtyI/NKxvghBCqsgJ7NBebRp2lRLGZ2gEeXqkvF2/IMY\nsUHZIzCrQpHF5//uTEG3mGGVfaWKaehI9glT0xQeCE1kwf+DeeiyIlcyZq/c\nwh8I4nfNQ7GWwsrv5Xf8SsurDAHiviyHZ9TEa2DSf6+xPKr5h2s37YxkPcy1\nv67BtCmdbnXPsZg76SQ+/k+zSTSyDwuTMyW1+0EsDmrS798pS7+oNVufzjPs\n/BXJ\r\n=uVAK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpKHu+pMmbKGFbNTbCHqAAFXuBPf78Owci6EBJnje5UAiEA0BRs/fL3pQUfK/pqI+EeWb3znfYGaJmlGCc334S/QZY="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-wh000020_4.6.201910151754_1571133261285_0.23916462725441145"},"_hasShrinkwrap":false},"4.6.201910171452":{"name":"@dfeidao/fd-wh000020","version":"4.6.201910171452","description":"嵌套环形图","scripts":{"lint":"tslint -p ./tsconfig.json","build":"../../node_modules/.bin/gulp","test":"../../node_modules/.bin/gulp dev","umd":"../../node_modules/.bin/gulp umd"},"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"author":{"name":"高塬","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"license":"MIT","peerDependencies":{},"dependencies":{"@dfeidao/core":"4.6.201904301027","dot":"1.1.2","echarts":"4.2.1"},"devDependencies":{"@types/dot":"^1.1.3","@types/echarts":"^4.1.9"},"_id":"@dfeidao/fd-wh000020@4.6.201910171452","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-mimlp8JaJurpEgPzTIJpEvMT0Y2usM3dYJOxrBQyJXNybZxQqH8+OcfqEpdg7Ajnebch6uku3AHXIOxvlYkzGg==","shasum":"cc6419a8621a5ddb8702581b9804ce0faa982d68","tarball":"https://registry.npmjs.org/@dfeidao/fd-wh000020/-/fd-wh000020-4.6.201910171452.tgz","fileCount":6,"unpackedSize":62422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqA+1CRA9TVsSAnZWagAAZJIQAIDdvGr6Q1cgRonyPwj6\na2ijW9SMzPBey5H3XK6C34eUM0aVMjXvDjxnt6+iElSEw5ZGhR1aqVHA0pBI\n/ZYhsr4lOri+B9NPiEv9vQWDcwkb43W1qotFNFkd5aBKiqXizbccs+PdqZyw\np1ESzorhLX341Uu4zEp2mB0tm3Qm7ITpnk4scukFfr0uf+hRkmRrrQypkYgq\n7ZI58XAkOSH1jWzoLK8JQLVUvatamWrAcq/yL1PXkmDzb0hIY+N1NhyHfDjO\npA5vaUhiVoHrQQjTTC9TmIsa+wUP8cD7dn7QAqYwf9eWOkUvzNfxJAYj4OC/\nbo7u9e0oBjGyVSDSSWILbIMja8QpAOp+jAOL0/UD47oXx+kH7Zqv27FxcJXg\n3cVkvjTPn/xvuAMrwUEGpS+/8K1oPMysECNZBlVwoI9Bqjm4TS2k57jaVmkf\n0CrYNY+N4Hk0XOYfChlj8+4mZWrjpEwjAD19yrwkQJThJ/+UyJu7Np/gc/4l\nDKUxJ1AXtpVztUVy/cVuug4VMIlFw+sl3Tzlj+x07vFcaOTuLaL5sPWy4xXU\nTYphevWkOLbRDR4Vxi9w8Z1FEVhDPmglS6oiLOok2AmtjD+8e3NTDFbaYGF1\nIZdBW8jNwFcA9qeT0LcEuSO4dV10X7DgdTWSUHdNP4ceS1XOEma6PihHfjOo\nYq5e\r\n=+LS8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+FmRqr/SIOJjsSv2+ad8NU+EehWogEJa/sbSwsLkwDAiEAnzUIPDDX+RaOe85yrmmcWJB052g1phUAOZ4BAJnKNjE="}]},"_npmUser":{"name":"taoqf","email":"tao_qiufeng@126.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fd-wh000020_4.6.201910171452_1571295157063_0.4598107460294023"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-09T03:21:45.253Z","4.6.201910091121":"2019-10-09T03:21:45.586Z","modified":"2022-04-05T04:16:48.358Z","4.6.201910111545":"2019-10-11T07:45:53.364Z","4.6.201910151754":"2019-10-15T09:54:21.474Z","4.6.201910171452":"2019-10-17T06:52:37.194Z"},"maintainers":[{"name":"taoqf","email":"tao_qiufeng@126.com"}],"description":"嵌套环形图","keywords":["feidao","01feidao","dfeidao","atom","飞道","控件","ai"],"repository":{"type":"git","url":"https://gitee.com/dfeidao/widgets"},"author":{"name":"高塬","email":"tao_qiufeng@126.com","url":"http://www.01feidao.com/"},"license":"MIT","readme":"# 嵌套环形图\n\n<!-- TOC -->\n\n- [Installation](#installation)\n- [Tag](#tag)\n- [Attributes](#attributes)\n\t- [`value`](#value)\n\t- [`theme`](#theme)\n\t- [`legend-type`](#legend-type)\n\t- [`legend-hide`](#legend-hide)\n\t- [`lengend-number`](#lengend-number)\n\t- [`legend-position`](#legend-position)\n\t- [`legend-orient`](#legend-orient)\n\t- [`tooltip-show`](#tooltip-show)\n\t- [`series-name`](#series-name)\n\t- [`series-rose`](#series-rose)\n\t- [`series-center-w`](#series-center-w)\n\t- [`series-center-h`](#series-center-h)\n\t- [`tooltip-formatter`](#tooltip-formatter)\n\t- [`show-label`](#show-label)\n\t- [`label-position`](#label-position)\n\t- [`label-formatter`](#label-formatter)\n\t- [`min-radius`](#min-radius)\n\t- [`border-color`](#border-color)\n\t- [`min-ring-width`](#min-ring-width)\n\t- [`ring-conf`](#ring-conf)\n\t- [`all-ring-color`](#all-ring-color)\n\t- [`show-title`](#show-title)\n\t- [`subtext`](#subtext)\n\t- [`subtext-color`](#subtext-color)\n\t- [`text`](#text)\n\t- [`text-color`](#text-color)\n\t- [`text-font`](#text-font)\n\t- [`subtext-font`](#subtext-font)\n\t- [`legend-text-color`](#legend-text-color)\n\t- [`title-left`](#title-left)\n\t- [`title-top`](#title-top)\n- [Methods](#methods)\n\t- [`setAttribute`](#setattribute)\n\t- [`get_data_url`](#get_data_url)\n- [Events](#events)\n\t- [`feidao-web事件绑定示例`](#feidao-web事件绑定示例)\n\t- [`fdwe-click`](#fdwe-click)\n- [Example](#example)\n\t- [`html`](#html)\n\t- [`js`](#js)\n\n<!-- /TOC -->\n\n<https://dfeidao.gitee.io/widgets/>\n\n## Installation\n\n```sh\nyarn add --dev @dfeidao/fd-wh000020\n```\n\n## Tag\n\n> value 属性是必传的, 控件的宽高必须设定\n\n```html\n<fd-wh000020></fd-wh000020>\n```\n\n## Attributes\n\n### `value`\n\n渲染嵌入环图的数据\n\n数据有关联时,外环是内环的子集,会将外环的数据根据内环的排序进行排序.传入的数据示例如下.\n关联字段id-field,pid-field的值与vule中的值一致.\n例:\n\n```doc\nno: 为一个扇区数据的唯一标识, key值由id-field指定.\nparent: 扇区的父节点, key值由pid-field指定. 根节点的parent值固定为`root`\nname:该扇区数据的名称.\nvalue:该扇区数据的值.\ncolor:该扇区的显示的颜色,如果该字段没有传入则随机一个颜色.\n```\n\n```html\n <fd-wh000020 style=\"width: 40em;height: 20em;\" id-field='no' pid-field='parent' value='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]'></fd-wh000020>\n```\n\n当没有关联时无需构造联动字段id-field,pid-field且无需传.\n数据类型为二维数组,二维数组里的第一个数组为最内环图的数据,由内往外以此类推.\n例:\n\n```html\n <fd-wh000020 style=\"width: 40em;height: 20em;\" value='[[{\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"}],[{\"name\":\"#2\",\"value\":335},{\"name\":\"#1\",\"value\":810},{\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"name\":\"#4\",\"value\":222},{\"name\":\"#3\",\"value\":1548}]]'></fd-wh000020>\n```\n\n### `theme`\n\n嵌入环形图的主题，可选值为'dark','infographic','macarons','roma','shine','vintage'。。\n示例:\n\n```text\ntheme = \"macarons\"\n```\n\n### `legend-type`\n\n图例的类型。可选值：'plain'：普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用.\n示例:\n\n```text\nlegend-type = \"scroll\"\n```\n\n### `legend-hide`\n\n是否隐藏图例组件。图例默认是显示的，如果设置了该属性则图例隐藏。( true )\n\n```html\n<fd-wh000020 legend-hide></fd-wh000020>\n```\n\n### `lengend-number`\n\n图例显示对应项的数值。\n\n```html\n<fd-wh000020 lengend-number></fd-wh000020>\n```\n\n### `legend-position`\n\n图例组件在容器中显示的位置，可选值为'1', '2', '3', '4'，分别对应 '左上角', '右上角', '右下角', '左下角'。\n示例\n\n```text\nlegend-position = \"2\"\n```\n\n### `legend-orient`\n\n图例列表的布局朝向。可选值为'horizontal' 水平，'vertical' 垂直。\n示例\n\n```text\nlegend-orient = \"horizontal\"\n```\n\n### `tooltip-show`\n\n是否显示提示框组件，包括提示框浮层和 axisPointer。\n\n### `series-name`\n\n系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。\n示例\n\n```text\nseries-name = \"xx\"\n```\n\n### `series-rose`\n\n是否展示成南丁格尔图，通过半径区分数据大小。只要组件具有该属性则展示成南丁格尔图\n\n### `series-center-w`\n\n嵌入环形图的中心（圆心）横坐标相对于容器宽度的百分比。用于定位嵌入环形图展示的位置。\n\n### `series-center-h`\n\n嵌入环形图的中心（圆心）纵坐标相对于容器高度的百分比。\n\n### `tooltip-formatter`\n\n提示框浮层内容。可选值为'1', '2', 也可以传入字符串模板。不设置该值则不显示提示框\n\n1. 数据项名称 : 数值 (百分比)\n2. 系列名称 数据项名称 : 数值 (百分比)\n\n所有dot支持的模板{{=it.name}}\n`<br/>`换行\n示例\n\n```html\n<fd-wh000020 tooltip-formatter='1'></fd-wh000020>\n```\n\n```html\n<fd-wh000020 tooltip-formatter='2'></fd-wh000020>\n```\n\n传入字符串模板示例:\n\n```html\n<fd-wh000020 tooltip-formatter='{{=it.name}} {a} <br/>{b} : {c} ({d}%)'></fd-wh000020>\n```\n\n### `show-label`\n\n是否显示标签，当组件上存在该属性时显示标签。\n\n\n### `label-position`\n\n定位标签显示的位置,目前除最外环图能控制外,内环图只采用'inner'形式,可选'outside','inner','center'。对应嵌入环形图的，'外侧'，'嵌入环形图扇区内部'，'嵌入环形图中心'\n示例\n\n```text\nlabel-position = \"outside\"\n```\n\n### `label-formatter`\n\n标签的字符串模板，可选。\n\n```doc\n字符串模板 模板变量有：\n\n{a}：系列名。\n{b}：数据名。\n{c}：数据值。\n{d}：数据值的百分比数。\n\n所有dot支持的模板{{=it.name}}\n\\n换行\n```\n\n示例:\n\n```html\n<fd-wh000020 label-formatter=\"{a} \\n {c} \\n {{=it.name}} \\n {{=it.percent}} %\" />\n```\n\n### `min-radius`\n\n最内环图的外半径,通过外半径设置起始环图的大小,指定的大小数值为百分比大小.\n\n```text\nmin-radius = \"20\"\n```\n\n### `border-color`\n\n每个扇区的边框颜色设置,与背景色设置相同可以达成透明的效果.\n\n```text\nborder-color = '#F8F8FF'\n```\n\n### `min-ring-width`\n\n最内圆的环宽度设置,设置的数值为百分比大小.\n\n```text\nmin-ring-width = '10'\n```\n\n### `ring-conf`\n\n每个环图的配置项,数据格式为对象数组,配置顺序从内到外,数组里的第一个对象为最内的环图,以此类推.优先生效每个环图各自的配置项,当它们各自的配置项没有传入时,使用公共的配置项.公共的配置项为传入的属性.例如: series-name='访问来源'\n\n```doc\n提供配置项参数如下:\n\nlabel_formatter: 每个环单独的formatter,不存在时使用属性label-formatter.\nseries_name: 系名称, 不存在时使用series-name属性.\nshow_label: 显示标签,不存在时使用show-label属性.\nclearance: 当前环与外围环的间隙大小,指定的数值大小为百分比的大小.[defalut: \"1\"]\nring_width: 当前环图的环宽度,指定的数值大小为百分比的大小.[defalut: \"20\"]\nborder_width: 每个环图边框的宽度.[defalut: 2]\nall_ring_color: 该环形全部扇区的颜色设置,与all-ring-color属性同时配置时该属性优先生效.与value属性里的color同时配置时,color优先生效.\n```\n\n示例:\n\n```html\n<fd-wh000020 ring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true},{\"clearance\":\"1\",\"ring_width\":\"20\", \"border_width\":0,\"all_ring_color\":\"red\"}]' />\n```\n\n### `all-ring-color`\n\n设置环形图每个扇区的颜色,改参数不能与value属性里的color同时设置,value属性里的color设置与该属性同时设置时,color参宿优先生效.\n\n示例:\n\n```html\n<fd-wh000020 all-ring-color='#f65b2c' />\n```\n\n### `show-title`\n\n是否显示title,传入显示不传不显示\n\n```html\n<fd-wh000020 show-title />\n```\n\n### `subtext`\n\n副文本标题\n\n```html\n<fd-wh000020 subtext='20.7%' />\n```\n\n### `subtext-color`\n\n副文本标题颜色\n\n```html\n<fd-wh000020 subtext-color='#2cc8f6' />\n```\n\n### `text`\n\n文本标题\n\n```html\n<fd-wh000020 text='负载率' />\n```\n\n### `text-color`\n\n文本标题颜色\n\n```html\n<fd-wh000020 text-color='#aaa' />\n```\n\n### `text-font`\n\n标题文本字体大小\n\n```html\n<fd-wh000020 text-font='18' />\n```\n\n### `subtext-font`\n\n副标题文本字体大小\n\n```html\n<fd-wh000020 subtext-font='18' />\n```\n\n### `legend-text-color`\n\n图例的文本颜色\n\n```html\n<fd-wh000020 legend-text-color='red' />\n```\n\n### `title-left`\n\n控件内文本标题距离控件左侧边的距离,可以设置成百分比数，像素px\n\n```html\n<fd-wh000020 title-x='50%' />\n```\n\n### `title-top`\n\n控件内文本标题距离顶部的距离，可以设置成百分比数，像素px\n\n```html\n<fd-wh000020 title-y='50%' />\n```\n\n## Methods\n\n### `setAttribute`\n\n`设置控件属性值`\n\n以下属性的改变控件会发生改变\n\n> `value`    渲染图表的数据。\n\n```ts\nwidget_node.setAttribute('value', '[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]')\n```\n\n### `get_data_url`\n\n> 无参数，返回一个 base64 的 URL，可以设置为Image的src。\n\n导出图表图片\n\n```html\n<button id=\"fd-wh000020-002\">get_img</button>\n<img id=\"fd-wh000020-003\" src=\"\" />\n<fd-wh000020 id=\"fd-wh000020-001\" style=\"width: 40em;height: 20em;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tlegend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\" lengend-number label-position=\"outside\"\n\t\tlabel-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label min-ring-width='30' min-radius='45'\n\t\tborder-color='#F8F8FF' id-field='no' pid-field='parent'\n\t\tvalue='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n```\n\n```javascript\nconst fd_wh000020_001 = document.querySelector('#fd-wh000020-001');\nconst fd_wh000020_002 = document.querySelector('#fd-wh000020-002');\nconst fd_wh000020_003 = document.querySelector('#fd-wh000020-003');\n\nfd_wh000020_002.addEventListener('click', () => {\n    const src = fd_wh000020_001.get_data_url();\n    fd_wh000020_003.src = src;\n});\n```\n\n## Events\n\n### `feidao-web事件绑定示例`\n\n```html\n<fd-wh000020 data-feidao-actions=\"fdwe-click:a001\" label-type=3 legend-position='1'\n\t\tlegend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\" lengend-number label-position=\"outside\"\n\t\tlabel-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label min-ring-width='30' min-radius='45'\n\t\tborder-color='#F8F8FF' id-field='no' pid-field='parent'\n\t\tvalue='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n```\n\n### `fdwe-click`\n\n点击事件,返回点击节点的Event，可以通过 name 和 value 属性，分别获得点击项名称和值\n\n```html\n<fd-wh000020 id=\"fd-wh000020-004\" style=\"width: 40em;height: 20em;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tlegend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\" lengend-number label-position=\"outside\"\n\t\tlabel-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label min-ring-width='30' min-radius='45'\n\t\tborder-color='#F8F8FF' id-field='no' pid-field='parent' title-x='50' title-y='50'\n\t\tvalue='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n```\n\n```javascript\nconst fd_wh000020_004 = document.querySelector('#fd-wh000020-004');\n\nfd_wh000020_004.addEventListener('fdwe-click', (e) => {\n    console.log('---------- click -------', e.name, e.value);\n});\n```\n\n## Example\n\n### `html`\n\n嵌套环图1\n\n```html\n<img id=\"fd-wh000020-006\" scr=\"\"/>\n<button id=\"fd-wh000020-007\">get_img</button>\n<button id=\"fd-wh000020-008\">change_data</button>\n<fd-wh000020 id=\"fd-wh000020-005\" style=\"width: 400px;height: 200px;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tseries-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\"\n\t\tlengend-number label-position=\"outside\" label-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label\n\t\tmin-ring-width='30' min-radius='45' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'\n\t\tsub_text='20.7%' title-x='50' title-y='50'\n\t\tvalue='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n```\n\n嵌套环图2\n\n```html\n<fd-wh000020 id=\"fd-wh000020-005\" style=\"width: 400px;height: 200px;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tseries-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\"\n\t\tlengend-number label-position=\"outside\" label-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label\n\t\tmin-ring-width='20' min-radius='45' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'\n\t\tall-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'\n\t\tvalue='[[{\"value\":950,\"name\":\"一楼电量\"},{\"value\":2380,\"name\":\"二楼电量\"},{\"value\":800,\"name\":\"三楼电量\"},{\"value\":550,\"name\":\"四楼电量\"}],[{\"name\":\"#2\",\"value\":335},{\"name\":\"#1\",\"value\":810},{\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"name\":\"#4\",\"value\":222},{\"name\":\"#3\",\"value\":1548}]]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true,\"border_width\": 0,\"all_ring_color\":\"\"},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n\n```\n\n环图1\n\n```html\n<fd-wh000020 id=\"fd-wh000020-005\" style=\"width: 400px;height: 200px;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tseries-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\"\n\t\tlengend-number label-position=\"outside\" label-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label\n\t\tmin-ring-width='10' min-radius='75' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'\n\t\tall-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'\n\t\tvalue='[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#2cc9f6\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\"}]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true,\"border_width\": 0,\"all_ring_color\":\"#aaa\"},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n```\n\n环图2\n\n```html\n<fd-wh000020 id=\"fd-wh000020-005\" style=\"width: 400px;height: 200px;\" theme=\"macarons\" label-type=3 legend-position='1'\n\t\tseries-center-h='50%' series-center-w='50%' legend-orient='vertical' tooltip-formatter=\"{a} <br>{b}<br> {c} {d}\"\n\t\tlengend-number label-position=\"outside\" label-formatter=\"{a}\\n {b} \\n{c} \\n{d}%\" series-name='访问来源' show-label\n\t\tmin-ring-width='10' min-radius='75' border-color='#F8F8FF' id-field='no' pid-field='parent' show-title legend-text-color='black'\n\t\tall-ring-color='#f65b2c' subtext='20.7%' text='负载率' text-color='#aaa' subtext-color='#2cc8f6' title-x='50' title-y='50'\n\t\tvalue='[[{\"value\":950,\"name\":\"一楼电量\",\"color\":\"#2cc9f6\"},{\"value\":2380,\"name\":\"二楼电量\"},{\"value\":800,\"name\":\"三楼电量\"},{\"value\":550,\"name\":\"四楼电量\"}],[{\"name\":\"#2\",\"value\":335},{\"name\":\"#1\",\"value\":810},{\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"name\":\"#4\",\"value\":222},{\"name\":\"#3\",\"value\":1548}]]'\n\t\tring-conf='[{\"formatter\":\"{b}\",\"series_name\":\"访问来源1\",\"show_label\":true,\"border_width\": 0,\"all_ring_color\":\"#aaa\"},{\"clearance\":\"1\",\"ring_width\":\"20\",\"border_width\": 2}]'>\n</fd-wh000020>\n\n```\n\n### `js`\n\n```javascript\nconst fd_wh000020_005 = document.querySelector('#fd-wh000020-005');\nconst fd_wh000020_007 = document.querySelector('#fd-wh000020-007');\nconst fd_wh000020_006 = document.querySelector('#fd-wh000020-006');\nconst fd_wh000020_008 = document.querySelector('#fd-wh000020-008');\n\nfd_wh000020_005.addEventListener('fdwe-click', (e) => {\n    console.log('---------- click -------', e.name, e.value);\n});\nfd_wh000020_007.addEventListener('click', () => {\n    const src = fd_wh000020_005.get_data_url();\n    fd_wh000020_006.src = src;\n});\nfd_wh000020_008.addEventListener('click', () => {\n    fd_wh000020_005.setAttribute('value', '[{\"no\":\"1\",\"parent\":\"root\",\"value\":950,\"name\":\"一楼电量\",\"color\":\"#708090\"},{\"no\":\"2\",\"parent\":\"root\",\"value\":2380,\"name\":\"二楼电量\",\"color\":\"pink\"},{\"no\":\"3\",\"parent\":\"root\",\"value\":800,\"name\":\"三楼电量\",\"color\":\"pink\"},{\"no\":\"4\",\"parent\":\"root\",\"value\":550,\"name\":\"四楼电量\",\"color\":\"green\"},{\"no\":\"131\",\"parent\":\"2\",\"name\":\"#2\",\"value\":335},{\"no\":\"4131\",\"parent\":\"1\",\"name\":\"#1\",\"value\":810},{\"no\":\"1312\",\"parent\":\"2\",\"name\":\"#2_2\",\"value\":600,\"color\":\"pink\"},{\"no\":\"1313\",\"parent\":\"4\",\"name\":\"#4\",\"value\":222},{\"no\":\"4134\",\"parent\":\"3\",\"name\":\"#3\",\"value\":1548}]');\n});\n\n```\n","readmeFilename":"readme.md"}