ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助用户轻松地制作出各种数据图表。无论是简单的柱状图、折线图，还是复杂的地图、雷达图，ECharts 都能提供强大的支持。对于初学者来说，ECharts 的学习曲线相对平缓，本文将带你从零开始，一步步掌握 ECharts 的使用。

ECharts 简介

ECharts 的核心库仅 30KB 大小，它支持多种图表类型，包括：

  • 基础图表：柱状图、折线图、饼图、散点图等
  • 高级图表：地图、力导向图、树图、雷达图等
  • 其他图表：词云、水球图、仪表盘等

ECharts 旨在提供一种简单、高效、可扩展的数据可视化解决方案，让用户能够快速地制作出美观、实用的图表。

环境搭建

在开始学习 ECharts 之前，你需要准备以下环境：

  1. Node.js：用于安装 ECharts 的依赖包
  2. 浏览器：用于查看和测试 ECharts 图表

你可以通过以下命令安装 ECharts：

npm install echarts --save

基础用法

引入 ECharts

首先，你需要在 HTML 文件中引入 ECharts 的 JavaScript 文件：

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

创建图表

接下来，你可以创建一个基本的柱状图：

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data:['销量']
    },
    xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

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

在上面的代码中，我们创建了一个 ID 为 main 的 DOM 元素，然后使用 echarts.init() 方法初始化 ECharts 实例。接着，我们定义了图表的配置项和数据，最后使用 setOption() 方法将配置项和数据应用到图表实例上。

实战教程

1. 制作地图

地图是 ECharts 中较为复杂的图表类型，下面是一个简单的中国地图示例：

<div id="map" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('map'));

  var option = {
    title: {
      text: '中国地图示例'
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      min: 0,
      max: 100,
      left: 'left',
      top: 'bottom',
      text: ['高','低'],           // 文本，默认为数值文本
      calculable: true
    },
    series: [
      {
        name: '销量',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
          show: true
        },
        data: [
          {name: '北京',value: Math.round(Math.random() * 1000)},
          {name: '上海',value: Math.round(Math.random() * 1000)},
          // ... 其他省份
        ]
      }
    ]
  };

  myChart.setOption(option);
</script>

在上面的代码中，我们使用了 mapType: 'china' 来指定地图类型为中国地图，并通过 data 属性定义了每个省份的销量数据。

2. 制作雷达图

雷达图常用于展示多维度的数据，下面是一个简单的雷达图示例：

<div id="radar" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('radar'));

  var option = {
    title: {
      text: '雷达图示例'
    },
    tooltip: {},
    legend: {
      data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    radar: {
      name: {
        textStyle: {
          color: '#fff',
          backgroundColor: '#999',
          borderRadius: 3,
          padding: [3, 5]
        }
      },
      indicator: [
        {name: '销售（sales）', max: 6500},
        {name: '管理（admin）', max: 16000},
        {name: '信息技术（IT）', max: 30000},
        {name: '客服（customer support）', max: 38000},
        {name: '研发（R&D）', max: 52000},
        {name: '市场（marketing）', max: 25000}
      ]
    },
    series: [
      {
        name: '预算 vs 开销',
        type: 'radar',
        data : [
          {
            value : [4200, 3000, 20000, 35000, 50000, 18000],
            name : '预算分配（Allocated Budget）'
          },
          {
            value : [5000, 14000, 28000, 26000, 42000, 21000],
            name : '实际开销（Actual Spending）'
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
</script>

在上面的代码中，我们定义了雷达图的指标和系列数据，并通过 type: 'radar' 指定了图表类型为雷达图。

总结

通过本文的学习，相信你已经对 ECharts 有了一定的了解。ECharts 是一个功能强大的可视化库，它可以帮助你轻松地制作出各种图表。在实际应用中，你可以根据自己的需求选择合适的图表类型，并通过调整配置项来定制图表的外观和交互效果。

希望本文能帮助你快速掌握 ECharts 的使用，为你的数据可视化之路添砖加瓦。