见图说话,修改参数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-散点图的更多相关文章

  1. .net图表之ECharts随笔09-pie环形图表

    这是最后的效果图 1. 这里title属性用到了富文本标签 官方文档是用的label属性,看得我一开始格外的懵逼.后面我尝试着在text中写入格式,没想到竟然成功了. rich中定义样式,在text中 ...

  2. .net图表之ECharts随笔07-自定义系列(多边形)

    搞了一天多,才勉强搞出了一个不紧凑的六边形统计图,是真的菜. 这里ECharts的用法与06说的同一种,直接使用带all的js 先上个效果图,用面积来表示人数的多少 1. 参数option的toolt ...

  3. .net图表之ECharts随笔06-这才是最简单的

    今天搞柱形图的时候,发现了一个更简单的用法.那就是直接使用带all的那个js文件 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入(echarts-a ...

  4. .net图表之ECharts随笔05-不同01的语法步骤

    找了好久,一直没找到可用的热力图heatmap.js. 应该说,使用01中的语法一直都无法实现热力图.只能说我太菜了... 现在急于求成,我找了另一种语法来调用ECharts.此种语法的js文件集是从 ...

  5. .net图表之ECharts随笔03-热力地图

    基于01和02 要得到如图所示的热力地图(我从NuGet上下载的包没有heatmap.js文件,没法直接搞热力图,只好暂时先搞着地图.后面尽量搞一下),一般要设置四个参数——title.tooltip ...

  6. .net图表之ECharts随笔01-最简单的使用步骤

    找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...

  7. .net图表之ECharts随笔02-字符云

    后续每一类图表,若无特殊说明,都将建立在01的基础上,修改参数option,且参数均以json的格式 要形成如图所示的字符云,一般需要设置两个大参数——title和series 其中,title就是图 ...

  8. .net图表之ECharts随笔08-bar柱状图

    之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...

  9. 基于html5 Canvas图表库 : ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

随机推荐

  1. word2vec_训练模型

    from gensim.models import Word2Vecfrom gensim.models.word2vec import LineSentence # 原始的训练语料转化成一个sent ...

  2. maven 介绍(zz )

    Maven 编辑     目录 1简介 2特点 3常用命令 4推荐书籍 5Win7配置 6生命周期     1   1简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构 ...

  3. 【机器学习】感知机学习算法(PLA)

    感知机问题学习算法引入:信用卡问题 根据已知数据(不同标准的人的信用评级)训练后得出一个能不能给新客户发放信用卡的评定结果 解决该问题的核心思想扔为之前所讲到的梯度下降算法,对于更多条件的类似问题,首 ...

  4. mybatis学习五 log4j

    1.  log4j(log for java)由 apache 推出的开源免费日志处理的类库.2. 为什么需要日志: 2.1 在项目中编写 System.out.println();输出到控制台,当项 ...

  5. Mac 环境通用

    mac 下更新 .bash_profile 文件 1.打开terminal(终端) 2.cd ~ ( 进入当前用户的home目录) 3.open .bash_profile (打开.bash_prof ...

  6. 微信小程序开发工具常用快捷键

    格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何 ...

  7. 浅谈 [Ljava.lang.Object 异常

    http://blog.csdn.net/goodleiwei/article/details/7059567 主要原因:取出的是对象的数组,需要遍历单个的对象并获取想用的属性值

  8. C语言常用数据类型说明

     1.取值范围: short一般占两个字节,取值范围:-32768 - 32767   int一般占两个或四个字节,取值范围:-2147483648 - 2147483647 unsigned int ...

  9. python 安装教程

    1) 安装python2.7,下载地址 https://www.python.org/downloads/   ----2.7 安装完成后,设置环境变量加入path   --d:/ruanjian/p ...

  10. xtrabackup安装使用及原理

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具.Xtrabackup中主要包含两个工具 ...