之前查了很久,原來這個東西名詞叫做詞云圖
11.jpg
很多人都在echar官網(wǎng)查了很久,貌似沒有這個type類型的,我在社區(qū)里面找到了有這種圖,但是打開了卻看不了,不知道為什么,百度了
這里修改之前的詞云圖鏈接熏纯，原來的版本低了出現(xiàn)了不顯示顏色問題牧牢，
https://github.com/ecomfe/echarts-wordcloud
這是github的詞云圖鏈接澳泵，解壓后引入dis文件里面的min.js文件
話不多說開始碼
首先你需要引入echars.js文件,
然后引入這個詞云圖的js文件
<script type="text/javascript" src="./js/echarts.js"></script>
<script src="./js/echarts-wordcloud.min.js"></script>
<script src="./js/test.js"></script>
我只運用到了部分屬性就出來了這個圖,可以百度找需要的屬性
var JosnList = [
{name: "龍頭鎮(zhèn)", value: "111"},
{name: "大埔鎮(zhèn)", value: "222"},
{name: "太平鎮(zhèn)", value: "458"},
{name: "沙埔鎮(zhèn)", value: "445"},
{name: "東泉鎮(zhèn)", value: "456"},
{name: "鳳山鎮(zhèn)", value: "647"},
{name: "六塘鎮(zhèn)", value: "189"},
{name: "沖脈鎮(zhèn)", value: "864"},
{name: "寨隆鎮(zhèn)", value: "652"},
];
var optionFour = {
tooltip: {
show: true
},
series: [{
name: '項目分析',
type: 'wordCloud',
sizeRange: [10, 50],//文字范圍
//文本旋轉(zhuǎn)范圍，文本將通過rotationStep45在[-90,90]范圍內(nèi)隨機旋轉(zhuǎn)
rotationRange: [-45, 90],
rotationStep: 45,
textRotation: [0, 45, 90, -45],
//形狀
shape: 'circle',
textStyle: {
normal: {
color: function() {//文字顏色的隨機色
return 'rgb(' + [
Math.round(Math.random() * 250),
Math.round(Math.random() * 250),
Math.round(Math.random() * 250)
].join(',') + ')';
}
},
//懸停上去的字體的陰影設(shè)置
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: JosnList
}]
};
var myChartFour = echarts.init(document.getElementById('cyt'));
//使用制定的配置項和數(shù)據(jù)顯示圖表
myChartFour.setOption(optionFour);
感謝提出的問題旋廷，已經(jīng)修改
image.png
