ECharts(五)

最新推荐文章于 2024-03-24 18:04:40 发布

努力转行的任同学...

最新推荐文章于 2024-03-24 18:04:40 发布

阅读量520

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_43408367/article/details/121861453

版权

ECharts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

ECharts 坐标轴

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

通常情况下，x 轴显示在图表的底部，y 轴显示在左侧
在这里插入图片描述

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

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

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

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

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

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

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

ECharts 轴线

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

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

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

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

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

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

ECharts 坐标轴示例

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
      ]
    }
  ]
};

数据的视觉映射

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

数据和维度

ECharts 中的数据，一般存放于 series.data 中，数据的具体形式可能是“线性表“、“树“、“图“等，数据是数据项dataItem的集合
每个数据项含有“数据值（value）“和其他信息,每个数据值，可以是单一的数值（一维）或者一个数组（多维）。

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）
  ];
}

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

ECharts 图例

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

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

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' }]
};

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

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

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

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

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

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

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

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