探索ECharts：常用图表与Option配置

见解分享

2023-12-01 00:33:27

今天，我们用ECharts展现「常用图表和对应option」的讲解。

探索ECharts：常用图表与Option配置

前言

ECharts作为一款优秀的图表库，以其丰富多样的图表类型和强大的自定义能力著称。本指南将重点介绍ECharts中常用的图表类型以及对应的Option配置。掌握这些基础知识，将为我们深入探索ECharts奠定坚实的基础。

设置舞台：ECharts容器

为了让图表在网页中显示，我们需要先设置好一个ECharts容器。这个容器可以是一个div元素，并且需要设置其宽度和高度，以便ECharts绘制图表。

绘制图表：setOption()

setOption()函数是我们与ECharts交互的关键。通过setOption()，我们可以基于配置项Option生成想要的图表。Option通常是一个对象，包含数据源、图表类型、坐标系、视觉效果等丰富的配置信息。

常用图表与Option配置

接下来，让我们一睹ECharts常用图表的风采：

折线图

折线图用于展示数据随时间或其他连续变量的变化趋势。其Option配置包括：

<style>
.container {
  width: 600px;
  height: 400px;
}
</style>

<div class="container"></div>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.container'));

  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

柱状图

柱状图适合展示不同类别的数据比较。其Option配置如下：

<style>
.container {
  width: 600px;
  height: 400px;
}
</style>

<div class="container"></div>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.container'));

  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

饼图

饼图用来展示数据在整体中所占的比例。其Option配置为：

<style>
.container {
  width: 600px;
  height: 400px;
}
</style>

<div class="container"></div>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.container'));

  // 指定图表的配置项和数据
  var option = {
    series: [{
      type: 'pie',
      data: [
        {value: 10, name: '周一'},
        {value: 20, name: '周二'},
        {value: 30, name: '周三'},
        {value: 40, name: '周四'},
        {value: 50, name: '周五'},
        {value: 60, name: '周六'},
        {value: 70, name: '周日'}
      ],
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>

散点图

散点图用于展示两个变量之间的数据分布。其Option配置如下：

<style>
.container {
  width: 600px;
  height: 400px;
}
</style>

<div class="container"></div>

<script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector('.container'));

  // 指定图表的配置项和数据
  var option = {
    xAxis: {},
    yAxis: {},
    series: [{
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [6.95, 7.66],
        [8.47, 7.25]
      ],
      type: 'scatter',
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>