ECharts 图表入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_83781937/article/details/139878224

1. 介绍

ECharts 是一个功能强大且灵活的数据可视化库，由百度开发，支持多种图表类型和丰富的交互功能。

在本指南中，我们将学习如何使用 ECharts 创建和定制各种类型的图表，从简单的柱状图到复杂的热力图和雷达图。

2. 安装与配置

首先，我们需要安装 ECharts。你可以选择通过 npm 进行安装或者直接引入 CDN。以下是安装步骤和基本配置示例。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting Started with ECharts</title>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 在这里配置和使用图表
</script>
</body>
</html>

3. 第一个简单图表

让我们从一个简单的柱状图开始，展示如何创建基本的静态图表结构和数据绑定方法。

// 示例：创建一个柱状图
var option = {
xAxis: {
type: 'category',
data: ['Apple', 'Banana', 'Grapes', 'Orange', 'Strawberry']
},
yAxis: {
type: 'value'
},
series: [{
data: [35, 48, 22, 63, 75],
type: 'bar'
}]
};
// 使用配置项显示图表
myChart.setOption(option);