字符云

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

 #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);

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

最后，字符云就出来了

是不是好看呢？