见图说话,修改参数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. .net利用NPOI生成excel文件

    整理代码,这个是生成excel文件,用的是HSSF的方式,只能生成65535行,256列的数据,如果要看office07之后的生成,之前的随笔里提过.这个是一个完整的过程. 首先是已经查找好的数据,这 ...

  2. 解决mysql安装出现error Nr.1045问题

    我们在windows下安装mysql最后一步时会出现Access denied for user 'root'@localhost'(using password:No)的问题.这几个问题经常出现在卸 ...

  3. Linux mount命令

    mount 1.作用 mount命令的作用是加载文件系统,它的用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 mount -a [-fv] [-t vfstype] [-n] [-r ...

  4. hibernate项目

    http://blog.csdn.net/wzygis/article/details/22985751

  5. PHP递归函数

    递归函数(Recursive Function)是指直接或间接调用函数本身的函数 在每次调用自己时,必须是(在某种意义上)更接近 于解 必须有一个终止处理或计算的准则 function recursi ...

  6. python文件打包

    python文件打包 先安装 pip3 install --upgrade pyinstaller 进入到文件的当前目录 ,在命令行中输入: pyinstaller -F -w[文件名].py 其中- ...

  7. Rest架构风格

    一.REST介绍:: 1.REST是英文 Representational State Transfer的缩写 -- 表象化状态转变 或者 表述性状态转移 1.1 REST是 Web服务的一种架构风格 ...

  8. 2019.02.07 bzoj4316: 小C的独立集(仙人掌+树形dp)

    传送门 题意:给出一个仙人掌森林求其最大独立集. 思路:如果没有环可以用经典的树形dpdpdp解决. fi,0/1f_{i,0/1}fi,0/1​表示第iii个点不选/选的最大独立集. 然后fi,0+ ...

  9. WEB应用支持RESTFUL风格方法

    REST概念 Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. REST风格 资源:互联网所有的事物 ...

  10. java json注解

    (1)初级我们从几个简单的使用场景开始:重命名属性,忽略属性,以及修改属性所使用的类型.注意:下面的例子仅仅显示了成员属性(field properties),注解同样也可以用在成员方法(getter ...