实现一个简单的echarts词云图
作者：互联网
cloud.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>WordCloud Demo</title>
6 </head>
7 <body>
8 <!-- 顺序不能变-->
9 <script src='../static/js/echarts.min.js'></script>
10 <script src='../static/js/echarts-wordcloud.min.js'></script>
11 <script src="../static/js/jquery-3.3.1.min.js"></script>
12 <div id="wordcloud_echarts" style="width:900px; height:600px">
13 </div>
14 <div>
15 <select id="myselect">
16 <option value="result_data" selected>全部数据</option>
17 <option value="result_cj">财经</option>
18 <option value="result_fc">房产</option>
19 <option value="result_game">游戏</option>
20 <option value="result_js">军事</option>
21 <option value="result_jy">教育</option>
22 <option value="result_kj">科技</option>
23 <option value="result_qc">汽车</option>
24 <option value="result_ty">体育</option>
25 <option value="result_tyjd">体育焦点</option>
26 <option value="result_zhty">综合体育最新</option>
27 <option value="result_yl">娱乐</option>
28 </select>
29 <button onclick="tijiao()">检索</button>
30 </div>
31 <script>
32
33 //--------------------------------------------------------------
34 var myChart = echarts.init(document.getElementById('wordcloud_echarts'));
35 var option = {
36 tooltip: {
37 show: true,
38 trigger: 'item',
39 position: "top"
40 },
41 series: [{
42 type: 'wordCloud',
43 sizeRange: [15, 80],
44 rotationRange: [0, 0],
45 rotationStep: 45,
46 gridSize: 8,
47 shape: 'pentagon',
48 width: '100%',
49 height: '100%',
50 textStyle: {
51 normal: {
52 color: function () {
53 return 'rgb(' + [
54 Math.round(Math.random() * 160),
55 Math.round(Math.random() * 160),
56 Math.round(Math.random() * 160)
57 ].join(',') + ')';
58 }
59 },
60 emphasis: { // 单词高亮时显示的效果
61 shadowBlur: 10,
62 shadowColor: '#333'
63 }
64 },
65 left: 'center',
66 top: 'center',
67 data: [{
68 "name": "花鸟市场",
69 "value": 1446
70 },
71 {
72 "name": "汽车",
73 "value": 928
74 },
75 {
76 "name": "视频",
77 "value": 906
78 },
79 {
80 "name": "电视",
81 "value": 825
82 },
83 {
84 "name": "Lover Boy 88",
85 "value": 514
86 }]
87 }]
88 };
89 myChart.setOption(option);
90 window.addEventListener("resize", function() {
91 myChart.resize();
92 })
93 function tijiao(){
94 var select_value= document.getElementById("myselect").value
95 $.ajax({
96 url:"/cloud_data?data="+select_value+"",
97 async:true,
98 success:function(data) {
99 option.series[0].data=data.data
100 // 使用刚指定的配置项和数据显示图表。
101 myChart.setOption(option);
102 },
1 success:function(data) {
2 option.series[0].data=data.data
3 // 使用刚指定的配置项和数据显示图表。
4 myChart.setOption(option);
5 },
103 error:function (xhr,type,errorThrown) {
104 alert("出现错误！")
105 }
106 })
107 }
108 </script>
109 </body>
110 </html>
有三个点需要注意：
1、js文件引入顺序
1 <!-- 顺序不能变--> 2 <script src='../static/js/echarts.min.js'></script> 3 <script src='../static/js/echarts-wordcloud.min.js'></script> 4 <script src="../static/js/jquery-3.3.1.min.js"></script>
2、ajax的success方法
1 success:function(data) {
2 option.series[0].data=data.data
3 // 使用刚指定的配置项和数据显示图表。
4 myChart.setOption(option);
5 },
3、需要的数据格式
1 data: [{
2 "name": "花鸟市场",
3 "value": 1446
4 },
5 {
6 "name": "汽车",
7 "value": 928
8 },
9 {
10 "name": "视频",
11 "value": 906
12 },
13 {
14 "name": "电视",
15 "value": 825
16 },
17 {
18 "name": "Lover Boy 88",
19 "value": 514
20 }]
常用的两个属性
1、鼠标高亮显示
放在series里
emphasis: { // 单词高亮时显示的效果
shadowBlur: 10,
shadowColor: '#333'
}
2、词语显示value
放在option里
tooltip: {
show: true,
trigger: 'item',
position: "top"
},
效果
标签：function,name,value,云图,简单,data,echarts,Math,option 来源： https://www.cnblogs.com/rainbow-1/p/15607877.html