字符云

最近发觉图表类还是很有趣的，研究一下下，颇有收获。

 #main{
        500px;
        height:500px;
        margin: 0 auto;
    }

 <div id="main"></div>

  1   function createRandomItemStyle() {
  2     return {
  3         normal: {
  4             color: 'rgb(' + [
  5                 Math.round(Math.random() * 160),
  6                 Math.round(Math.random() * 160),
  7                 Math.round(Math.random() * 160)
  8             ].join(',') + ')'
  9         }
 10     };
 11 }
 12  var myChart = echarts.init(document.getElementById('main'));
 13 var option = {
 14     title: {
 15         text: '字符云',
 16         link: 'http://www.cnblogs.com'
 17     },
 18     tooltip: {
 19         show: true
 20     },
 21     series: [{
 22         name: '字符云',
 23         type: 'wordCloud',
 24         size: ['80%', '80%'],
 25         textRotation : [0, 45, 90, -45],
 26         textPadding: 0,
 27         autoSize: {
 28             enable: true,
 29             minSize: 14
 30         },
 31         data: [
 32             {
 33                 name: "程序猿",
 34                 value: 10000,
 35                 itemStyle: {
 36                     normal: {
 37                         color: 'black'
 38                     }
 39                 }
 40             },
 41             {
 42                 name: "设计师",
 43                 value: 6181,
 44                 itemStyle: createRandomItemStyle()
 45             },
 46             {
 47                 name: "攻城狮",
 48                 value: 4386,
 49                 itemStyle: createRandomItemStyle()
 50             },
 51             {
 52                 name: "react",
 53                 value: 4055,
 54                 itemStyle: createRandomItemStyle()
 55             },
 56             {
 57                 name: "angulary",
 58                 value: 2467,
 59                 itemStyle: createRandomItemStyle()
 60             },
 61             {
 62                 name: "java",
 63                 value: 2244,
 64                 itemStyle: createRandomItemStyle()
 65             },
 66             {
 67                 name: "php",
 68                 value: 1898,
 69                 itemStyle: createRandomItemStyle()
 70             },
 71             {
 72                 name: "c++",
 73                 value: 1484,
 74                 itemStyle: createRandomItemStyle()
 75             },
 76             {
 77                 name: "javascript",
 78                 value: 1112,
 79                 itemStyle: createRandomItemStyle()
 80             },
 81             {
 82                 name: "AI",
 83                 value: 965,
 84                 itemStyle: createRandomItemStyle()
 85             },
 86             {
 87                 name: "VI",
 88                 value: 847,
 89                 itemStyle: createRandomItemStyle()
 90             },
 91             {
 92                 name: "GUI",
 93                 value: 582,
 94                 itemStyle: createRandomItemStyle()
 95             },
 96             {
 97                 name: "Photoshop",
 98                 value: 555,
 99                 itemStyle: createRandomItemStyle()
100             },
101             {
102                 name: "html5",
103                 value: 550,
104                 itemStyle: createRandomItemStyle()
105             },
106             {
107                 name: "云计算",
108                 value: 462,
109                 itemStyle: createRandomItemStyle()
110             },
111             {
112                 name: "大数据",
113                 value: 366,
114                 itemStyle: createRandomItemStyle()
115             },
116             {
117                 name: "AR",
118                 value: 360,
119                 itemStyle: createRandomItemStyle()
120             },
121             {
122                 name: "VR",
123                 value: 282,
124                 itemStyle: createRandomItemStyle()
125             },
126             {
127                 name: ".net",
128                 value: 273,
129                 itemStyle: createRandomItemStyle()
130             },
131             {
132                 name: "SQL",
133                 value: 265,
134                 itemStyle: createRandomItemStyle()
135             }
136         ]
137     }]
138 }; 
139  myChart.setOption(option);

开始的时候是要引入以下文件的：

最后，字符云就出来了

是不是好看呢？

相关阅读:
STL源码剖析之_allocate函数
 PAT 1018. Public Bike Management
PAT 1016. Phone Bills
PAT 1012. The Best Rank
PAT 1014. Waiting in Line
PAT 1026. Table Tennis
PAT 1017. Queueing at Bank
STL源码剖析之list的sort函数实现
 吃到鸡蛋好吃，看看是哪只母鸡下的蛋：好用的Sqlite3
cJSON
原文地址：https://www.cnblogs.com/cyppi/p/6117034.html