博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
.net图表之ECharts随笔04-散点图
阅读量:4583 次
发布时间:2019-06-09

本文共 1661 字,大约阅读时间需要 5 分钟。

见图说话,修改参数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可以在刚打开图表时使数据点慢慢变大,即动画加载

转载于:https://www.cnblogs.com/Rombo713/p/10027100.html

你可能感兴趣的文章
tftp服务器的搭建和使用
查看>>
python学习01
查看>>
PostgreSQL的case when
查看>>
(转载)虚幻引擎3--【UnrealScript教程】章节一:4.代码的注释
查看>>
如何阅读他人的程序代码
查看>>
Maven使用教程
查看>>
《Java并发编程实战》第八章 线程池的使用 读书笔记
查看>>
Excel中mod函数的使用方法
查看>>
Nginx 添加 PHP 支持
查看>>
stray '\343' in program 编译错误
查看>>
生成网站,如何不生成.pdb文件?
查看>>
互联网项目管理要点
查看>>
WPF,Silverlight与XAML读书笔记第三十二 - 可视化效果之布局定位
查看>>
MapReduce入门小例子
查看>>
纪中2016.10.29比赛总结
查看>>
jzoj100048. 紧急撤离
查看>>
令人疑惑的 std::remove 算法
查看>>
Int..的范围
查看>>
HDU 2585 [Hotel]字符串递归处理
查看>>
ffmpeg 编码h264 profile如何设置为baseline的问题
查看>>