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 ...
随机推荐
- LSI MegaCli 命令使用4
Dell服务器常用管理命令总结准备新版本的 MegaCli-1.01.24-0.i386.rpm 会把程序安装在/opt下,可以自定义安装目录,例如:rpm --relocate /opt/=/usr ...
- DiskLruCache 硬盘缓存 使用简介
简介 LruCache只是管理了内存中图片的存储与释放,如果图片从内存中被移除的话,那么又需要从网络上重新加载一次图片,这显然非常耗时.对此,Google又提供了一套硬盘缓存的解决方案:DiskLru ...
- Config配置文件读写
config文件读写操作(文字说明附加在程序中) App.config文件 <?xml version="1.0" encoding="utf-8" ?& ...
- JVM 内存分为四大块
1.栈区 存放函数参数值和局部变量值 2.堆区 3.静态区 4.代码区
- Excel连接字符串(Oledb)
Excel的连接字符串参数详解 2011-07-27 15:43:50| 分类: 编程专栏 | 标签:excel 连接字符串 参数 含义 |字号大中小 订阅 程序中读取Excel ...
- 《CSS网站布局实录》学习笔记（一）
今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...
- MSSQL 字符串替换语句
MSSQL替换语句:update 表名 set 字段名=replace(cast(字段名 as varchar(8000)),'abc.com','123.com')例如:update PE_Arti ...
- 搭建maven项目简介
http://jingyan.baidu.com/album/9f7e7ec0b714ae6f29155465.html?picindex=1 Maven学习 (一) 搭建Maven环境 http:/ ...
- swing菜单，常用组件，常用容器
1菜单 import javax.swing.*; import java.awt.*; import java.awt.event.InputEvent; import java.awt.event ...
- noip201506 Message 信息传递
试题描述: 有 n 个同学(编号为 1 到 n )正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为 i 的同学的信息传递对象是编号为 T_i 的同学.游戏开始时,每人都只 ...