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 ...
随机推荐
- NYOJ -37回文字符串
这道题看了好大会没有思路,上网一搜发现这么简单,但是我为什么就想不到呢,??就是求和它的逆序之后的字符串最长公共子序列,然后用总的长度减去它就行了.原因是是因为只要是在公共子序列里面,那么他就是对称的 ...
- JSP验证码
ImageServlet.java package cn.hist.test.servlet; import java.awt.Color; import java.awt.Font; import ...
- SGU131--NYOJ435
参考blog http://m.blog.csdn.net/blog/u012760629/36927465 http://www.cppblog.com/menrowitianya/archive/ ...
- java反射机制 struts2 获取 action、method、invocation、proxy
ActionInvocation invocation = ActionContext.getContext().getActionInvocation(); Object action = invo ...
- WinAPI——谐振动的合成
#include<Windows.h> #include<math.h> #define NUM 1000 #define PI 3.14159 LRESULT CALLBAC ...
- MVC中不能使用原生态的#include ，可替代的解决方案
<!--#include file="../stuff/foo/box.aspx"--> 1.可以用 <%: Html.Partial("~/Views ...
- Linux下快速搭建DNS服务器
一.术语解释:TTL Time To Live 缓冲保留时间ORIGIN 属于哪个域@ 代指域IN 开头需要空格SOA 一行记录类型的开始参数:forwarders {} 指向自己无法解析的域名跳转到 ...
- 如何安装Oracle Database 11g数据库
先选择你适合你的系统版本,32位系统的请选择32位的,64位系统可以使用32位也可以使用64位,建议采用64位的! 适用于 Microsoft Windows(32 位)的 Oracle Databa ...
- Struts2的创建Web项目入门
之前学过javaEE开发,学了之后便去做前端了,再也没碰过javaEE.现在重新学习和部署,入门级,使用MyEclipse10版本. 简单说一下过程. struts步骤: 1. web project ...
- 写一个MyORM--利用反射的方法
本文的目的是为了更加深刻的理解反射. ORM:Object Relational Mapping对象关系映射,是解决了面向对象语言和关系型数据库不匹配的问题. ORM是一种思想,实现这种思想的技术有很 ...