ECharts 是一款使用 JavaScript 编写的前端可视化库，它能够帮助开发者轻松实现各种图表的制作，从简单的柱状图、折线图到复杂的地图、散点图等。对于零基础学习编程的人来说，ECharts 提供了一个友好的学习环境，因为它不需要复杂的编程知识，只需要一些基本的 HTML、CSS 和 JavaScript 即可。

简单介绍 ECharts

ECharts 的核心特点如下：

  • 易于使用：ECharts 提供了丰富的图表类型和配置项，使得开发者可以轻松实现各种可视化效果。
  • 高度可定制：ECharts 支持丰富的自定义选项，包括图表样式、颜色、标签等。
  • 高性能：ECharts 采用Canvas和SVG两种绘图方式，能够提供流畅的图表渲染效果。
  • 跨平台：ECharts 支持所有主流浏览器，并且能够在移动端正常工作。

准备工作

在学习 ECharts 之前，你需要具备以下基础：

  • HTML：了解 HTML 基础，包括标签、属性和结构。
  • CSS：了解 CSS 基础，包括选择器、属性和样式。
  • JavaScript：了解 JavaScript 基础，包括变量、函数、对象等。

创建第一个 ECharts 图表

下面我们将通过一个简单的例子来创建一个柱状图。

1. 添加 ECharts 标签

在 HTML 文件中，你需要引入 ECharts 的 JS 库。你可以从 ECharts 的官网下载或直接使用 CDN 链接。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="height: 500px"></div>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</body>
</html>

2. 初始化图表

在 HTML 文件的 <script> 标签中，你需要初始化一个 ECharts 实例，并设置图表的配置项和数据。

// 基于准备好的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);

3. 预览效果

保存 HTML 文件，并在浏览器中打开。你应该能看到一个简单的柱状图，展示了不同商品的销量。

学习资源

为了更好地学习 ECharts，以下是一些推荐的资源：

  • ECharts 官网文档：https://echarts.apache.org/zh/index.html
  • 在线教程：许多网站提供了 ECharts 的在线教程，可以帮助你从入门到精通。
  • 社区：ECharts 的社区活跃，你可以在这里找到帮助和交流。

总结

通过本文的介绍，你应该对 ECharts 有了一个基本的了解，并且能够创建简单的图表。随着你的深入学习，你可以尝试使用 ECharts 制作更加复杂的图表，并将其应用于实际项目中。记住，实践是学习的关键，不断尝试和探索，你将能够成为一名优秀的 ECharts 开发者。