博客

echarts之图例设置

  • Post category:other

以下是关于“ECharts之图例设置”的完整攻略，包括基本概念、使用方法和两个示例。

基本概念

ECharts是一款基于JavaScript的开源可视化库，可以用于创建各种类型的图表。图例是ECharts中的一个重要组件，用于展示表中各个系列的名称和颜色，方便用户理解和分析数据。

使用方法

以下是使用ECharts设置图例的方法：

  1. 创建ECharts实例：可以使用ECharts的构造函数创建ECharts实例。
  2. 设置图例：可以使用ECharts实例的setOption方法设置图例。
  3. 自定义图例：可以使用ECharts实例的legend属性自定义图例。

以下是两个示例：

示例一：设置默认图例

以下是使用ECharts设置默认例的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    const option = {
      legend: {
        data: ['销量']
      },
      xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

在这个示例，我们使用ECharts的构造函数创建了一个600×400的图表实例，然后使用setOption方法设置了图例、x轴、y轴和系列数据。图例中只包含了一个系列的名称“销量”。

示例二：自定义图例

以下是使用ECharts自定义图例的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    const option = {
      legend: {
        data: [{
          name: '销量',
          icon: 'circle',
          textStyle: {
            color: '#f00'
          }
        }]
      },
      xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

在这个示例中，我们使用ECharts的构造函数创建了一个600×400的图表实例，然后使用setOption方法设置了自定义的图例、x轴、y轴和系列数据。图例中包含了一个系列的名称“销量”，使用了红色的圆形图标，并设置了文本颜色为红色。

结论

ECharts是一款基于JavaScript的开源可视化库，可以用于创建各种类型的图表。图例是ECharts中的一个重要组件，用于展示表中各个系列的名称和颜色。使用ECharts设置图例的方法包括创建ECharts实例、设置图例和自定义图例。可以使用示例学习和理解ECharts的图例设置方法。

Tags: