1. 程式人生 > >echarts如何實現熱詞圖

echarts如何實現熱詞圖

熱詞圖,看著要實現很難的樣子,但實際並沒有多麼複雜,只需要將詞雲的js檔案引入即可;其他的和餅圖、柱形圖相差無幾,就多了兩個詞雲的引入檔案。

以下是詞雲的引入檔名稱,沒有的小夥伴可以自行網路下載一下即可

在這裡插入圖片描述

熱詞圖實現程式碼,小夥伴們可以參考一下,有不同意見可以互相借鑑一下 var z1_option = { title : { text: ‘熱詞圖’ }, series: [{ type: ‘wordCloud’, gridSize: 20, sizeRange: [12, 50], rotationRange: [-90, 90], shape: ‘pentagon’, textStyle: { normal: { color: function() { return ‘rgb(’ + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(’,’) + ‘)’; } }, emphasis: { shadowBlur: 10, shadowColor: ‘#333’ } }, data: [{ name: ‘Sam S Club’, value: 10000, }, { name: ‘Macys’, value: 6181 }, { name: ‘Amy Schumer’, value: 4386 }, { name: ‘Jurassic World’, value: 4055 }, { name: ‘Charter Communications’, value: 2467 }, { name: ‘Chick Fil A’, value: 2244 }, { name: ‘Planet Fitness’, value: 1898 }, { name: ‘Pitch Perfect’, value: 1484 }, { name: ‘Express’, value: 1112 }, { name: ‘Home’, value: 965 }, { name: ‘Johnny Depp’, value: 847 }, { name: ‘Lena Dunham’, value: 582 }, { name: ‘Lewis Hamilton’, value: 555 }, { name: ‘KXAN’, value: 550 }, { name: ‘Mary Ellen Mark’, value: 462 }, { name: ‘Farrah Abraham’, value: 366 }, { name: ‘Rita Ora’, value: 360 }, { name: ‘Serena Williams’, value: 282 }, { name: ‘NCAA baseball tournament’, value: 273 }, { name: ‘Point Break’, value: 265 }] }] }; //初始化 document.getElementById(‘hot_word_chart’).removeAttribute(“echarts_instance

”); var myChart1 = echarts.init(document.getElementById(‘hot_word_chart’), “macarons”); myChart1.setOption(z1_option);