经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Vue 绘制echarts 词云和 Highcharts 词云 - hero-see
来源:cnblogs  作者:hero-see  时间:2021/3/8 11:49:57  对本文有异议

echarts绘制词云方法

echarts官网

  • 第一步安装echarts依赖,通过npm获取echarts,npm install echarts --save,具体操作可以看echarts官网;
  • 第二步安装echarts词云插件,npm install echarts-wordcloud --save;
  • 第三步下载好依赖之后在main.js引入文件,我这里最后将echarts写在原型prototype上
  1. import echarts from 'echarts'
  2. require('echarts-wordcloud')
  3. Vue.prototype.$echarts = echarts
  • 第四步绘制词云
  1. <template>
  2. <div id="echartsWordcloud" style="width:400px;height:400px;"></div>
  3. </template>
  4. <script>
  5. export default{
  6. mounted(){
  7. this.initEcharts()
  8. },
  9. methods:{
  10. initEcharts(data){
  11. let echartsWordcloud=this.$echarts.init(document.getElementById("echartsWordcloud"));
  12. let option = {
  13. title: {
  14. text: "",
  15. x: "center"
  16. },
  17. series: [
  18. {
  19. type: "wordCloud",
  20. //用来调整词之间的距离
  21. gridSize: 10,
  22. //用来调整字的大小范围
  23. sizeRange: [14, 26],
  24. rotationRange: [0, 0],
  25. //随机生成字体颜色
  26. textStyle: {
  27. normal: {
  28. color: function() {
  29. return (
  30. "rgb(" +
  31. Math.round(Math.random() * 255) +
  32. ", " +
  33. Math.round(Math.random() * 255) +
  34. ", " +
  35. Math.round(Math.random() * 255) +
  36. ")"
  37. );
  38. }
  39. }
  40. },
  41. //位置相关设置
  42. left: "center",
  43. top: "center",
  44. right: null,
  45. bottom: null,
  46. width: "300%",
  47. height: "300%",
  48. //数据
  49. data: data
  50. }
  51. ]
  52. };
  53. echartsWordcloud.setOption(option);
  54. //点击事件
  55. echartsWordcloud.on("click",function(e){})
  56. }
  57. }
  58. }
  59. </script>

效果图

Highcharts绘制词云方法

Highcharts官网
第一步下载highcharts,可以选择文件下载方式和npm安装方式(npm install highcharts --save),官网都有教程,我选择是文件下载方式。
第二步引入highcharts文件

  1. <script src="./lib/highcharts/highcharts.js"></script>
  2. <script src="./lib/highcharts/wordcloud.js"></script>

第三步绘制词云

  1. <template>
  2. <div id="highchartsWordcloud" style="width:400px;height:400px;"></div>
  3. </template>
  4. <script>
  5. export default{
  6. mounted(){
  7. this.initEcharts()
  8. },
  9. methods:{
  10. initEcharts(data){
  11. Highcharts.chart("highchartsWordcloud", {
  12. colors: ["#6A7AFE", "#9DBBEC", "#FFDB35", "#FFFFFF"],
  13. tooltip: {
  14. enabled: false
  15. },
  16. chart: {
  17. plotBackgroundColor: null,
  18. backgroundColor: null
  19. },
  20. title: {
  21. text: null
  22. // fontWeight: "400"
  23. },
  24. credits: {
  25. enabled: false // 禁用版权信息
  26. },
  27. exporting:{enabled:false},
  28. series: [
  29. {
  30. type: "wordcloud",
  31. data: data,
  32. cursor: "pointer",
  33. rotation: {
  34. from: 0,
  35. to: 0,
  36. orientations: 5
  37. },
  38. //点击事件
  39. events: {
  40. click: function(e) {}
  41. }
  42. }
  43. ]
  44. });
  45. }
  46. }
  47. }
  48. </script>

效果图

渲染数据格式举例

  1. data = [{name: "小区",value: "283"},{name: "留言板",value: "101"},...,{name: "业主",value: "148"}]

原文链接:http://www.cnblogs.com/hero-see1321251054/p/14467609.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号