三元环并排带图ECharts Gallery

20:11:45图表已生成
代码
var chartData = [90.83, 11.36,7.12]
var datas=[];

var image1="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMjYgMzIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjMgKDU3NTQ0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAxMCBDb3B5IDQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMjYuOTQyOCAxNy4zNzggMjYuOTQyOCAxNy4zNzggLTAuMDAwMiAwIC0wLjAwMDIiPjwvcG9seWdvbj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLplKbpsqTnuqLmqKHmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02OS4wMDAwMDAsIC0yMTAyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTAtQ29weS00IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4Mi4wNzQ1MDYsIDIxMTcuNzY0MDMyKSByb3RhdGUoLTIwLjAwMDAwMCkgdHJhbnNsYXRlKC04Mi4wNzQ1MDYsIC0yMTE3Ljc2NDAzMikgdHJhbnNsYXRlKDczLjA3NDUwNiwgMjEwNC4yNjQwMzIpIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjE1MDgsMTMuNDA1MyBMOS4xNTA4LDEzLjAxMDMgQzkuMTUwOCwxMS43ODIzIDEwLjc0NTgsMTAuOTYyMyAxMy40MDM4LDkuODM1MyBDMTQuNDE2OCw5LjQwNTMgMTQuOTEyOCw4LjIxNzMgMTUuMTQxOCw2LjkxMTMgQzEzLjgzMjgsNy45MDUzIDExLjkxMzgsOC44NTczIDkuNjIyOCw4LjQzMDMgQzcuMzI0OCw4LjAwMzMgNC4xODI4LDcuMzAwMyAxLjYyMzgsNy4zNTQzIEMxLjg4MzgsOC40NzgzIDIuMzcxOCw5LjQ1NTMgMy4yNjc4LDkuODM1MyBDNS45MjU4LDEwLjk2MjMgNy41MjA4LDExLjc4MjMgNy41MjA4LDEzLjAxMDMgTDcuNTIwOCwxMy40MDczIEM4LjA0MTgsMTMuNDIzMyA4LjU4NzgsMTMuNDIyMyA5LjE1MDgsMTMuNDA1MyIgaWQ9IkZpbGwtMSIgZmlsbD0iIzMwQjdEMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTguMzM2MywxNy44MjYyIEM4LjMzNjMsMTcuODI2MiAzLjk2NjMsMjAuNjMyMiAxLjkzMzMsMjQuNTg2MiBMMTQuNzM4MywyNC41ODYyIEMxMi43MDYzLDIwLjYzMjIgOC4zMzYzLDE3LjgyNjIgOC4zMzYzLDE3LjgyNjIiIGlkPSJGaWxsLTMiIGZpbGw9IiMzMEI3RDIiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xLjg4NDEsMjQuMTQ4MyBMMTQuNzg3MSwyNC4xNDgzIEMxNC45ODkxLDIyLjI1NTMgMTUuMDI3MSwxOC4yNzIzIDEzLjIzMzEsMTcuNTExMyBDMTAuNTg2MSwxNi4zODgzIDguNzEzMSwxNS40NzUzIDguNzEzMSwxMy45MzMzIEw4LjcxMzEsMTMuMDEwMyBDOC43MTMxLDExLjQ2ODMgMTAuNTg2MSwxMC41NTQzIDEzLjIzMzEsOS40MzEzIEMxNS4wMjcxLDguNjcxMyAxNC45ODkxLDQuNjg4MyAxNC43ODcxLDIuNzk1MyBMMS44ODQxLDIuNzk1MyBDMS42ODIxLDQuNjg4MyAxLjY0NTEsOC42NzEzIDMuNDM5MSw5LjQzMTMgQzYuMDg1MSwxMC41NTQzIDcuOTU4MSwxMS40NjgzIDcuOTU4MSwxMy4wMTAzIEw3Ljk1ODEsMTMuOTMzMyBDNy45NTgxLDE1LjQ3NTMgNi4wODUxLDE2LjM4ODMgMy40MzkxLDE3LjUxMTMgQzEuNjQ1MSwxOC4yNzIzIDEuNjgyMSwyMi4yNTUzIDEuODg0MSwyNC4xNDgzIFogTTE1LjU1NjEsMjUuMDI0MyBMMS4xMTUxLDI1LjAyNDMgTDEuMDYyMSwyNC42NDYzIEMxLjAyNDEsMjQuMzc0MyAwLjE2MzEsMTcuOTQ4MyAzLjA5NjEsMTYuNzA1MyBDNS43NDAxLDE1LjU4MzMgNy4wODIxLDE0Ljg0NzMgNy4wODIxLDEzLjkzMzMgTDcuMDgyMSwxMy4wMTAzIEM3LjA4MjEsMTIuMDk2MyA1Ljc0MDEsMTEuMzU5MyAzLjA5NjEsMTAuMjM4MyBDMC4xNjMxLDguOTk1MyAxLjAyNDEsMi41NjkzIDEuMDYyMSwyLjI5NzMgTDEuMTE1MSwxLjkxOTMgTDE1LjU1NjEsMS45MTkzIEwxNS42MDkxLDIuMjk3MyBDMTUuNjQ3MSwyLjU2OTMgMTYuNTA5MSw4Ljk5NTMgMTMuNTc1MSwxMC4yMzgzIEMxMC45MzExLDExLjM1OTMgOS41ODkxLDEyLjA5NjMgOS41ODkxLDEzLjAxMDMgTDkuNTg5MSwxMy45MzMzIEM5LjU4OTEsMTQuODQ3MyAxMC45MzExLDE1LjU4MzMgMTMuNTc1MSwxNi43MDUzIEMxNi41MDkxLDE3Ljk0ODMgMTUuNjQ3MSwyNC4zNzQzIDE1LjYwOTEsMjQuNjQ2MyBMMTUuNTU2MSwyNS4wMjQzIFoiIGlkPSJGaWxsLTUiIGZpbGw9IiMzQzNDM0MiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXAtOCI+PC9nPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtNyIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjAgMjYuOTQyOCAxNy4zNzggMjYuOTQyOCAxNy4zNzggMjYuMDY2OCAwIDI2LjA2NjgiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJGaWxsLTkiIGZpbGw9IiMzQzNDM0MiIG1hc2s9InVybCgjbWFzay0yKSIgcG9pbnRzPSIwIDAuODc1OCAxNy4zNzggMC44NzU4IDE3LjM3OCAtMC4wMDAyIDAgLTAuMDAwMiI+PC9wb2x5Z29uPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=";
var image2="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgMjEgMjkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjMgKDU3NTQ0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAxMCBDb3B5IDg8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMjYuOTQyOCAxNy4zNzggMjYuOTQyOCAxNy4zNzggLTAuMDAwMiAwIC0wLjAwMDIiPjwvcG9seWdvbj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLplKbpsqTnuqLmqKHmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODAuMDAwMDAwLCAtMjEwNC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwLUNvcHktOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTkwLjU3ODE1MiwgMjExOC40OTYxOTcpIHJvdGF0ZSg3LjAwMDAwMCkgdHJhbnNsYXRlKC0xOTAuNTc4MTUyLCAtMjExOC40OTYxOTcpIHRyYW5zbGF0ZSgxODEuNTc4MTUyLCAyMTA0Ljk5NjE5NykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTUwOCwxMy40MDUzIEw5LjE1MDgsMTMuMDEwMyBDOS4xNTA4LDExLjc4MjMgMTAuNzQ1OCwxMC45NjIzIDEzLjQwMzgsOS44MzUzIEMxNC40MTY4LDkuNDA1MyAxNC45MTI4LDguMjE3MyAxNS4xNDE4LDYuOTExMyBDMTMuODMyOCw3LjkwNTMgMTEuOTEzOCw4Ljg1NzMgOS42MjI4LDguNDMwMyBDNy4zMjQ4LDguMDAzMyA0LjE4MjgsNy4zMDAzIDEuNjIzOCw3LjM1NDMgQzEuODgzOCw4LjQ3ODMgMi4zNzE4LDkuNDU1MyAzLjI2NzgsOS44MzUzIEM1LjkyNTgsMTAuOTYyMyA3LjUyMDgsMTEuNzgyMyA3LjUyMDgsMTMuMDEwMyBMNy41MjA4LDEzLjQwNzMgQzguMDQxOCwxMy40MjMzIDguNTg3OCwxMy40MjIzIDkuMTUwOCwxMy40MDUzIiBpZD0iRmlsbC0xIiBmaWxsPSIjMzBCN0QyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOC4zMzYzLDE3LjgyNjIgQzguMzM2MywxNy44MjYyIDMuOTY2MywyMC42MzIyIDEuOTMzMywyNC41ODYyIEwxNC43MzgzLDI0LjU4NjIgQzEyLjcwNjMsMjAuNjMyMiA4LjMzNjMsMTcuODI2MiA4LjMzNjMsMTcuODI2MiIgaWQ9IkZpbGwtMyIgZmlsbD0iIzMwQjdEMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTEuODg0MSwyNC4xNDgzIEwxNC43ODcxLDI0LjE0ODMgQzE0Ljk4OTEsMjIuMjU1MyAxNS4wMjcxLDE4LjI3MjMgMTMuMjMzMSwxNy41MTEzIEMxMC41ODYxLDE2LjM4ODMgOC43MTMxLDE1LjQ3NTMgOC43MTMxLDEzLjkzMzMgTDguNzEzMSwxMy4wMTAzIEM4LjcxMzEsMTEuNDY4MyAxMC41ODYxLDEwLjU1NDMgMTMuMjMzMSw5LjQzMTMgQzE1LjAyNzEsOC42NzEzIDE0Ljk4OTEsNC42ODgzIDE0Ljc4NzEsMi43OTUzIEwxLjg4NDEsMi43OTUzIEMxLjY4MjEsNC42ODgzIDEuNjQ1MSw4LjY3MTMgMy40MzkxLDkuNDMxMyBDNi4wODUxLDEwLjU1NDMgNy45NTgxLDExLjQ2ODMgNy45NTgxLDEzLjAxMDMgTDcuOTU4MSwxMy45MzMzIEM3Ljk1ODEsMTUuNDc1MyA2LjA4NTEsMTYuMzg4MyAzLjQzOTEsMTcuNTExMyBDMS42NDUxLDE4LjI3MjMgMS42ODIxLDIyLjI1NTMgMS44ODQxLDI0LjE0ODMgWiBNMTUuNTU2MSwyNS4wMjQzIEwxLjExNTEsMjUuMDI0MyBMMS4wNjIxLDI0LjY0NjMgQzEuMDI0MSwyNC4zNzQzIDAuMTYzMSwxNy45NDgzIDMuMDk2MSwxNi43MDUzIEM1Ljc0MDEsMTUuNTgzMyA3LjA4MjEsMTQuODQ3MyA3LjA4MjEsMTMuOTMzMyBMNy4wODIxLDEzLjAxMDMgQzcuMDgyMSwxMi4wOTYzIDUuNzQwMSwxMS4zNTkzIDMuMDk2MSwxMC4yMzgzIEMwLjE2MzEsOC45OTUzIDEuMDI0MSwyLjU2OTMgMS4wNjIxLDIuMjk3MyBMMS4xMTUxLDEuOTE5MyBMMTUuNTU2MSwxLjkxOTMgTDE1LjYwOTEsMi4yOTczIEMxNS42NDcxLDIuNTY5MyAxNi41MDkxLDguOTk1MyAxMy41NzUxLDEwLjIzODMgQzEwLjkzMTEsMTEuMzU5MyA5LjU4OTEsMTIuMDk2MyA5LjU4OTEsMTMuMDEwMyBMOS41ODkxLDEzLjkzMzMgQzkuNTg5MSwxNC44NDczIDEwLjkzMTEsMTUuNTgzMyAxMy41NzUxLDE2LjcwNTMgQzE2LjUwOTEsMTcuOTQ4MyAxNS42NDcxLDI0LjM3NDMgMTUuNjA5MSwyNC42NDYzIEwxNS41NTYxLDI1LjAyNDMgWiIgaWQ9IkZpbGwtNSIgZmlsbD0iIzNDM0MzQyI+PC9wYXRoPgogICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ2xpcC04Ij48L2c+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iRmlsbC03IiBmaWxsPSIjM0MzQzNDIiBtYXNrPSJ1cmwoI21hc2stMikiIHBvaW50cz0iMCAyNi45NDI4IDE3LjM3OCAyNi45NDI4IDE3LjM3OCAyNi4wNjY4IDAgMjYuMDY2OCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtOSIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjAgMC44NzU4IDE3LjM3OCAwLjg3NTggMTcuMzc4IC0wLjAwMDIgMCAtMC4wMDAyIj48L3BvbHlnb24+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";
var image3="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMXB4IiB2aWV3Qm94PSIwIDAgMzIgMzEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjMgKDU3NTQ0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAxMCBDb3B5IDk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cG9seWdvbiBpZD0icGF0aC0xIiBwb2ludHM9IjAgMjYuOTQyOCAxNy4zNzggMjYuOTQyOCAxNy4zNzggLTAuMDAwMiAwIC0wLjAwMDIiPjwvcG9seWdvbj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLplKbpsqTnuqLmqKHmnb8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yODAuMDAwMDAwLCAtMjEwMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwLUNvcHktOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjk2LjA1NDYzMSwgMjExNy43MjE1NjcpIHJvdGF0ZSg0OC4wMDAwMDApIHRyYW5zbGF0ZSgtMjk2LjA1NDYzMSwgLTIxMTcuNzIxNTY3KSB0cmFuc2xhdGUoMjg3LjA1NDYzMSwgMjEwNC4yMjE1NjcpIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjE1MDgsMTMuNDA1MyBMOS4xNTA4LDEzLjAxMDMgQzkuMTUwOCwxMS43ODIzIDEwLjc0NTgsMTAuOTYyMyAxMy40MDM4LDkuODM1MyBDMTQuNDE2OCw5LjQwNTMgMTQuOTEyOCw4LjIxNzMgMTUuMTQxOCw2LjkxMTMgQzEzLjgzMjgsNy45MDUzIDExLjkxMzgsOC44NTczIDkuNjIyOCw4LjQzMDMgQzcuMzI0OCw4LjAwMzMgNC4xODI4LDcuMzAwMyAxLjYyMzgsNy4zNTQzIEMxLjg4MzgsOC40NzgzIDIuMzcxOCw5LjQ1NTMgMy4yNjc4LDkuODM1MyBDNS45MjU4LDEwLjk2MjMgNy41MjA4LDExLjc4MjMgNy41MjA4LDEzLjAxMDMgTDcuNTIwOCwxMy40MDczIEM4LjA0MTgsMTMuNDIzMyA4LjU4NzgsMTMuNDIyMyA5LjE1MDgsMTMuNDA1MyIgaWQ9IkZpbGwtMSIgZmlsbD0iIzMwQjdEMiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTguMzM2MywxNy44MjYyIEM4LjMzNjMsMTcuODI2MiAzLjk2NjMsMjAuNjMyMiAxLjkzMzMsMjQuNTg2MiBMMTQuNzM4MywyNC41ODYyIEMxMi43MDYzLDIwLjYzMjIgOC4zMzYzLDE3LjgyNjIgOC4zMzYzLDE3LjgyNjIiIGlkPSJGaWxsLTMiIGZpbGw9IiMzMEI3RDIiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xLjg4NDEsMjQuMTQ4MyBMMTQuNzg3MSwyNC4xNDgzIEMxNC45ODkxLDIyLjI1NTMgMTUuMDI3MSwxOC4yNzIzIDEzLjIzMzEsMTcuNTExMyBDMTAuNTg2MSwxNi4zODgzIDguNzEzMSwxNS40NzUzIDguNzEzMSwxMy45MzMzIEw4LjcxMzEsMTMuMDEwMyBDOC43MTMxLDExLjQ2ODMgMTAuNTg2MSwxMC41NTQzIDEzLjIzMzEsOS40MzEzIEMxNS4wMjcxLDguNjcxMyAxNC45ODkxLDQuNjg4MyAxNC43ODcxLDIuNzk1MyBMMS44ODQxLDIuNzk1MyBDMS42ODIxLDQuNjg4MyAxLjY0NTEsOC42NzEzIDMuNDM5MSw5LjQzMTMgQzYuMDg1MSwxMC41NTQzIDcuOTU4MSwxMS40NjgzIDcuOTU4MSwxMy4wMTAzIEw3Ljk1ODEsMTMuOTMzMyBDNy45NTgxLDE1LjQ3NTMgNi4wODUxLDE2LjM4ODMgMy40MzkxLDE3LjUxMTMgQzEuNjQ1MSwxOC4yNzIzIDEuNjgyMSwyMi4yNTUzIDEuODg0MSwyNC4xNDgzIFogTTE1LjU1NjEsMjUuMDI0MyBMMS4xMTUxLDI1LjAyNDMgTDEuMDYyMSwyNC42NDYzIEMxLjAyNDEsMjQuMzc0MyAwLjE2MzEsMTcuOTQ4MyAzLjA5NjEsMTYuNzA1MyBDNS43NDAxLDE1LjU4MzMgNy4wODIxLDE0Ljg0NzMgNy4wODIxLDEzLjkzMzMgTDcuMDgyMSwxMy4wMTAzIEM3LjA4MjEsMTIuMDk2MyA1Ljc0MDEsMTEuMzU5MyAzLjA5NjEsMTAuMjM4MyBDMC4xNjMxLDguOTk1MyAxLjAyNDEsMi41NjkzIDEuMDYyMSwyLjI5NzMgTDEuMTE1MSwxLjkxOTMgTDE1LjU1NjEsMS45MTkzIEwxNS42MDkxLDIuMjk3MyBDMTUuNjQ3MSwyLjU2OTMgMTYuNTA5MSw4Ljk5NTMgMTMuNTc1MSwxMC4yMzgzIEMxMC45MzExLDExLjM1OTMgOS41ODkxLDEyLjA5NjMgOS41ODkxLDEzLjAxMDMgTDkuNTg5MSwxMy45MzMzIEM5LjU4OTEsMTQuODQ3MyAxMC45MzExLDE1LjU4MzMgMTMuNTc1MSwxNi43MDUzIEMxNi41MDkxLDE3Ljk0ODMgMTUuNjQ3MSwyNC4zNzQzIDE1LjYwOTEsMjQuNjQ2MyBMMTUuNTU2MSwyNS4wMjQzIFoiIGlkPSJGaWxsLTUiIGZpbGw9IiMzQzNDM0MiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsaXAtOCI+PC9nPgogICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtNyIgZmlsbD0iIzNDM0MzQyIgbWFzaz0idXJsKCNtYXNrLTIpIiBwb2ludHM9IjAgMjYuOTQyOCAxNy4zNzggMjYuOTQyOCAxNy4zNzggMjYuMDY2OCAwIDI2LjA2NjgiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJGaWxsLTkiIGZpbGw9IiMzQzNDM0MiIG1hc2s9InVybCgjbWFzay0yKSIgcG9pbnRzPSIwIDAuODc1OCAxNy4zNzggMC44NzU4IDE3LjM3OCAtMC4wMDAyIDAgLTAuMDAwMiI+PC9wb2x5Z29uPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=";
for (var i = 0; i < chartData.length; ++i) {
    datas.push(chartData[i]/100);
}
var chartName = ['2016', '2017', '2018']
var radius = [0.3];

