.net图表之ECharts随笔04-散点图
见图说话,修改参数option实现上图显示:
1. 共用参数title还有一个属性subtext,可以用来设置副标题
2. tooltip与toolbox也是共用属性
3. dataZoom是设置滚动条的,此滚动条是用来确定横栏从哪里开始哪里结尾,如图滚动条前头有段空白,所以横栏从类目3开始,后头无空白则一直显示到底。
属性start和end分别用来设置横栏的初始位置
4. legend可以用来指示图表中哪些种类对应的形状。如图说明,圆形表示series1
5. dataRange用来指示数据大小分别所对应的颜色。
1)属性min和max分别设置最小最大值。
2)orient设置排列方式,horizontal表示横向排列。
3)x和y设置在div中所处的位置
4)color设置两个颜色,表示数据大小的颜色在这两个范围之间变化。图中设置为['lightgreen', 'orange']
5)splitNumber设置划分等级,如图设置为5,min为0且max为100则每20为一个等级
6. xAxis和yAxis分别用了设置x和y轴的刻度
1)当type为value时,表示刻度根据数据的实际值范围自动确定刻度。
2)当type为category,表示根据给定的data确定刻度。
此时需要另外设置其他属性。
其中axisLabel设置每个刻度要显示的文字,其子属性formatter绑定一个函数后表示以这个函数的格式显示:
axisLabel: {
formatter: function (v) {
return '类目' + v
}
}
data用来设置刻度,一般为等差数列/列表。此处有个技巧:可以直接调用一个匿名函数返回一个列表:
data: function () {
var list = [];
var len = 0;
while (len++ < 10) {
list.push(len);
}
return list;
}()
7. 根据之前的学习知道,数据都是通过series来设置的。
1)此时的type要设置为scatter,表示散点图。
2)这里,意外的发现,在series中有tooltip属性!这个属性可以用来设置tooltip的显示格式:
tooltip: {
trigger: 'item',
formatter: function (params) {//这里的params是data属性的值
return params.seriesName + ' (' + '类目' + params.value[0] + ')<br/>'
+ params.value[1] + ', '
+ params.value[2];
},
axisPointer: {
show: true
}
}
3)symbolSize属性可以使显示更直观,即设置数据点的大小。绑定一个匿名函数,参数是data属性的值
4)data是一个列表,第一个值是数据点的x轴坐标,第二个值是y轴的坐标。后面的值一般都是用来为其他属性赋值的。如设置tooltip格式时的value[2],又如上图就是symbolSize设置了以value[2]为直径的圆的面积
5)还有个小功能:设置animation参数为true可以在刚打开图表时使数据点慢慢变大,即动画加载
.net图表之ECharts随笔04-散点图的更多相关文章
- .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 ...
- .net图表之ECharts随笔02-字符云
后续每一类图表,若无特殊说明,都将建立在01的基础上,修改参数option,且参数均以json的格式 要形成如图所示的字符云,一般需要设置两个大参数——title和series 其中,title就是图 ...
- .net图表之ECharts随笔08-bar柱状图
之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
随机推荐
- .net利用NPOI生成excel文件
整理代码,这个是生成excel文件,用的是HSSF的方式,只能生成65535行,256列的数据,如果要看office07之后的生成,之前的随笔里提过.这个是一个完整的过程. 首先是已经查找好的数据,这 ...
- 解决mysql安装出现error Nr.1045问题
我们在windows下安装mysql最后一步时会出现Access denied for user 'root'@localhost'(using password:No)的问题.这几个问题经常出现在卸 ...
- Linux mount命令
mount 1.作用 mount命令的作用是加载文件系统,它的用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 mount -a [-fv] [-t vfstype] [-n] [-r ...
- hibernate项目
http://blog.csdn.net/wzygis/article/details/22985751
- PHP递归函数
递归函数(Recursive Function)是指直接或间接调用函数本身的函数 在每次调用自己时,必须是(在某种意义上)更接近 于解 必须有一个终止处理或计算的准则 function recursi ...
- python文件打包
python文件打包 先安装 pip3 install --upgrade pyinstaller 进入到文件的当前目录 ,在命令行中输入: pyinstaller -F -w[文件名].py 其中- ...
- Rest架构风格
一.REST介绍:: 1.REST是英文 Representational State Transfer的缩写 -- 表象化状态转变 或者 表述性状态转移 1.1 REST是 Web服务的一种架构风格 ...
- 2019.02.07 bzoj4316: 小C的独立集(仙人掌+树形dp)
传送门 题意:给出一个仙人掌森林求其最大独立集. 思路:如果没有环可以用经典的树形dpdpdp解决. fi,0/1f_{i,0/1}fi,0/1表示第iii个点不选/选的最大独立集. 然后fi,0+ ...
- WEB应用支持RESTFUL风格方法
REST概念 Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. REST风格 资源:互联网所有的事物 ...
- java json注解
(1)初级我们从几个简单的使用场景开始:重命名属性,忽略属性,以及修改属性所使用的类型.注意:下面的例子仅仅显示了成员属性(field properties),注解同样也可以用在成员方法(getter ...