站在巨人的肩膀上：echarts 5.0常用配置实战指南

2024-02-04 23:30:44

前言

最近公司刚做完大数据相关的产品，涉及到了比较多的前端数据可视化相关的知识，我们选择了上手简单功能也比较强大的echarts5.0版进行图表绘制。当然也根据文档做了很多自定义配置，在此我将这些常用的配置分享给大家。

常用配置

标题

标题是图表中必不可少的部分，它可以帮助读者快速了解图表所表达的信息。echarts 5.0的标题配置项包括标题文本、标题字体、标题位置等。

title: {
  text: '标题',
  left: 'center',
  top: 'top'
}

图例

图例是图表中用来解释不同数据系列的符号的。echarts 5.0的图例配置项包括图例位置、图例文本、图例标记等。

legend: {
  show: true,
  type: 'plain',
  orient: 'horizontal',
  left: 'center',
  top: 'bottom',
  data: ['数据系列1', '数据系列2', '数据系列3']
}

工具提示

工具提示是当鼠标悬停在图表上的某个元素上时出现的提示框。echarts 5.0的工具提示配置项包括工具提示文本、工具提示位置等。

tooltip: {
  show: true,
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  }
}

数据标签

数据标签是图表中用来显示数据值的标签。echarts 5.0的数据标签配置项包括数据标签文本、数据标签位置等。

dataLabel: {
  show: true,
  position: 'top'
}

其他常用配置

除了上述常用配置外，echarts 5.0还提供了许多其他配置项，可以帮助你自定义图表的外观和行为。这些配置项包括网格线、坐标轴、系列类型、动画效果等。

实例

下面是一个使用echarts 5.0绘制的柱状图的例子：

var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: '柱状图',
    left: 'center',
    top: 'top'
  },
  legend: {
    show: true,
    type: 'plain',
    orient: 'horizontal',
    left: 'center',
    top: 'bottom',
    data: ['数据系列1', '数据系列2', '数据系列3']
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  dataLabel: {
    show: true,
    position: 'top'
  },
  xAxis: {
    data: ['类别1', '类别2', '类别3', '类别4', '类别5']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '数据系列1',
      type: 'bar',
      data: [100, 200, 300, 400, 500]
    },
    {
      name: '数据系列2',
      type: 'bar',
      data: [600, 700, 800, 900, 1000]
    },
    {
      name: '数据系列3',
      type: 'bar',
      data: [1100, 1200, 1300, 1400, 1500]
    }
  ]
};

myChart.setOption(option);