岩石教程

ECharts

2024-06-27 18:15:43 103
ECharts 是一个基于 JavaScript 的开源可视化库，由百度前端团队开发。ECharts 提供丰富的可视化图表类型，如折线图、柱状图、饼图、散点图、雷达图、地图等，支持多种数据格式输入，并具有强大的交互功能。ECharts 设计为高性能和高可扩展性，适用于大数据量的展示和复杂的可视化需求。

特点

  1. 多种图表类型：支持折线图、柱状图、饼图、散点图、雷达图、地图、热力图、树图等多种图表类型。
  2. 高性能：优化的绘图算法，适用于大数据量的可视化展示。
  3. 丰富的交互功能：支持图表的拖拽、缩放、数据筛选、动态数据更新等交互功能。
  4. 强大的主题定制：提供多种内置主题，并支持自定义主题，满足不同风格的需求。
  5. 跨平台支持：兼容 PC 和移动设备，响应式设计适应不同屏幕尺寸。
  6. 国际化支持：内置多语言支持，适用于全球用户。
  7. 可扩展性强：提供丰富的插件机制，支持自定义图表类型和功能扩展。

使用场景

  1. 数据分析和展示：适用于各种数据分析和展示需求，如市场分析、销售数据、用户行为分析等。
  2. 实时监控：用于实时数据监控和展示，如服务器状态监控、传感器数据监控等。
  3. 商业智能：用于商业智能系统，创建交互式仪表盘，展示关键业务指标。
  4. 科研和教育：用于科学研究和教育培训，帮助用户理解数据和分析结果。
  5. 金融和保险：展示金融数据、风险评估、保险数据等复杂信息。

安装方式

通过 npm 安装 ECharts：

npm install echarts

通过 CDN 引入 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

使用示例

创建一个简单的折线图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts Line Chart Example</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: 'ECharts 折线图示例'
      },
      tooltip: {
        trigger: 'axis'
      },
      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'
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

创建一个柱状图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts Bar Chart Example</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: 'ECharts 柱状图示例'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Apples', 'Bananas', 'Cherries', 'Dates', 'Elderberries']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [5, 20, 36, 10, 10],
        type: 'bar'
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

常用 API 介绍

  1. echarts.init()：初始化一个 ECharts 实例。

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

  2. setOption()：设置图表的配置项和数据。

    chart.setOption({
  title: { text: 'ECharts 示例' },
  series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]
});

  3. resize()：调整图表的大小。

    window.addEventListener('resize', function() {
  chart.resize();
});

  4. on()：绑定事件监听器。

    chart.on('click', function(params) {
  console.log(params);
});

  5. dispatchAction()：手动触发图表的行为，如高亮、缩放等。

    chart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 2
});

  6. getDataURL()：获取图表的 Base64 图片。

    var img = chart.getDataURL({
  pixelRatio: 2,
  backgroundColor: '#fff'
});

官方资料

ECharts 是一个功能强大且灵活的 JavaScript 图表库，适用于各种数据可视化需求。其丰富的图表类型和配置选项，使得开发者可以创建复杂且交互式的数据可视化图表，提升 Web 应用的数据展示效果。