Echarts词云图
生活随笔
收集整理的這篇文章主要介紹了
Echarts词云图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
水果店詞云圖
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="../echarts.js"></script><!-- 引入echarts-wordcloud.js--><script src="../echarts-wordcloud.js"></script> </head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據 var option = {tooltip: {show: true},series: [{type: "wordCloud", //詞云圖gridSize:6, //詞的間距shape:'circle', //詞云形狀sizeRange: [24, 60], //詞云大小范圍width:1800, //詞云顯示寬度height:1600, //詞云顯示高度textStyle: {normal: {color: function() { //詞云的顏色隨機return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {shadowBlur: 50, //陰影的模糊等級shadowColor: '#333' //鼠標懸停在詞云上的陰影顏色}},data: [{name: " 新鮮水果",value: 32},{name: " 美味",value: 30},{name: " 健康",value: 30},{name: " 維生素",value: 28},{name: " 西瓜",value: 26},{name: " 櫻桃",value: 24},{name: " 桃子",value: 24},{name: " 甜瓜",value: 22},{name: " 香蕉",value: 22},{name: " 蘋果",value: 22},{name: " 梨子",value: 22},{name: " 荔枝",value: 20},{name: " 葡萄",value: 20},{name: " 楊梅",value: 20},],}] };// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>總結
以上是生活随笔為你收集整理的Echarts词云图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django默认用户认证系统和用户模型类
- 下一篇： Echarts散点图