echarts 热点泡泡图

1 .引入echarts的js文件

<script src="../../../resources/scripts/echarts/echarts3-all.js" type="text/javascript"></script>

2.在html中定义echarts位置

      <div id="hot-words" style="width: 100%; height: 100%;">

3.在js中构造渲染echarts

loadStyle: {
text: "数据加载中...",
color: '#58acff',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)'
},

//初始化echart
_this.echart = echarts.init(document.getElementById('hot-words'));

//x显示加载中
_this.echart.showLoading(_this.loadStyle);

//去除显示加载中
_this.echart.hideLoading();

/**
* @description 热频词
*/
async initHotWords() {
let _this = this
_this.echart = echarts.init(document.getElementById('hot-words'));
_this.echart.showLoading(_this.loadStyle);
const OPTION_DATA = await new Promise(resolve => {
page.ajax(page.getAjaxSettings({
		serviceType: "crossDomainCall",
		serviceName: "XXXXXX",
		methodName: "hotWords",
		data: {
				ticket: page.publicTicket,
				queryParams: {
					canton: "320500"
					}
				},
		success: function (resultData) {	
			resolve(resultData.data)
			//数据格式[{value:"",name:""}]
			_this.dataStatistics = resultData.data;
		} ,
		complete: function () {
			//取消加载显示
			_this.echart.hideLoading();
		}
	}))
})

var plantCap = OPTION_DATA
var datalist = [
	{
		offset: [50, 63],
		symbolSize: 65,
		opacity: .9,
		color: '#9bcaff'
	}, 
	{
		offset: [43, 33],
		symbolSize: 56,
		opacity: .9,
		color: '#b09bff'
	}, 
	{
		offset: [10, 43],
		symbolSize: 55,
		opacity: .9,
		color: '#8edee6'
	}, 
	{
		offset: [8, 78],
		symbolSize: 54,
		opacity: .9,
		color: '#ffc59b'
	}, 
	{
		offset: [25, 25],
		symbolSize: 53,
		opacity: .9,
		color: '#9bcaff'
	}, 
	{
		offset: [75, 62],
		symbolSize: 52,
		opacity: .9,
		color: '#ffc59b'
	},
	{
		offset: [28, 82],
		symbolSize: 50,
		opacity: .9,
		color: '#8edee6'
	},
	{
		offset: [95, 62],
		symbolSize: 49,
		opacity: .9,
		color: '#68333f'
	},
	{
		offset: [68, 32],
		symbolSize: 48,
		opacity: .9,
		color: '#ffc59b'
	},
	{
		offset: [90, 20],
		symbolSize: 55,
		opacity: .9,
		color: '#9bcaff'
	}
];
//构造echarts数据
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.value + '\n' + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
	normal: {
		textStyle: {
			fontSize: 11
					}
			}
		},
itemStyle: {
	normal: {
		color: itemToStyle.color,
		opacity: itemToStyle.opacity
			}
		},
})
}
let option = {
//echarts位置设置
	grid: {
		show: false,
		top: 10,
		bottom: 10
	},
//x轴
	xAxis: [{
		gridIndex: 0,
		type: 'value',
		show: false,
		min: 0,
		max: 100,
		nameLocation: 'middle',
		nameGap: 5
	}],
//y轴
	yAxis: [{
		gridIndex: 0,
		min: 0,
		show: false,
		max: 100,
		nameLocation: 'middle',
		nameGap: 30
	}],
//数据项
	series: [{
		type: 'scatter',
		symbol: 'circle',
		symbolSize: 120,
		label: {
			normal: {
				show: true,
				formatter: '{b}',
				color: '#fff',
				textStyle: {
					fontSize: '20'
					}
				},
		},
		itemStyle: {
			normal: {
				color: '#00acea'
			}
		},
		data: datas
	}]
}
//渲染数据到echarts
_this.echart.setOption(option)
},

4.效果显示