echarts 热点泡泡图

1 .引入echarts的js文件
2.在html中定义echarts位置
3.在js中构造渲染echarts
4.效果显示

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.效果显示

echarts 热点泡泡图相关推荐

使用echarts制作泡泡效果
公司项目需要泡泡效果,项目已经引入了vue和echarts框架,就按着两个框架找了找,在echarts官网找到个例子,再结合自己的需求制作而成.只是记录给自己看的,如能帮上别人的忙也是乐意的. 先给个 ...
python画图代码彩虹-echarts绘制彩虹图
echarts绘制彩虹图 1.开发环境 vue+echarts 2.电脑系统 windows10专业版 3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮 ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
Origin如何绘制泡泡图？
首先在Sheet中输入想要绘制泡泡图的数据,在数组名中Width和Length限定了Scatter的位置,Mass定义了泡泡的尺寸,而Type则是用于数据的分组. 在Sheet中选中前三列数据即A(X ...
单个基因集富集分析泡泡图绘制
富集分析是生物信息分析中快速了解目标基因或目标区域功能倾向性的最重要方法之一.其中代表性的计算方式有两种: 一是基于筛选的差异基因,采用超几何检验判断上调或下调基因在哪些GO或KEGG或其它定义的通路 ...
R 学习 - 功能富集泡泡图
功能富集泡泡图功能富集分析用来展示某一组基因(一般是单个样品上调或下调的基因)倾向参与哪些功能调控通路,对从整体理解变化了的基因的功能和潜在的调控意义具有指导作用,也是文章发表中一个有意义的美图.通 ...
R 学习 - 富集分析泡泡图回应
R语言学习 - 富集分析泡泡图刚一出品,Y叔就说有硬伤.Y叔是著名富集分析软件clusterprofiler的原创,而且软件内集成dotplot, enrichmap,cnetmap (后续也实现这 ...
美国城市_泡泡图如何揭示美国最适合居住的城市
美国城市 by Zhen Liu 刘震泡泡图如何揭示美国最适合居住的城市 (How a Bubble Plot Reveals the Best Cities to Live in the US) ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...

echarts 热点泡泡图

echarts 热点泡泡图

1 .引入echarts的js文件

2.在html中定义echarts位置

3.在js中构造渲染echarts

4.效果显示

echarts 热点泡泡图相关推荐

最新文章

热门文章