eCharts的随笔
1.散点图中找最优记录
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css">
<script src="js/echarts.common.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 620px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = [[],[]];
var showVal = [[3, 200099, "顺丰"], [2, 500039, "腾讯"], [5, 188669, "中科"], [4, 900009, "华为"], [3, 333339, "阿里"], [4, 233339, "万达"], [2, 433339, "中信"], [7, 388889, "中科"], [6, 388889, "kkk"], [4, 233359, 'lekd']];
showVal = showVal.sort(function (a, b) {
if (a[0] == b[0]) {
return a[1]>b[1]
}
return a[0] < b[0]
});
var schema = [
{ name: 'money', index: 0, text: '金额' },
{ name: 'selUser', index: 1, text: '选择中标人' }
];
for (var i = 0; i < showVal.length; i++) {
var a= [];
if (showVal[0][1] == showVal[i][1]) {
if (showVal[0][0] == showVal[i][0]) {
data[0].push(showVal[i]);
} else {
data[1].push(showVal[i]);
}
} else {
data[1].push(showVal[i]);
}
}
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#fff'
}]),
title: {
left :'35%',
text: '寻找纸板插入物, 纸板供应商',
textStyle:{
color: '#354052',
fontSize:16
}
},
//系列标记
legend: {
y: 'bottom',
data: ['投标', '最佳出价'],
itemGap:40,
},
//提示框的事例
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ value[2]
+ '</div>'
+ schema[0].text + '：' + value[1] + '<br>'
+ '选择中标人<br>'
}
},
//x坐标的设置
xAxis: {
name: '供应商评分',
nameTextStyle: {
color: '#7F8FA4',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#979797'
}
},
splitLine: {
lineStyle: {
color: '#D8D8D8',
type: 'dashed',
}
}
},
//y坐标的设置
yAxis: {
name: '投标金额',
//坐标轴名称
nameTextStyle: {
color: '#7F8FA4',
fontSize: 12
},
//坐标轴的设置
axisLine: {
lineStyle: {
color: '#979797'
}
},
//坐标轴的分割线
splitLine: {
lineStyle: {
color: '#D8D8D8',
type: 'dashed',
}
},
scale: true
},
series: [{
name: '最佳出价',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[1]) / 5e2 * 10;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(255,128,5,0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#FF8005 '
}, {
offset: 1,
color: '#FF8005'
}])
}
}, markLine: {
silent: true,
lineStyle: {
normal: {
type: 'solid',
}
},
data: [{
yAxis: data[1][7][1]
}],
label: {
normal: {
formatter:'机会金额'
}
} }
}, {
name: '投标',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[1]) / 5e2 * 10;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(55,178,72,0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#37B248'
}, {
offset: 1,
color: '#37B248'
}])
}
}, }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2地图中的特殊标记
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css">
<script src="js/echarts.common.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function randomData() {
return Math.round(Math.random() * 1000);
}
var pricePoint = [[121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33], [120.13, 33.38], [118.87, 42.28], [102.188043, 38.520089]];
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
"金昌": [102.188043, 38.520089],
};
var geoData = [
{ name: "海门", value: 9 },
{ name: "鄂尔多斯", value: 12 },
{ name: "招远", value: 12 },
{ name: "舟山", value: 12 },
{ name: "齐齐哈尔", value: 14 },
{ name: "盐城", value: 15 },
{ name: "赤峰", value: 16 },
{ name: "金昌", value: 19 }
]
//获取唯一识别的值
var selName = geoCoordMap.金昌.toString();
var convertData = function (data, geoCoord1) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoord1[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var setTip = function (data) {
var res = [];
if(data&&data.length>0){
for(var i=0;i<data.length;i++){
res.push({
coord: data[i],
label: {
normal: { show: false }
},
symbol: data[i].toString() != selName ? 'image://image/page.png' : 'image://image/page1.png',
})
}
}
return res
}
option = {
backgroundColor: '#fff',
title: {
text: '全国主要城市空气质量',
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#E7E7E7',
borderColor: '#fff'
},
emphasis: {
//鼠标移上去的属性
areaColor: '#E7E7E7'
}
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoData, geoCoordMap),
//将默认的显示隐藏掉
symbolSize: 0,
//自定义标示点
markPoint: {
data: setTip(pricePoint),
//设置图片的偏移
// symbolOffset: ['-5%', '-5%'],
//设置图片的宽高
symbolSize: [15,20],
},
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
eCharts的随笔的更多相关文章
- Echarts使用随笔（1）-Echarts中markPoint的使用（静态、动态）-effect
先看一段关于初始化Echart js的使用 myChart = echarts.init(document.getElementById('mainChart')); var o ...
- Echarts使用随笔（2）-Echarts中mapType and data
本文出处:http://blog.csdn.net/chenxiaodan_danny/article/details/39081071 series : [ { ...
- 本地安装配置redis
Windows中redis的下载及安装.设置 本文是转载自:https://www.cnblogs.com/jylee/p/9844965.html 下载地址: https://github.co ...
- .net图表之ECharts随笔09-pie环形图表
这是最后的效果图 1. 这里title属性用到了富文本标签 官方文档是用的label属性,看得我一开始格外的懵逼.后面我尝试着在text中写入格式,没想到竟然成功了. rich中定义样式,在text中 ...
- .net图表之ECharts随笔07-自定义系列(多边形)
搞了一天多,才勉强搞出了一个不紧凑的六边形统计图,是真的菜. 这里ECharts的用法与06说的同一种,直接使用带all的js 先上个效果图,用面积来表示人数的多少 1. 参数option的toolt ...
- .net图表之ECharts随笔06-这才是最简单的
今天搞柱形图的时候,发现了一个更简单的用法.那就是直接使用带all的那个js文件 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入(echarts-a ...
- .net图表之ECharts随笔05-不同01的语法步骤
找了好久,一直没找到可用的热力图heatmap.js. 应该说,使用01中的语法一直都无法实现热力图.只能说我太菜了... 现在急于求成,我找了另一种语法来调用ECharts.此种语法的js文件集是从 ...
- .net图表之ECharts随笔03-热力地图
基于01和02 要得到如图所示的热力地图(我从NuGet上下载的包没有heatmap.js文件,没法直接搞热力图,只好暂时先搞着地图.后面尽量搞一下),一般要设置四个参数——title.tooltip ...
- .net图表之ECharts随笔01-最简单的使用步骤
找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...
随机推荐
- Entity Framework 重写OnModelCreating，控制生成表名的单复数
重写OnModelCreating,控制生成表名的单复数 public class MYDbContext : DbContext { public DbSet<User> Users { ...
- ant打包命令
学习ant打包命令.发布到以上tomcat还未做集成部署,无法添加到jenkins中. http://blog.csdn.net/telnetor/article/details/7015935 ht ...
- Navicat:cant create OCI environment.
一直在使用 Navicat ,这是一个数据库客户端软件,能连接多种不同类型的数据库,给我们的日常的工作带来了不少的便捷. 最近,我在电脑上安装了oracle的客户端ODTwihtODAC121012, ...
- innodb的innodb_buffer_pool_size和MyISAM的key_buffer_size
一. key_buffer_size 对MyISAM表来说非常重要. 如果只是使用MyISAM表,可以把它设置为可用内存的 30-40%.合理的值取决于索引大小.数据量以及负载 -- 记住,MyISA ...
- php中bindValue的批量提交sql语句
php预编译sql语句,可以批量提交sql,也可以实现防注入 <?php $dsn='mysql:host=127.0.0.1;port=3306;dbname=bisai'; $usernam ...
- UVA11538Chess Queen（组合数学推公式）
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud 题目意思:在n*m的棋盘中放置两个不同的皇后,使得两者能够相互攻击,共有多少种放置 ...
- [转]Windows环境下利用“共享内存”实现进程间通信的C/C++代码---利用CreateFileMapping和MapViewOfFile
http://blog.csdn.net/stpeace/article/details/39534361 进程间的通信方式有很多种, 上次我们说了最傻瓜的“共享外存/文件”的方法. 那么, 在本文中 ...
- OnCreate
用于创建插入符 /* CClientDC dc(this); TEXTMETRIC tm; dc.GetTextMetrics(&tm);//得到窗口字体信息 CreateSolidCaret ...
- XML解析方式与解析工具
DOM解析原理: 1)JAXP (oracle-Sun公司官方) 2)JDOM工具(非官方) 3)Dom4J工具(非官方) 三大框架(默认读取xml的工具就是Dom4j) ....... SAX解析原 ...
- C 中typedef 函数指针的使用
类型定义的语法可以归结为一句话:只要在变量定义前面加上typedef,就成了类型定义.这儿的原本应该是变量的东西,就成为了类型. int integer; //整型变量int *pointer ...