echarts进阶教程：掌握常用配置，玩转数据可视化

2024-01-15 22:05:48

双Y轴

当您的数据出现多条折线，而有的线条的数据很大，有的线条的数据很小，如果都统一在一个Y轴上，那么数据较小的线条就会被淹没在数据较大的线条中，无法清晰地展现出来。

为了解决这个问题，我们可以使用双Y轴。双Y轴是指在图表中使用两个Y轴，分别对应不同的数据系列。这样，数据较小的线条就可以在自己的Y轴上清晰地展现出来。

在echarts中，可以使用yAxis配置项来设置双Y轴。yAxis配置项是一个数组，每个元素代表一个Y轴。您可以根据需要设置多个Y轴。

yAxis: [
  {
    type: 'value',
    name: 'Y轴1',
    position: 'left'
  },
  {
    type: 'value',
    name: 'Y轴2',
    position: 'right'
  }
]

2. 饼图标签

饼图是一种常用的数据可视化图表，用于展示不同类别的数据在整体中所占的比例。在echarts中，可以使用series配置项来设置饼图。

series: [
  {
    type: 'pie',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 400, name: '搜索引擎' }
    ]
  }
]

默认情况下，饼图中的标签会显示在饼图的外面。但是，您也可以将标签显示在饼图的里面。要做到这一点，您需要将label配置项的position属性设置为'inside'。

series: [
  {
    type: 'pie',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 400, name: '搜索引擎' }
    ],
    label: {
      position: 'inside'
    }
  }
]