echarts5.x 词云图使用(`[ECharts] Unkown series wordCloud`) | 您所在的位置:网站首页 › 帅气和平精英男生头像高清图片 › echarts5.x 词云图使用(`[ECharts] Unkown series wordCloud`) |
目录echarts5.x 词云图使用([ECharts] Unkown series wordCloud)背景预期效果样例代码自定义形状动效
echarts5.x 词云图使用([ECharts] Unkown series wordCloud)
已发表博客:echarts5.x 词云图使用([ECharts] Unkown series wordCloud) 背景起先还庆幸自己 echarts 用的是 5.x 的版本,似乎可以少些麻烦 结果发现按照 echarts-wordcloud 描述的操作歩鄹,词云图并出不来…… 打开控制台,出现了报错:log.js:62 [ECharts] Unkown series wordCloud 估摸着就是引用不对,翻了几遍文档及网上的案例,都是那么简单的几步,并没有找到什么遗漏的操作 没有办法,就试着看看是不是引用有问题,我找了下 node_modules 目录,发现并没有 wordCloud 相关的包,居然引用也不报错?打印出来发现 undefined,找不到返回 undefined 似乎逻辑上也没什么问题…… 没装上就重新装一下咯,结果发现 cnpm install echarts-wordcloud 秒过,但依赖包并没有下载过来,npm install echarts-wordcloud 等了半天装了一堆毫不相干的东西,还报了个错…… 装不上……那就复制源码本地保存一份咯……去到 echarts-wordcloud 的 github,复制了 echarts-wordcloud.min.js 代码,存在了 utils 目录下,然后用相对路径引入进来,发现就行了…… 预期效果形状可以从 iconfont 找,下下来的图片可以通过在线工具转成 base64 格式然后在代码里引用 图片最好选纯黑色填充,120px 左右大小(我试了好多种图片,只有2种成功了,匹配度还不是很高,后续用到了再探索吧……) 参考:关于Echarts词云图自定义形状如何实现 let maskImage = new Image(); maskImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAADICAYAAABCmsWgAAAAAXNSR0IArs4c6QAAE3tJREFUeF7tXQnUdlMVflCGqNASkXmeRcak35+pTPWHiMg8ZB5SyZBYpYgyF6EylAj5DZF5qkRKZZkiIamQzKH16Fzr9XqHc+490z332Wvd9X1+9+y9z3Pu891zz9ln7ykgEQL/R2ACgFn7rtn6/vtZAH8fcj1u/v2a0gCdorQOqT/WCMwDYB0AawNYE8D01i1H3/hPAOcDuBDALwA870lvMjUiSTLokxj+MICJAPhzxQge8M1DwpAsvB6KYLOJiWkHkVokaQJpe9puBmCPSMQYhsorAC4GcDSA3KZkOwCYD8DnBzkvkrTnQa/jKd8YuwPYoE7jgG1OAPBNAPcFtGGjmtjsBYBTz8UB/FEksYGtjHuWMG+O7TLuDj/0SRS+WV6I7OcuAHiRGJQfA/jkMB/0Jok8OoHNTQPgIEMQXx/igV3GbYYoPwxsiG8LTjt5Ldlnaz0Ak32TZEEALwF4IHDHpN4eAc6pTzIrVfat8rnzPAB88z3p2aXVe8gxwwDdNwNYZZTNum+S/QFsCmA5APwgk6RFYDUAZwJ4b1o3Glu/zhDlnoaaZgLwMUMOLm+Pkl0BHO+bJLMAuNQQhKsUZKokHQKfMgRJ54Ffy38yRLnJUS2XbzltWtdcfE7HyV8ALAXgKd8k2dG81iu9PwUwaZw3+v9BEPgGgH2DaE6rlBuSnHpdYOFGRQoSZE6L+3tvIXZHjWvjOt16C4BbzFukV/dpALYZZ0z/3ysCvwGwrFeN+Snj/sV3+9ziitQHAaxqfs5V021ubq5h09aVJFsA+MEQxVzO28fGqO5pjMB/PIaRNHYmsIIDzMc893z4UL/Dkz3qIlHGiitJzhm1ngxgNwDHjbWqG5ogwDd5jJCSJj7m3pZTLOtpqgtJ5gDwV4vej1xztmivW4YjwKlHzhuEbRi7PwDgauC/bJ11IQl3KEculfUYXQwAVykk/hBg7NUx/tR1VhM/Gbhcbi0uJHH9UJyuhDBpayTD3sj5+GUAuHAiqY/AYQAOdG1uS5KZAXBZzlVmHLcG7aqwg/e/G8DlAJbpYN99dvlIAPvVUWhLEn4o8oOxjswP4P46DdXmNQS+A2B7YdEIAS4mcVGpltiSZHMATQLQSLJf1fKw2424H8BQDUl9BE6tudhB7BnScowtSQ4BcHB9P19ryZ3RSxrq6FrzHwHYpGud9tjfswDwD7yNkAvcOyEx+PN9ADYCcJ4tSfgWsTU2yqEtR2xG2nSkS/fwjwpP8knqIfBtc2RgVGsuLlXEWAvAwj03cyWXwY+wJcmN48KJHfqxtzk/4NCkk7cyiJSJGiRuCPB04ZfNQapBLRkhTEJU16DIaQZXfqBqbEsShi4v4ObryLsPB/Alj/pKU1VaZG+s8eEix6EAHu4xuJCJNeSxjup6+wiH/mbue8SVJAwl9hUzU9k+GcBOsdBrmR3+JVu5ZT6ndJd/xLkHwqjhFUzYDheL+DtzibnIxgB+0tvA5k3COP3nXKw43Msw+88BuNehTem38jDb2aV30mP/TgfAbwuSgkd0mwizpRzRr8CGJAxFfrCJ5TFt/2w2eXh8UwLwDcsQcUlcBIZuNtqQZPlIexy1Qgbi4hjFGjde541iSUYqBBg4OvQPkw1JeEieq1sxhEuenH51NTiSKyo3xABaNl5HYOwRdBuS8AzwHRFBZSpMEoVnV7omDL7j6owkDgJckJodANOxDhUbkvDVnyL2ih9QA9NOxsEviZVbBxyNTuJIR4ySII+O66sNSZh1gun2UwjDw/lW+X0K45Ftzq08ZlER59TWKiOLDUm4vDbydRS4a9zc4TTklMB2UqtnCMSxqZ3oiH2n07M2JCFuTwMYlP0uJqZXmpN5Q9NRxnQmgK1vmeTWAVRLZQ8C3Idi4Ki12JKE4doMHc5BGGzJY6w8KVmSjEuyUVJfU/WF53KcZyS2JGFEZe1DKwEQYR5iEoV/fXvjdAKYiqbyalOSLZrBjhn6DIAz6vTZliRbA/heHQOB23C5mGTh1facxIxeXTQwXl1U/5iZxrK8Qi2xJQkPoDBFfq7ya0MUHrJpqzDFDcO4Jf4Q4HcsEyb+rolKW5LQxqtNDEVqy496potpW4Dg1AkK2UQakmRmvGUUdSEJ9yxYqbUNwr8cJAuvNnyzMNEzM5xLmiPA71XGYTE62Iu4kIS15cjONgmnMJyCkSx1s73E6O/7AXDKKGmOAA9Wef00cCEJDwFZ7VA272cQDTyQQ8KcG0R7M6UcWIakSJoj4PJMW1lzVcjVpLZXU+L+Ct8sJAxXPnIQnp5jZIGkOQKuz/RYi64KuRGz7Vit7biBU7Gfm4sh+qwGm1JeBjBlSgcKse36TI/ttqvCCQC46VWaPG/IwnSinI6lIEwJb+kcngvXZ3qsz3UU8q8uc0KVLFeYpAIxCfNLk7igZFxj9K3OMz3SrzoKWRS+SweieHKNZLkKwF0BR5lJMVgxVlIfASYseVv95oNb1iEJNXG5ksuWXRNOy35rLp7WrH7nvzeV3OLjmvYnRft/ALCpuuvkW12SKHnaG2HmG4aE6SWO62pVG/ehnB62CDc/ECKJRl2SsL+cgjChsGQwAiz+SaL0X4wA4Ed6dVU5zTjV4pRLUh8Blnpbon5zv9MtamMyMGZRmcq3Ux3Ux+PRJA8DSSX1EeDix0r1m/snCTV+DcD+vp2SPiFQEwHr2uwu+ptMt2iH59+56uOdvS6d0L1CwCBwEYANfaPRlCT0h3m5uNrFcG+JEEiJgEvRHms/fZCExiaxIpC1Vd0oBMIgMDJdaV2TvkhC+8yP9aaM3HUdUzshUAOBowGwSJRXsSEJDwRxudJGtgNANkuEQAoEvgLgIN+GbUjCgEZulpGld1s4wCIotQ/dW+jXLUJgGAI8kej9j7QNSXo3DRk6wawp4xJoiyh6kFMgMDFElLoNSQZlFvw+gAvNxXMQg4Qf8ywy/54UaMlmJxFgPmXvuQJsSMLNQm4aDhLWqiNZeDR2UA0T7iCTKKxxIhECIRF4EcA0IQzYkGQLy9rrrHt4uzmEz0I0VTEahi5znsigSIkQCIUAk/stHkK5DUk4z+N2fx1hPUTWNuFPxiYdXEeJ2ggBCwR+BmADi/ucb7EhySIdLs/mDKgaJEMgyB4Je2NDEhaG/3eyrsuwELBDgPVdjre71e0uG5JQ430A5nNTrbuFQFQE1gHARB7exZYkJwHY0bt1KRQC/hBYEAAXj7yLLUm0Oegdein0jIDts+xs1lYxszbaxm85O6EGQqAhAtyjW7WhjqHNbUlCBcoLFWoUpLcpAkHLmbuQhBnlmdFDIgRyQ4D7I9wnCSIuJNF3SZAhkFIPCLwLAHM7BxEXkjCZM+s+LB3EEykVAvUQ4DPJ0hXBxIUkdIIVeBkuLxECuSBwIoBdQjrjShIGK5K5C4d0SrqFgAMCWwHg0Y1g4koSOrIfgK8H80iKhYAbAsE2ESs36pCEH0msFsUDLhIhkBKBOwEsGdqBOiShTwcCODS0c9IvBMYgwMpr24dGqS5JZjRniZcJ7aD0C4ERCGxual8GBakuSeiUsqAHHRopH4MAS/YtBODJ0Eg1IQl940GXPUM7Kf1CYAACpwPYOgYyTUmiaVeMUZKNQQhsYmrkBEenKUk07Qo+RDIwAAHmS+Be3TMx0PFBEk27YoyUbPQiECQx9jCIfZGEcV3MKq/qsXqYYyDwcZPrLYYtq0QQto4wZOV8AGvbNtB9QqAGAiweylWtl2q0rdXE15ukMj6zIcqHanmjRkJgPAInAPjs+Nv83eGbJPRsdlNFdgV/bkqTEHgdgXUBXBITjxAkof9MP8RyyywVJxECvhBgNYPoUR6hSEJQFgNwFADmQ5IIAR8I7AOAx8ijSkiSVB05DMABUXslYyUi8Ih5izAcJarEIAk7xCU7lm/gqoRECNRBgM/PF+o0bNomFkno51yGKJs1dVrtO4cAl3v5LcLyCtElJkmqzjH+fxsAK0XvrQy2FYFTAbBobRJJQZKqo582ZJmQpOcy2iYEuO92XSqHU5Kk6vNGALbVKliqRyB7uxcB2DCllzmQpOo/w1lYW7G6GOYiEQL8I8q4wGSSE0l6QZjVfLOs3EOaqZKhJMOpELg5h6K0IUlyiKn3zpoRLBv8lCXSTBHDqr3Lmp/8fRbLtrqtLAT4sc6P9qQSkiSzAXi0r3esmHWXIc0TAPjG4H38WV1TJ0VExnNB4FIAH83BmZAkYf9UISuHUW6nD2sCuDIH10OThN8UN+XQUfnQKgT4x3XnXDwOTRL2k0t46+fSYfmRPQKMzeIKZ5D6h3V6H4MkDEM5q45zatNJBBifxTitbCQGSdjZ60PWtMsGTTnSFIFbzVsk2tFcG4djkYSrFJNtHNI9nUaAs45zckMgFknY7+Nin03ODWz5MxIB7qpzdz07iUkSlrnmtGue7FCQQzkgwI917rBnJzFJws7vAODk7FCQQ6kRYBmPg1M7Mcx+bJLQD75WJ+UKiPyKjgBnF6sDeDm6ZUuDKUjCOKyrASxu6aNuKxuBbHbWc3qT0BcGL94C4K1lj796NwaBrwL4Yu4opXiTVJhsAODC3AGSf8EQ4B9JTrOeD2bBk+KUJGEXWH/7eE99kZp2IcC9M0b6Zi+pSUKA9kqRcCz7kSnbwSNNqfNW9DIHkhCo1QBc2wrE5GRTBG4DwOQfTzdVFKt9LiRhf5cwr19uOkrKRYBJHRgZ3hrJiSQEjRnpTwOwVmsQlKMuCCTLwujiZP+9uZGE/k1nPuajVFZtAp7aOiFwJoAtnFpkcnOOJKmg2dQk2uY0TNJuBG4w59Vb8x3SC3fOJKGfrJzFjPR7t/sZ6bz3jK5IksfXB/K5k6TqI79RSBaugknahcBHAFzWLpff6G1bSFJ5vTkAXgRekj8CjPpmOelWS9tIUoHNdfaKMPzQl+SHQNJM8D7haCtJKgwWMCsmJI0q/vp8Mprpuqekgk1tJ0nvUM4BgGHXa5jAOe65SNIgwLd79oGLttCURJL+Pi9tipuyEnDvxYpbknAIMCEhI3yLkZJJMmiQZgJwDIAtixnBvDrC0Pdr8nKpuTddIsknABwBYP7msEnDAASKJAj72QWSMEs9ybGnHu1gCBRLkC6QZCKAw1XENBg5qLhogpRMkhnM2ekkdb+DPpJ5KS+eIKWSZGMAJAcrZEnCIdAJgpRGEm4sMvOGQuzDEaPS3BmClESS3QxBWFpOEhaBThGkBJIwgI7XcmGfC2k3CCxqal52CpC2LgGLHHEf0/sBsCryK3HN5mGtTSSZ3kT+6s0R99m5ous5B9pAkuUBcMWKl8o2xCXIiSaBYFyrmVnLlSR8a1TEyKKWd2bjFsOdfQEcFcNQ7jZyIsk05rXOo7rr6a2R7NF5CMDuAC5I5kFmhlOT5J0A1jGkWBcAo3Ql6RBgBC+X0+9M50J+lmOSZEoAywDgOY/q4olCSR4IMD/vQQCey8OdfLwIQRLWHOFy4ULmWtKQgj8l+SFwuambXtw5EF9QkyS7AlgfwGPmegLAMwOuqUx2RR7NrK5pze+z9pBiXl/OSU9QBB4x5Dg2qJUClFdvkjlNCYQ9AHBaJCkbAab5YV5ebhJKxiDQP91i8jdmS2Tmb0l5CPDsOcmhCmMOYzvsm2QrAPsA0HeEA5gZ38rpM8nB678Z+5mla6M+3HlwiUTZGQC/OSTtROAUACcAuL2d7qf32mZ1iyl4djJkmTG9y/LAEoEzAJxUWnofy757vc2GJJVBLutWZFFqUa/D4FXZWYYc13vV2mFlLiSpYGK9kIosWgnL5+E515DjqnxcKsOTOiSpes6DTgxCZD4rHp2VpEGAMVacVnFTUBIAgSYkqdzhDjuJwmuS9lkCjNKbVT4J4BIAZwO4OIrFDhvxQZJe+BYxRCFhlu0wriG6zmVcEmOy+fl4CCPS+WYEfJOk1wIL7TDsfW0APBstcUfgxT5iMJREEhmBkCTp7QozKVaEYSSwZDgCr/a8LfjmeFBgpUUgFkl6e7mKebuQNCul7X421u8GcCOAm0xW9nuz8UyOJE+YzTPrjBdb1VxdmZbxe+JKANzLIDHu0LOYLwIp3iSj0CBpqtJuKxb0LcN4KZKC17UAbs33kZBn/QjkRpJ+/1g2YSlzaIs/q99zPebLU32sF8jpEq/qdx1oajH3cifJMGh5/mUxAHMPuPj/QsowIpAQD4c0LN1pEGgrSUahxVCZijzMwMKLJyir33v/m6ctnzUXH/7q91H/9kKaoZLVVAiUSJJUWMpuoQiIJIUOrLrlDwGRxB+W0lQoAiJJoQOrbvlDQCTxh6U0FYqASFLowKpb/hAQSfxhKU2FIiCSFDqw6pY/BEQSf1hKU6EIiCSFDqy65Q8BkcQfltJUKAIiSaEDq275Q0Ak8YelNBWKgEhS6MCqW/4QEEn8YSlNhSIgkhQ6sOqWPwREEn9YSlOhCIgkhQ6suuUPAZHEH5bSVCgCIkmhA6tu+UNAJPGHpTQVioBIUujAqlv+EBBJ/GEpTYUiIJIUOrDqlj8ERBJ/WEpToQiIJIUOrLrlDwGRxB+W0lQoAiJJoQOrbvlDQCTxh6U0FYqASFLowKpb/hAQSfxhKU2FIiCSFDqw6pY/BEQSf1hKU6EIiCSFDqy65Q8BkcQfltJUKAIiSaEDq275Q0Ak8YelNBWKwP8A8AR3+Szevr8AAAAASUVORK5CYII=" myChart.setOption({ series: [{ type: 'wordCloud', // gridSize: 20, sizeRange: [12, 50], // rotationRange: [0, 0], rotationRange: [-45, 0, 45, 90], maskImage: maskImage, // 关键代码 // ... 其他业务代码 动效 未研究,留个看着靠谱的参考:圆形词云(旋转)TagCanvas |
CopyRight 2018-2019 实验室设备网 版权所有 |