使用Echarts自定义图形

Echarts要自定义图形，需引入两个js,分别是echarts.min.js和echarts-wordclound.min.js,下载地址为https://github.com/ecomfe/echarts-wordcloud。

操作步骤：

1、设置div,定义要显示的值，var keywords={'abc','efg',..........};

<div id="main" style="width:1200px;height:800px;"></div>

2、定义一个数组，用于存放要显示的数值，var data = [];

for(var key in keywords){

data.push({

name : key,

value : Math.sqrt(key[keywords])     

})

}

3、定义图片

var maskImage = new Image();

maskImage .src = "/style/login/img/31861048.jpg";

4、设置词汇云参数,有标题、背景颜色、列、文本样式

var options = {

title：{

text:'搜索指数'，

x:'center',

textstyle:{

fontsize:23

},

backgroundcolor:'#F7F7F7',

series:[{

name:'搜索指数',

type:'wordCloud',

//size: ['9%', '99%'],

sizeRange: [12,80],

//textRotation: [0, 45, 90, -45],

rotationRange: [-45,90],

//shape: 'circle',

maskImage:maskImage,

textPadding:0,

autoSize: {

enable:true,

minSize:6

},

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

}]

}

5、初始化echarts

var myChart = echarts.init(document.getElementById('main')); //这个main是div

6、往图片中加入词云

maskImage.onload=function(){

myChart.setOption(option);

};

7、调整浏览器窗口显示大小

window.onresize =function() {

        myChart.resize();

}