ECharts(四)

ECharts 关系比较操作符

1. 关系操作符基于数值大小进行比较，可以设定这些：>（gt）、>=（gte）、<（lt）、<=（lte）、=（eq）、!=（ne、<>）、reg。（小括号中的符号或名字，是别名，设置起来作用相同）
2. 多个关系操作符能声明在一个 {} 中，例如 { dimension: 'Price', '>=': 20, '<': 30 }。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。
3. data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）
   1. “类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 ’ 123 '。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。
4. 需要对日期对象（JS Date）或者日期字符串（如 '2012-05-12'）进行比较时，需要手动指定 parser: 'time'，例如 config: { dimension: 3, lt: '2012-05-12', parser: 'time' }。
5. 纯字符串比较也被支持，但是只能用在= 或 != 上。而 >, >=, <, <=并不支持纯字符串比较
6. reg操作符能提供正则表达式比较,例如，{ dimension: 'Name', reg: /\s+Müller\s*$/ } 能在 'Name' 维度上选出姓 'Müller' 的数据项。

ECharts 的逻辑比较

1. 支持逻辑比较操作符与或非（ and | or | not ）：

   option = {
     dataset: [
       {
         source: [
           // ...
         ]
       },
       {
         transform: {
           type: 'filter',
           config: {
             // 使用 and 操作符。
             // 类似地，同样的位置也可以使用 “or” 或 “not”。
             // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。
             and: [
               { dimension: 'Year', '=': 2011 },
               { dimension: 'Price', '>=': 20, '<': 30 }
             ]
           }
           // 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。
         }
       }
     ],
     series: {
       type: 'pie',
       datasetIndex: 1
     }
   };
   

2. and/or/not可以被嵌套

   transform: {
     type: 'filter',
     config: {
       or: [{
         and: [{
           dimension: 'Price', '>=': 10, '<': 20
         }, {
           dimension: 'Sales', '<': 100
         }, {
           not: { dimension: 'Product', '=': 'Tofu' }
         }]
       }, {
         and: [{
           dimension: 'Price', '>=': 10, '<': 20
         }, {
           dimension: 'Sales', '<': 100
         }, {
           not: { dimension: 'Product', '=': 'Cake' }
         }]
       }]
     }
   }
   

ECharts 解析器（ parser ）

1. “解析器”（ parser ）将对值进行解析后再做比较

2. 解析器的使用：

   1. parser: 'time'：把原始值解析成时间戳（ timestamp ）后再做比较，parser: 'time'：和echarts.time.parse 相同,当原始值为时间对象（ JS Date 实例），或者是时间戳，或者是描述时间的字符串（例如 ‘2012-05-12 03:11:22’ ），都可以被解析为时间戳，然后就可以基于数值大小进行比较,如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。
   2. parser: 'trim'：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。
   3. parser: 'number'：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 NaN
   4. 含有尾缀的字符串（例如'33%', 12px），需要手动指定parser: 'number'，从而去掉尾缀转为数值才能比较。

3. 使用 parser: ‘time’：

   option = {
     dataset: [
       {
         source: [
           ['Product', 'Sales', 'Price', 'Date'],
           ['Milk Tee', 311, 21, '2012-05-12'],
           ['Cake', 135, 28, '2012-05-22'],
           ['Latte', 262, 36, '2012-06-02'],
           ['Milk Tee', 359, 21, '2012-06-22'],
           ['Cake', 121, 28, '2012-07-02'],
           ['Latte', 271, 36, '2012-06-22']
           // ...
         ]
       },
       {
         transform: {
           type: 'filter',
           config: {
             dimension: 'Date',
             '>=': '2012-05',
             '<': '2012-06',
             parser: 'time'
           }
         }
       }
     ]
   };
   

数据转换器 “sort”

1. "sort" 是另一个内置的数据转换器，用于排序数据,主要能用于在类目轴（ axis.type: ‘category’ ）中显示排过序的数据

   option = {
     dataset: [
       {
         dimensions: ['name', 'age', 'profession', 'score', 'date'],
         source: [
           [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
           ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
           [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
           ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
           [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
           [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
           ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
           [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
           ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
         ]
       },
       {
         transform: {
           type: 'sort',
           // 按分数排序
           config: { dimension: 'score', order: 'asc' }
         }
       }
     ],
     series: {
       type: 'bar',
       datasetIndex: 1
     }
     // ...
   };
   

2. 数据转换器 "sort"的用法可以多重排序，多个维度一起排序

3. “sort” 的排序规则;

   1. 默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序
   2. 对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序
   3. 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。称呼“后者”为“incomparable”，并且可以设置 incomparable: 'min' | 'max' 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果,这个设定的用途，比如可以是，决定空值（例如null, undefined, NaN, '', '-'）在排序的头还是尾。

4. 过滤器 filter: 'time' | 'trim' | 'number'可以被使用，和数据转换器"filter"中的情况一样

   1. 如果要对时间进行排序（例如，值为 JS Date 实例或者时间字符串如 ‘2012-03-12 11:13:54’），需要声明parser: 'time'。
   2. 如果需要对有后缀的数值进行排序（如 '33%', '16px'）需要声明 parser: 'number'。

5. “多维度排序”

   option = {
     dataset: [
       {
         dimensions: ['name', 'age', 'profession', 'score', 'date'],
         source: [
           [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
           ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
           [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
           ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
           [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
           [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
           ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
           [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
           ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
         ]
       },
       {
         transform: {
           type: 'sort',
           config: [
             // 对两个维度按声明的优先级分别排序。
             { dimension: 'profession', order: 'desc' },
             { dimension: 'score', order: 'desc' }
           ]
         }
       }
     ],
     series: {
       type: 'bar',
       datasetIndex: 1
     }
     //...
   };
   

使用外部的数据转换器

1. 除了上述的内置的数据转换器外,也可以使用外部的数据转换器

2. 外部数据转换器能提供或自己定制更丰富的功能

3. 使用第三方库 ecStat 提供的数据转换器:生成数据的回归线：

   // 首先要注册外部数据转换器。
   echarts.registerTransform(ecStatTransform(ecStat).regression);
   
   option = {
     dataset: [
       {
         source: rawData
       },
       {
         transform: {
           // 引用注册的数据转换器。
           // 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。
           // 而内置数据转换器（如 'filter', 'sort'）没有名空间。
           type: 'ecStat:regression',
           config: {
             // 这里是此外部数据转换器所需的参数。
             method: 'exponential'
           }
         }
       }
     ],
     xAxis: { type: 'category' },
     yAxis: {},
     series: [
       {
         name: 'scatter',
         type: 'scatter',
         datasetIndex: 0
       },
       {
         name: 'regression',
         type: 'line',
         symbol: 'none',
         datasetIndex: 1
       }
     ]
   };