目錄
用echarts實現了中國地圖上的發票流入流出圖和小鳥形狀的詞雲圖。
先看下效果
中國地圖（有動態的流入流出箭頭和懸浮框提示信息）：
詞雲圖（小鳥形狀，也可自行改爲其他形狀）：
這段時間用echarts作了不少圖，之所以挑這兩個圖來講，是因爲他們都引入了其他js文件，這倆js文件還不太好找到。
1.中國地圖
我就直接上代碼了，進行一些說明：
1.首先是要引入echarts.js和china.js，文章最後會給出；
2.chinaGeoCoordMap用於裝各省會的座標數據，挺重要的；
3.chinaDatas裝各省的名字數據嘛；
4.convertData這個方法控制箭頭流向，我設置的是一半流入中心點，一半從中心點流出（用不到的可以刪掉，要用的自己改進）；
5.series裏設置被攻擊點（中心點），和一些特效，代碼中有註釋的；
6.option中設置一些整體效果，tooltip中負責懸浮框內容和格式的設置，此中有疑問可以去查看echarts官方的文檔說明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="china.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var chinaGeoCoordMap = {
'黑龍江': [127.9688, 45.368],
'內蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"遼寧": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陝西": [109.1162, 34.2004],
"甘肅": [103.5901, 36.3043],
"寧夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重慶": [108.384366, 30.439702],
"山東": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江蘇": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"貴州": [106.6992, 26.7682],
"雲南": [102.9199, 25.4663],
"廣東": [113.12244, 23.009505],
"廣西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891]
};
var chinaDatas = [
[{
name: '黑龍江',
value: 0
}], [{
name: '內蒙古',
value: 0
}], [{
name: '吉林',
value: 0
}], [{
name: '遼寧',
value: 0
}], [{
name: '河北',
value: 0
}], [{
name: '天津',
value: 0
}], [{
name: '山西',
value: 0
}], [{
name: '陝西',
value: 0
}], [{
name: '甘肅',
value: 0
}], [{
name: '寧夏',
value: 0
}], [{
name: '青海',
value: 0
}], [{
name: '新疆',
value: 0
}],[{
name: '西藏',
value: 0
}], [{
name: '四川',
value: 0
}], [{
name: '重慶',
value: 0
}], [{
name: '山東',
value: 0
}], [{
name: '江蘇',
value: 0
}], [{
name: '安徽',
value: 0
}], [{
name: '湖北',
value: 0
}], [{
name: '浙江',
value: 0
}], [{
name: '福建',
value: 0
}], [{
name: '江西',
value: 0
}], [{
name: '湖南',
value: 0
}], [{
name: '貴州',
value: 0
}],[{
name: '廣西',
value: 0
}], [{
name: '海南',
value: 0
}], [{
name: '上海',
value: 0
}], [{
name: '北京市',
value: 0
}]
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < (data.length/2); i++) {
var dataItem = data[i];
var fromCoord = [113.4668, 34.6234];
var toCoord = chinaGeoCoordMap[dataItem[0].name];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
for(var i = (data.length/2); i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [113.4668, 34.6234];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['河南', chinaDatas]].forEach(function(item, i) {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭頭指向速度，值越小速度越快
trailLength: 0.02, //特效尾跡長度[0,1]值越大，尾跡越長重
symbol: 'arrow', //箭頭圖標
symbolSize: 5, //圖標大小
},
lineStyle: {
normal: {
width: 1, //尾跡線條寬度
opacity: 1, //尾跡線條透明度
curveness: .3 //尾跡線條曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //漣漪特效
period: 4, //動畫時間，值越小速度越快
brushType: 'stroke', //波紋繪製方式 stroke, fill
scale: 4 //波紋圓環最大限制，值越大波紋越大
},
label: {
normal: {
show: true,
position: 'right', //顯示位置
offset: [5, 0], //偏移設置
formatter: function(params){//圓環顯示文字
return params.data.name;
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5+ val[2] * 5; //圓環大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
//被攻擊點
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
}
);
});
option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根據業務自己拓展要顯示的內容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>發票流入：<br/>份數：24,534 份<br/>金額：34,534.53 元<br/>稅額：134,534.75 元<br/>發票流出：<br/>份數：34,585 份<br/>金額：23,478.75 元<br/>稅額：15,337.54 元";
return res;
}
},
backgroundColor:"#141845",
visualMap: { //圖例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, //是否允許縮放
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地圖背景色
borderColor: '#516a89', //省市邊界線00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //懸浮背景
}
}
},
series: series
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
2.詞雲圖
上代碼，並進行說明：
1.首先，引入echarts.js和echarts-wordcloud.min.js，文章最後會給出；
2.data裝詞彙數據，value越大字體越大，爲了效果好看，詞彙較多，看代碼時直接往下拉就行；
3.data中的image： 小鳥圖片；
自定義圖片一般有三種格式：
可以通過 'image://url' 設置爲圖片，其中 URL 爲圖片的鏈接，或者 dataURL。
1.URL 爲圖片鏈接，例如：
'image://http://xxx.xxx.xxx/a/b.png'
注：也可以是本地圖片
2.URL 爲 dataURL， 例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
我們就用的這種
3.可以通過 'path://' 將圖標設置爲任意的矢量路徑。這種方式相比於使用圖片的方式，不用擔心因爲縮放而產生鋸齒或模糊，而且可以設置爲任意顏色。路徑圖形會自適應調整爲合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯導出。
例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
4.maskImage用於設置詞雲圖形狀爲自定義圖片的形狀；
5.shape則用於設置詞雲圖形狀爲默認的幾種形狀，由於現在echarts官網沒有詞雲圖的相關文檔，我去翻看了echarts-wordcloud.min.js，發現可以設置爲以下幾種默認形狀：
circle，cardioid（心形），diamond，square，triangle-forward，triangle，triangle-upright，pentagon（五角形），star，random-dark，random-light；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="echarts-wordcloud.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var data = {
value: [
{
name: " 沒有",
value: 30,
},
{
name: " 屏幕",
value: 24
},
{
name: " 不錯",
value: 21
},
{
name: " 可以",
value: 19
},
{
name: " 發貨",
value: 18
},
{
name: " 這個",
value: 18
},
{
name: " 什麼",
value: 17
},
{
name: " 一個",
value: 12
},
{
name: " 不好",
value: 12
},
{
name: " 質量",
value: 11
},
{
name: " 快遞",
value: 11
},
{
name: " 問題",
value: 10
},
{
name: " 物流",
value: 9
},
{
name: " 幾天",
value: 9
},
{
name: " 一般",
value: 9
},
{
name: " 就是",
value: 9
},
{
name: " 使用",
value: 8
},
{
name: " 怎麼",
value: 8
},
{
name: " 電池",
value: 8
},
{
name: " 不能",
value: 8
},
{
name: " 速度",
value: 8
},
{
name: " 客服",
value: 8
},
{
name: " 一星",
value: 8
},
{
name: " 拍照",
value: 8
},
{
name: " 攝像頭",
value: 7
},
{
name: " 外觀",
value: 7
},
{
name: " 包裝",
value: 7
},
{
name: " 到貨",
value: 7
},
{
name: " 有點",
value: 7
},
{
name: " 搶購",
value: 6
},
{
name: " 這樣",
value: 6
},
{
name: " 性價比",
value: 6
},
{
name: " 一般般",
value: 6
},
{
name: " 出現",
value: 6
},
{
name: " 以前",
value: 6
},
{
name: " 知道",
value: 6
},
{
name: " 一次",
value: 6
},
{
name: " 真的",
value: 6
},
{
name: " 收到",
value: 6
},
{
name: " 其他",
value: 6
},
{
name: " 電量",
value: 6
},
{
name: " 還是",
value: 6
},
{
name: " 不行",
value: 6
},
{
name: " 紅米",
value: 6
},
{
name: " 那麼",
value: 6
},
{
name: " 挺快",
value: 5
},
{
name: " 現在",
value: 5
},
{
name: " 服務",
value: 5
},
{
name: " 充電",
value: 5
},
{
name: " 流暢",
value: 5
},
{
name: " 系統",
value: 5
},
{
name: " 非常",
value: 5
},
{
name: " 滿意",
value: 5
},
{
name: " 購物",
value: 5
},
{
name: " 玩遊戲",
value: 5
},
{
name: " 信號",
value: 5
},
{
name: " 不了",
value: 5
},
{
name: " 別人",
value: 5
},
{
name: " 死機",
value: 5
},
{
name: " 耗電",
value: 5
},
{
name: " 一直",
value: 5
},
{
name: " 像素",
value: 5
},
{
name: " 第一次",
value: 5
},
{
name: " 廣告",
value: 5
},
{
name: " 買個",
value: 5
},
{
name: " 黑屏",
value: 5
},
{
name: " 爲什麼",
value: 4
},
{
name: " 猴王",
value: 4
},
{
name: " 視頻",
value: 4
},
{
name: " 體驗",
value: 4
},
{
name: " 好評",
value: 4
},
{
name: " 閃屏",
value: 4
},
{
name: " 價格",
value: 4
},
{
name: " 飢餓",
value: 4
},
{
name: " 營銷",
value: 4
},
{
name: " 發熱",
value: 4
},
{
name: " 還行",
value: 4
},
{
name: " 一天",
value: 4
},
{
name: " 需要",
value: 4
},
{
name: " 特別",
value: 4
},
{
name: " 而且",
value: 4
},
{
name: " 運行",
value: 4
},
{
name: " 等到",
value: 4
},
{
name: " 手機卡",
value: 4
},
{
name: " 呵呵",
value: 4
},
{
name: " 時候",
value: 4
},
{
name: " 東西",
value: 4
},
{
name: " 感覺",
value: 4
},
{
name: " 卡機",
value: 4
},
{
name: " 沒什麼",
value: 4
},
{
name: " 大家",
value: 4
},
{
name: " 沒貨",
value: 4
},
{
name: " 售後",
value: 4
},
{
name: " 比較",
value: 4
},
{
name: " 退貨",
value: 4
},
{
name: " 加價",
value: 3
},
{
name: " 耳機",
value: 3
},
{
name: " 嗚嗚",
value: 3
},
{
name: " 一分錢",
value: 3
},
{
name: " 一分貨",
value: 3
},
{
name: " 默認",
value: 3
},
{
name: " 說好",
value: 3
},
{
name: " 你們",
value: 3
},
{
name: " 一點",
value: 3
},
{
name: " 超級",
value: 3
},
{
name: " 耐用",
value: 3
},
{
name: " 很快",
value: 3
},
{
name: " 斷流",
value: 3
},
{
name: " 套裝",
value: 3
},
{
name: " 一樣",
value: 3
},
{
name: " 發票",
value: 3
},
{
name: " 買回來",
value: 3
},
{
name: " 軟件",
value: 3
},
{
name: " 還好",
value: 3
},
{
name: " 以後",
value: 3
},
{
name: " 下單",
value: 3
},
{
name: " 打遊戲",
value: 3
},
{
name: " 我們",
value: 3
},
{
name: " 但是",
value: 3
},
{
name: " 一部",
value: 3
},
{
name: " 王者",
value: 3
},
{
name: " 不怎麼樣",
value: 3
},
{
name: " 看看",
value: 3
},
{
name: " 自己",
value: 3
},
{
name: " 裏面",
value: 3
},
{
name: " 邊框",
value: 3
},
{
name: " 看着",
value: 3
},
{
name: " 要死",
value: 3
},
{
name: " 原因",
value: 3
},
{
name: " 新機",
value: 3
},
{
name: " 不如",
value: 3
},
{
name: " 老是",
value: 3
},
{
name: " 購買",
value: 3
},
{
name: " 更好",
value: 3
},
{
name: " 相機",
value: 3
},
{
name: " 竟然",
value: 3
},
{
name: " 一分",
value: 3
},
{
name: " 天才",
value: 3
},
{
name: " 榮耀",
value: 3
},
{
name: " 正常",
value: 3
},
{
name: " 回覆",
value: 3
},
{
name: " 聯繫",
value: 3
},
{
name: " 總體",
value: 3
},
{
name: " 反應",
value: 3
},
{
name: " 老爸",
value: 3
},
{
name: " 星期",
value: 3
},
{
name: " 半個",
value: 3
},
{
name: " 打電話",
value: 3
},
{
name: " 不是",
value: 3
},
{
name: " 保護膜",
value: 3
},
{
name: " 充電器",
value: 3
},
{
name: " 買不到",
value: 2
},
{
name: " 老子",
value: 2
},
{
name: " 差評",
value: 2
},
{
name: " 這麼",
value: 2
},
{
name: " 真香",
value: 2
},
{
name: " 真是",
value: 2
},
{
name: " 三天",
value: 2
},
{
name: " 填寫內容",
value: 2
},
{
name: " 幫別人",
value: 2
},
{
name: " 終於",
value: 2
},
{
name: " 有時候",
value: 2
},
{
name: " 極致",
value: 2
},
{
name: " 還有",
value: 2
},
{
name: " 希望",
value: 2
},
{
name: " 必須",
value: 2
},
{
name: " 好像",
value: 2
},
{
name: " 嚴重",
value: 2
},
{
name: " 反應速度",
value: 2
},
{
name: " 後面",
value: 2
},
{
name: " 音樂",
value: 2
},
{
name: " 商品",
value: 2
},
{
name: " 哈哈",
value: 2
},
{
name: " 垃圾",
value: 2
},
{
name: " 好用",
value: 2
},
{
name: " 突出",
value: 2
},
{
name: " 價錢",
value: 2
},
{
name: " 耍猴",
value: 2
},
{
name: " 磕碰",
value: 2
},
{
name: " 幾次",
value: 2
},
{
name: " 失靈",
value: 2
},
{
name: " 支持",
value: 2
},
{
name: " 快充",
value: 2
},
{
name: " 意思",
value: 2
},
{
name: " 失敗",
value: 2
},
{
name: " 整整",
value: 2
},
{
name: " 沒收",
value: 2
},
{
name: " 已經",
value: 2
},
{
name: " 無法",
value: 2
},
{
name: " 方面",
value: 2
},
{
name: " 爲啥",
value: 2
},
{
name: " 喜歡",
value: 2
},
{
name: " 套餐",
value: 2
},
{
name: " 完全",
value: 2
},
{
name: " 專業",
value: 2
},
{
name: " 選擇",
value: 2
},
{
name: " 48mp",
value: 2
},
{
name: " 無線",
value: 2
},
{
name: " 一個月",
value: 2
},
{
name: " 不過",
value: 2
},
{
name: " ldquo",
value: "-"
},
{
name: " rdquo",
value: "-"
},
{
name: " 這種",
value: 2
},
{
name: " 送貨",
value: 2
},
{
name: " 卡死",
value: 2
},
{
name: " 來看",
value: 2
},
{
name: " 糊弄人",
value: 2
},
{
name: " note7",
value: 2
},
{
name: " 時間",
value: 2
},
{
name: " 短信",
value: 2
},
{
name: " 滑落",
value: 2
},
{
name: " 那樣",
value: 2
},
{
name: " vivo",
value: 2
},
{
name: " 防水",
value: 2
},
{
name: " 等待",
value: 2
},
{
name: " 直播",
value: 2
},
{
name: " 難受",
value: 2
},
{
name: " 四個",
value: 2
},
{
name: " 到手",
value: 2
},
{
name: " 發現",
value: 2
},
{
name: " 掉電",
value: 2
},
{
name: " 華爲",
value: 2
},
{
name: " 再也",
value: 2
},
{
name: " 不用",
value: 2
},
{
name: " 給力",
value: 2
},
{
name: " 兩天",
value: 2
},
{
name: " 立馬",
value: 2
},
{
name: " 兩週",
value: 2
},
{
name: " 處理器",
value: 2
},
{
name: " 關機",
value: 2
},
{
name: " 要麼",
value: 2
},
{
name: " 滿血",
value: 2
},
{
name: " 不會",
value: 2
},
{
name: " 定金",
value: 2
},
{
name: " 付款",
value: 2
},
{
name: " 心情",
value: 2
},
{
name: " 另外",
value: 2
},
{
name: " 遊戲",
value: 2
},
{
name: " 公司",
value: 2
},
{
name: " 按鍵",
value: 2
},
{
name: " 卡頓",
value: 2
},
{
name: " 晚上",
value: 2
},
{
name: " 百分之",
value: 2
},
{
name: " 手機信號",
value: 2
},
{
name: " 一下",
value: 2
},
{
name: " 開學",
value: 2
},
{
name: " 上班",
value: 2
},
{
name: " 上天",
value: 2
},
{
name: " 配送",
value: 2
},
{
name: " 最後",
value: 2
},
{
name: " 太慢",
value: 2
},
{
name: " 手機套",
value: 2
},
{
name: " 笨重",
value: 2
},
{
name: " 半年",
value: 2
},
{
name: " 屏險",
value: 2
},
{
name: " 先發",
value: 2
},
{
name: " 不靈敏",
value: 2
},
{
name: " 硬度",
value: 2
},
{
name: " 這次",
value: 2
},
{
name: " 性能",
value: 2
},
{
name: " 介紹",
value: 2
},
{
name: " 卡針",
value: 2
},
{
name: " 不理",
value: 2
},
{
name: " 這是",
value: 2
},
{
name: " 買來",
value: 2
},
{
name: " 兩次",
value: 2
},
{
name: " 網絡",
value: 2
},
{
name: " 就裂",
value: 2
},
{
name: " 沒用",
value: 2
},
{
name: " 多次",
value: 2
},
{
name: " 鋼化",
value: 2
},
{
name: " 一星怪",
value: 1
},
{
name: " 新款",
value: 1
},
{
name: " 你行",
value: 1
},
{
name: " 沒送",
value: 1
},
{
name: " 一個多",
value: 1
},
{
name: " 禮拜",
value: 1
},
{
name: " 只能",
value: 1
},
{
name: " 價位",
value: 1
},
{
name: " 閃退",
value: 1
},
{
name: " 搶到",
value: 1
},
{
name: " 其它",
value: 1
},
{
name: " 便宜",
value: 1
},
{
name: " 兩百",
value: 1
},
{
name: " 盈利",
value: 1
},
{
name: " 機智",
value: 1
},
{
name: " 更新換代",
value: 1
},
{
name: " 太亂",
value: 1
},
{
name: " 賠付",
value: 1
},
{
name: " 自營",
value: 1
},
{
name: " 產品",
value: 1
},
{
name: " 手持",
value: 1
},
{
name: " 夜景",
value: 1
},
{
name: " 機子",
value: 1
},
{
name: " 拆過",
value: 1
}],
//小鳥圖片
image: "data:image/png;base64,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"
}
var maskImage = new Image();
maskImage.src = data.image
// 指定圖表的配置項和數據
option = {
tooltip: {
show: true
},
series: [{
type: "wordCloud",
gridSize:6,
//shape:'diamond',
maskImage: maskImage,
sizeRange: [12, 50],
width:800,
height:500,
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:data.value
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
3.資源源碼
資源源碼已上傳，https://download.csdn.net/download/Ace_2/12236165
資源我設置的0積分下載啊，咋還是要積分才能下。。。
需要源碼的可以關注公衆號“編程江湖”，回覆“echarts”領取資源。
