echarts自定义气泡图
echarts自定义气泡图
拿到的需求是实现自定义x、y、size、color的气泡图，color按值以阶排布（提需求的是我女朋友，咱也不敢问，还得加班干你说气人不~），分析完需求后我决定学习下echarts的实现，代码如下： html：
<!DOCTYPE h
echarts自定义气泡图
拿到的需求是实现自定义x、y、size、color的气泡图，color按值以阶排布（提需求的是我女朋友，咱也不敢问，还得加班干你说气人不~），分析完需求后我决定学习下echarts的实现，代码如下：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>KEGG</title>
<style>
body {padding: 0px;margin: 0px;border: 0px;
}
</style>
<script type=text/javascript src=jquery-.2.js></script>
<script type=text/javascript src=js></script>
<script type=text/javascript src=myScript.js></script>
</head>
<body>
<div style=width:95%;margin:20px auto;><div style=width:95%;margin:0px 0px 50px 0px; align=center><input type=file id=dataFile><button type=button onclick=getData()>生成图表</button></div><div id=chartDiv style=width:95%;height:600px;></div>
</div>
</body>
</html>
js：
function getData() {var data = new Array();var file = $(#dataFile)[0].files[0];var reader = new FileReader(); = function() {var row = this.result.split(\r\n);for(var i in row) {if(i!=0) {data[i-1] = new Array();var cell = row[i].split(,);for(var j in cell) {data[i-1][j] = cell[j]; }}}initChart(data);}reader.readAsText(file);
}
function initChart(data) {var color = new Array();for(var i in data) {color[i] = data[i][];}var max = apply(null,color);var min = apply(null,color);var myChart = echarts.init(document.getElementById( chartDiv ));var option = {title: {text: KEGG ,x: center },tooltip: {formatter: function(params) {return params.value[1] :<br>params.value[0];}},dataRange: {x: right ,y: center ,min: min,max: max,color:[ red , blue ],calculable: true,formatter: function(value) {return value;}},xAxis: {type: value },yAxis: {type: category },series: [{name: KEGG ,type: scatter ,symbolSize: function(value) {return value[2]/5;},data: data}]};myChart.setOption(option);
}
效果图：
这里的阶排布我本来是自己写的算法来实现的，然后在series自定义显示，后来觉得echarts的dataRange或visualMap挺好用，就改了。
自定义阶显示：
itemStyle: {normal: {color: function(params) {return getColor(min,max,params.value[4]);}}}function getColor(min,max,n) {var a = (n*255)/(max-min);var r = 0;var g = 0;var b = 0;if(n==min) {b = 255;} else if(n==max) {r = 255;} else {b = 255-a;r = a;}r = parseInt(r);g = parseInt(g);b = parseInt(b);return rgbaToHex(rgb(r,g,b));
}
function rgbaToHex(color) {var values = color.replace(/rgba?\(/, ).replace(/\)/, ).replace(/[\s]/g, ).split( , );var a = parseFloat(values[]||1);var r = Math.floor(a*parseInt(values[0])(1-a)*255);var g = Math.floor(a*parseInt(values[1])(1-a)*255);var b = Math.floor(a*parseInt(values[2])(1-a)*255);return #(0(16)).slice(-2)(0(16)).slice(-2)(0(16)).slice(-2);
}
演示链接
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2024-02-10 08:09:57
推荐阅读
| 留言与评论（共有 16 条评论） |
| 本站网友 北京限价商品房 | 18分钟前 发表 |
| center } | |
| 本站网友 骨胶原 | 15分钟前 发表 |
| KEGG | |
| 本站网友 玉米须的功效 | 17分钟前 发表 |
| 0px;margin | |
| 本站网友 肺吸虫 | 11分钟前 发表 |
| color);var myChart = echarts.init(document.getElementById( chartDiv ));var option = {title | |
| 本站网友 鲁信长春花园二手房 | 28分钟前 发表 |
| ).replace(/[\s]/g | |
| 本站网友 响水房屋出租 | 0秒前 发表 |
| color的气泡图，color按值以阶排布（提需求的是我女朋友，咱也不敢问，还得加班干你说气人不~），分析完需求后我决定学习下echarts的实现，代码如下： html： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>KEGG</title> <style> body {padding | |
| 本站网友 妙桃琴面假体隆胸 | 5分钟前 发表 |
| max | |
| 本站网友 expander | 19分钟前 发表 |
| 自定义阶显示： itemStyle | |
| 本站网友 中国联合网络通信有限公司 | 7分钟前 发表 |
| ).replace(/\)/ | |
| 本站网友 李忠秀 | 2分钟前 发表 |
| {color | |
| 本站网友 风生 | 17分钟前 发表 |
| min | |
| 本站网友 肏女人 | 12分钟前 发表 |
| ).replace(/[\s]/g | |
| 本站网友 保利麓谷林语 | 30分钟前 发表 |
| g | |
| 本站网友 hs小游戏 | 21分钟前 发表 |
| 95%;height | |
| 本站网友 郝琳 | 3分钟前 发表 |
| echarts自定义气泡图 拿到的需求是实现自定义x | |