ECharts

Posted 小企鹅推雪球!

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts相关的知识，希望对你有一定的参考价值。

文章目录

ECharts 坐标轴

  1. 直角坐标系中有x 轴和 y 轴，都由轴线、刻度、刻度标签、轴标题四个部分组成

  2. 通常情况下，x 轴显示在图表的底部，y 轴显示在左侧

    option = 
  xAxis: 
    // ...
  ,
  yAxis: 
    // ...
  
;

  3. x轴用于表示数据维度，用于表示数据的类别，y轴用于表示数据的数值

    option = 
  xAxis: 
    type: 'time',
    name: '销售时间'
    // ...
  ,
  yAxis: 
    type: 'value',
    name: '销售数量'
    // ...
  
  // ...
;

  4. 当 x 轴（水平坐标轴）跨度很大，可以采用区域缩放方式灵活显示数据内容

    option = 
  xAxis: 
    type: 'time',
    name: '销售时间'
    // ...
  ,
  yAxis: 
    type: 'value',
    name: '销售数量'
    // ...
  ,
  dataZoom: [
    // ...
  ]
  // ...
;

  5. 在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 offset 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。

    option = 
  xAxis: 
    type: 'time',
    name: '销售时间'
    // ...
  ,
  yAxis: [
    
      type: 'value',
      name: '销售数量'
      // ...
    ,
    
      type: 'value',
      name: '销售金额'
      // ...
    
  ]
  // ...
;

ECharts 轴线

  1. ECharts 提供了轴线 axisLine的配置，例如轴线两端的箭头，轴线的样式等。

    option = 
  xAxis: 
    axisLine: 
      symbol: 'arrow',
      lineStyle: 
        type: 'dashed'
        // ...
      
    
    // ...
  ,
  yAxis: 
    axisLine: 
      symbol: 'arrow',
      lineStyle: 
        type: 'dashed'
        // ...
      
    
  
  // ...
;

  2. ECharts 提供了轴线 axisTick ,例如刻度线的长度，样式等。

    option = 
  xAxis: 
    axisTick: 
      length: 6,
      lineStyle: 
        type: 'dashed'
        // ...
      
    
    // ...
  ,
  yAxis: 
    axisTick: 
      length: 6,
      lineStyle: 
        type: 'dashed'
        // ...
      
    
  
  // ...
;

  3. 刻度标签:ECharts 提供了轴线 axisLabel 相关的配置,例如文字对齐方式，自定义刻度标签内容等。

    option = 
  xAxis: 
    axisLabel: 
      formatter: 'value kg',
      align: 'center'
      // ...
    
    // ...
  ,
  yAxis: 
    axisLabel: 
      formatter: 'value 元',
      align: 'center'
      // ...
    
  
  // ...
;

ECharts 坐标轴示例

  1. y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。

    option = 
  tooltip: 
    trigger: 'axis',
    axisPointer:  type: 'cross' 
  ,
  legend: ,
  xAxis: [
    
      type: 'category',
      axisTick: 
        alignWithLabel: true
      ,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ]
    
  ],
  yAxis: [
    
      type: 'value',
      name: '降水量',
      min: 0,
      max: 250,
      position: 'right',
      axisLabel: 
        formatter: 'value ml'
      
    ,
    
      type: 'value',
      name: '温度',
      min: 0,
      max: 25,
      position: 'left',
      axisLabel: 
        formatter: 'value °C'
      
    
  ],
  series: [
    
      name: '降水量',
      type: 'bar',
      yAxisIndex: 0,
      data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    ,
    
      name: '温度',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [
        6.0,
        10.2,
        10.3,
        11.5,
        10.3,
        13.2,
        14.3,
        16.4,
        18.0,
        16.5,
        12.0,
        5.2
      ]
    
  ]
;

数据的视觉映射

  1. 数据可视化是数据到视觉元素的映射过程
  2. ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。
  3. ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visualMap 组件中可以使用的视觉元素有：
    1. 图形类别（symbol）、图形大小（symbolSize）
    2. 颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、
    3. 颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）

数据和维度

  1. ECharts 中的数据，一般存放于 series.data 中，数据的具体形式可能是“线性表“、“树“、“图“等，数据是数据项dataItem的集合

  2. 每个数据项含有“数据值（value）“和其他信息,每个数据值，可以是单一的数值（一维）或者一个数组（多维）。

  3. series.data 最常见的形式，是“线性表“，即一个普通数组

    series: 
  data: [
    
      // 这里每一个项就是数据项（dataItem）
      value: 2323, // 这是数据项的数据值（value）
      itemStyle: 
    ,
    1212, // 也可以直接是 dataItem 的 value，这更常见。
    2323, // 每个 value 都是“一维“的。
    4343,
    3434
  ];


    series: 
  data: [
    
      // 这里每一个项就是数据项（dataItem）
      value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value）
      itemStyle: 
    ,
    [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。
    [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的，每列是一个维度。
    [4343, 23, '图瓦卢'] // 假如是“气泡图“，常见第一维度映射到x轴，
    // 第二维度映射到y轴，
    // 第三维度映射到气泡半径（symbolSize）
  ];

  4. 在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到 x 轴，取第二个维度映射到 y 轴

ECharts 图例

  1. 图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列

  2. 图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐

    option = 
  legend: 
    // Try 'horizontal'
    orient: 'vertical',
    right: 10,
    top: 'center'
  ,
  dataset: 
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  ,
  xAxis:  type: 'category' ,
  yAxis: ,
  series: [ type: 'bar' ,  type: 'bar' ,  type: 'bar' ]
;

  3. 对于图例较多时，可以使用可滚动翻页的图例

    option = 
  legend: 
    type: 'scroll',
    orient: 'vertical',
    backgroundColor: '#ccc',
    right: 10,
    top: 20,
    bottom: 20,
    textStyle: 
      color: '#ccc'
      // ...
    
    data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']
    // ...
  
  // ...
;

  4. 图例的颜色标签有很多种设计方式、针对不同的图表，图例样式也会有所不同

    option = 
  legend: 
    data: ['图例一', '图例二', '图例三'],
    icon: 'rect'
    // ...
  
  // ...
;

  5. 图例支持交互操作，点击控制显示或隐藏对应的数据列

    option = 
  legend: 
    data: ['图例一', '图例二', '图例三'],
    selected: 
      图例一: true,
      图例二: true,
      图例三: false
    
    // ...
  
  // ...
;

  6. 不同类型的图例样式要有所区分。

    option = 
  legend: 
    data: [
      
        name: '图例一',
        icon: 'rect'
      ,
      
        name: '图例二',
        icon: 'circle'
      ,
      
        name: '图例三',
        icon: 'pin'
      
    ]
    // ...
  ,
  series: [
    
      name: '图例一'
      // ...
    ,
    
      name: '图例二'
      // ...
    ,
    
      name: '图例三'
      // ...
    
  ]
  // ...
;

以上是关于ECharts的主要内容，如果未能解决你的问题，请参考以下文章

新手求助echarts关系图

怎么用java编写echarts代码

Echarts 如何防止内存泄漏

echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）

echarts怎么把代码移动在hbuilder里面

echarts散点图