var colors = ['#317FFF', '#A1D4FF'];
var top = 0.5;
placeHolderStyle = {
    normal: {
        label: {
            show: false,
            position: "center"
        },
        labelLine: {
            show: false
        },
        color: '#e4e4e4',
        opacity: 1,
    }
};
var series = [];
var titles = [];
var graphic = [];
for (var i = 0; i < datas.length; ++i) {
    titles.push({
            text: chartData[i] + '%',
            left: 'center',
            top: '63%',
            left: i * 25 + 21 + '%',
            textStyle: {
                color: '#317FFF',
                fontSize: 20,
                fontWeight: 'normal',

            }
        }, {
            text: chartName[i]+'年',
            left: 'center',
            top: '67%',
            left: i * 25 + 21.5 + '%',
            textStyle: {
                color: 'gray',
                fontSize: 14,
                fontWeight: '100',
            }
        }

    );
    series.push({
        type: 'pie',
        silent: true,
        radius: [50, radius[0] * 80 + '%'],
        label: {
            normal: {
                show: false,
            }
        },
        color: [colors[0]],
        center: [i * 25 + 25 + '%', (top) * 100 + '%'],
        data: [{
            value: datas[i],
            name: '01',
            itemStyle: {
                normal: {
                    color: colors[0],
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                } 
            }
        }, {
            name: '02',
            value: 1-datas[i],
             itemStyle: placeHolderStyle
        }]
    });
}

myChart.setOption({
    title: titles,
    series: series,
    backgroundColor: '#fff',
    graphic:  {
				elements: [{
					type: 'image',
					style: {
						image: image1,
						width: 80,
						height: 80
					},
					left: 0 * 25 + 21 + '%',
					top: 'center'
				},
				{
					type: 'image',
					style: {
						image: image2,
						width: 70,
						height: 75
					},
					left: 1 * 25 + 21 + '%',
					top: 'center'
				},
				{
					type: 'image',
					style: {
						image: image3,
						width: 80,
						height: 80
					},
					left: 2 * 25 + 21 + '%',
					top: 'center'
				}
				]
			},


});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
