echarts参数详解--散点图
参考地址：http://www.cnblogs.com/weizhen/p/5907617.html
<!--
1、首先需要下载包echarts.js，然后引入该包
-->
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!--引入 ECharts 文件-->
<script src="echarts.js"></script>
</header> <!--
2、基本配置
//第一步调用echarts初始化函数,传入dom对象产生echarts的instance
-->
<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')); //第二步构造数据
var data1 = [];//数据区域缩放组件
var data2 = [];
var data3 = []; //构造随机数
var random = function (max){
return (Math.random() * max).toFixed(3);
}; //将数据装载到数组中
for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}; //3、配置option项
//第三步就是使用echarts的option进行参数的配置
option = {
animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的 //图例
legend: {
data: [
{
name:'scatter2',
icon:'circle',//强制设置图形长方形
textStyle:
{color:'red'}//设置文本为红色
},
{
name:'scatter',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{color:'red'}//设置文本为红色
},
{
name:'scatter3',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{color:'red'}//设置文本为红色
}
],
zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图形会被z值大的图形覆盖
z:3,//z的级别比zlevel低，传说中z值小的会被z值大的覆盖，但不会重新创建Canvas
left:'center',//图例组件离容器左侧的距离。可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
//如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top:'top',
//rigth:'',
//bottom:''
width:'auto',//设置图例组件的宽度，默认值为auto,好像只能够使用px
orient:'horizontal',//设置图例组件的朝向默认是horizontal水平布局，'vertical'垂直布局
align:'auto',//'left' 'right'设置图例标记和文本的对齐，默认是auto
//默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 //'vertical'）的时候为右对齐，及为 'right'。
padding:[20,20,20,20],//设置图例内边距 默认为上下左右都是5，接受数组分别设定
itemGap:20,//图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10
itemWidth:30,//图例标记的图形宽度，默认为25
itemHeight:20,//图例标记的图形高度，默认为14
//formatter:'Legend {name}'//图例文本的内容格式器，支持字符串模板和回调函数两种形式。
formatter:function(name){
return 'Legend '+name;
},
//selectedMode:false,//图例的选择模式，默认为开启，也可以设置成single或者multiple
//selectedMode:'single'//图例的选择模式，默认为开启，也可以设置成single或者multiple
selectedMode:'multiple',//图例的选择模式，默认为开启，也可以设置成single或者multiple
inactiveColor:'#ccc',//图例关闭时的颜色，默认是'#ccc'
selected:{
'scatter2':true,//设置图例的选中状态
'scatter':false,
'scatter3':false
},
tooltip: {//图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切
show: true
},
//backgroundColor:'rgb(128, 128, 128)',//图例的背景颜色，默认为透明的
//borderColor:'rgb(10, 150, 200)',//图例的边框颜色
//borderWidth:2,//图列的边框线宽，默认为1
shadowBlur:30,//图例阴影的模糊大小
shadowColor:'rgb(128, 128, 56)'//阴影的颜色
}, //鼠标移上去的提示
tooltip: {
}, //网格
grid:{
show:true,//是否显示直角坐标系的网格,true显示，false不显示
left:100,//grid组件离容器左侧的距离
containLabel:false,//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。 }, //X轴
xAxis: {
type: 'value',
min: 'dataMin',
name:'xAxis',//x轴的名称
nameLocation:'end',//x轴名称的显示位置'middle'，'end'
nameRotate:30,//坐标轴名字旋转角度值
max: 'dataMax',
gridIndex:0,//x轴所在的grid的索引，默认位于第一个grid
//offset:10,//x轴相对默认位置的偏移，在一个grid中含有多个grid的时候有意义
type:'value',//数值轴适用于连续型数据
//'category'类目轴 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//'time' //时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
//'log' 对数轴。适用于对数数据。
position:'top',//x轴位于grid的上方还是下方，默认为bottom在下方
inverse:false,//是否反向坐标
boundaryGap:['20%','20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
//非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
splitLine: {
show: true
}
}, //Y轴
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
}, //数据区域缩放、滚动条
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
], //visualMap
visualMap: {
//type: 'continuous',//类型为连续型。
min: 0,//指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
max: 1000000,//指定 visualMapContinuous 组件的允许的最大值。'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
//setOption 改变 min、max 时 range 的自适应
text:['High','Low'],//两端的文本['High', 'Low']
range:[0, 800000],//指定手柄对应数值的位置
calculable:true,//表示是否设置了拖拽用的手柄，如果为false则拖拽结束时，才更新视图。如果为ture则拖拽手柄过程中实时更新图表视图。
realtime: false,//表示拖拽时是否实时更新
inverse:false,//是否翻转组件
precision:2,//展式的小数点精度
itemWidth:30,//长条的宽度，默认为20
itemHeight:200,//长条的高度，默认是140
align:'left',//组件中手柄和文字的摆放位置'auto' (orient 为 horizontal 时有效) 'left' 'right' （rient 为 vertical 时有效。）'top' 'bottom'
textGap:20,//两端文字与主体之间的距离
show:true,//是否显示数据映射组件
dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，
seriesIndex:0,//指定去哪个系列的数据
hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
//反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值。
//inRange: {//能定义目标系列（参见 visualMap-continuous.seriesIndex）视觉形式，也同时定义了 visualMap-continuous 本身的视觉样式。
//视觉通道
//inRange 中，可以有任意几个的『视觉通道』定义（如 color、symbolSize 等）。这些视觉通道，会被同时采用。
//一般来说，建议使用 透明度（opacity） ，而非 颜色透明度（colorAlpha） （他们细微的差异在于，前者能也同时控制图元中的附属物（如 label）的透明度，而后者只能控制图元本身颜色的透明度）。
//视觉映射的方式：支持两种方式：线性映射、查表映射。
//线性映射 表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。
//查表映射 表示 series.data 中的所有值（dataValue）是可枚举的，会根据给定的映射表查表得到映射结果。
/*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]//图元的大小。*/
// 表示 目标系列 的视觉样式。 //},
/*target: {
inRange: {
symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物（如文字标签）的透明度。
colorLightness: 颜色的明暗度，参见 HSL。
colorSaturation: 颜色的饱和度，参见 HSL。
colorHue: 颜色的色调，参见 HSL。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200] }
},*/
// 表示 visualMap-continuous 本身的视觉样式。
/*controller: {visualMap 组件中，控制器 的 inRange outOfRange 设置。如果没有这个 controller 设置，控制器 会使用外层的 inRange outOfRange 设置；如果有这个 controller 设置，则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。
inRange: {
symbolSize: [30, 100],
symbol:['circle', 'rect', 'diamond'],
color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}
},*/
type:'piecewise',//表示分段型视觉映射组件（visualMapPiecewise）
splitNumber:10,//对于连续型数据，自动切分成几段默认是5段
pieces: [//每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。
],
min:2,//指定 visualMapPiecewise 组件的最小值。
max:5,//指定 visualMapPiecewise 组件的最大值。
selectedMode:'multiple',//(多选)(单选)
inverse:false,//是否反转
precision:2,//数据展示的小数精度
itemWidth:20,//图形的宽度，即每个小块的宽度。
itemHeight:20,//图形的高度，即每个小块的高度
text:['High', 'Low'],//两端的文本
align:'auto',// 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
textGap:20,//两端文字主体之间的距离
itemGap:10,//每两个图元之间的间隔距离，单位为px。
itemSymbol:'circle',//图形的形状 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
show:true,//是否显示组件
dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。
seriesIndex:0,//指定取哪个系列的数据，即哪个系列的 series.data。
hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
//inRange://参考visualMapContinuous
//outOfRange://参考visualMapContinuous*/
/*categories: [//用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],*/
/*inRange: {
// visual value 可以配成 Object：
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都对应到 'green'。
},
// visual value 也可以只配一个单值，表示所有都映射到一个值，如：
color: 'green',
// visual value 也可以配成数组，这个数组须和 categories 数组等长，
// 每个数组项和 categories 数组项一一对应：
color: ['red', 'black', 'green', 'yellow', 'white']
},*/
/*outOfRange:{//定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
olor: ['orangered','yellow','lightskyblue']*/
}, //装载数据
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',//散点图
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
}; // 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
echarts参数详解--散点图的更多相关文章
- Echarts dataZoom缩放功能参数详解：
dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...
- Nginx主配置参数详解，Nginx配置网站
1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...
- iptables参数详解
iptables参数详解 搬运工:尹正杰 注:此片文章来源于linux社区. Iptalbes 是用来设置.维护和检查Linux内核的IP包过滤规则的. 可以定义不同的表,每个表都包含几个内部的链,也 ...
- chattr的常用参数详解
chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...
- mha配置参数详解
mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...
- $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解
[一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...
- linux PHP 编译安装参数详解
linux PHP 编译安装参数详解 ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc -- ...
- 【转】jqGrid 各种参数 详解
[原文]http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.htmljqGrid 各种参数 详解 JQGrid JQGrid是一个 ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
随机推荐
- LoadRunner中 host-mapping的Capture Level说明
lr录制后空白,那么就要弄明白lr中host-mapping的Capture Level选项socket level data.winnet level data.socket level andwi ...
- 20165235 祁瑛 2018-4 《Java程序设计》第七周学习总结
20165235 祁瑛 2018-4 <Java程序设计>第七周学习总结 教材学习内容总结 MySQL数据管理系统 MySQL数据管理系统,简称MySQL,是世界上流行的数据管理系统. M ...
- day 36 网络编程终结内容
今日概要: 1 gevent模块 协程:单线程下实现并发(并发指的是看起来同时运行,实现方式:切换+保存状态) 遇到IO切换到其他任务去执行,这种切换才能提高效率 gevent模块 1.切换+保存状态 ...
- ACM-ICPC Beijing 2016 Genius ACM（倍增+二分）
描述 给定一个整数 M,对于任意一个整数集合 S,定义“校验值”如下: 从集合 S 中取出 M 对数(即 2∗M 个数,不能重复使用集合中的数,如果 S 中的整 数不够 M 对,则取到不能取为止),使 ...
- 使用zabbix监控oracle表空间
0.概述 zabbix是一款极其强大的开源监控工具,下面我分享下zabbix如何监控表空间,跟着这个思路,监控其他项都是类似操作. 前提条件是你已经有了zabbix server和zabbix age ...
- XML相关的安全漏洞-XXE,XPATH小结
0x00前言: 本文主要小结以下php下的xpath查询xml结构的漏洞利用和XXE漏洞利用 xml是可扩展标记语言,它被设计出来是为了存储传输数据的. 它的结构是树形结构,并且标签要成对出现比如下面 ...
- mysql数据库操作语句整合
查看版本:select version();显示当前时间:select now(); 注意:在语句结尾要使用分号; 远程连接 一般在公司开发中,可能会将数据库统一搭建在一台服务器上,所有开发人员共用一 ...
- 2189 ACM 母函数 素数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2189 思路:先找出150以内的 素数,然后再用母函数或01背包计算 复习母函数的代码:https://ww ...
- set_include_path和get_include_path用法详解
首先set_include_path这个函数呢,是在脚本里动态地对PHP.ini中include_path进行修改的.而这个include_path呢,它可以针对下面的include和require的 ...
- HTTP 500 Invalid bound statement错误
整合SSM框架的时候出现的错误,根据提示信息,找不到 dao.IUserDao.insertUser 方法,可能是mybatis的配置文件出现了问题. 在网上查了一些解决办法,说的最多的是mapper ...