绘制第一个简单图表：ECharts 的基础入门
ECharts 是一个功能强大的数据可视化库，适用于创建各种类型的图表。在这篇文章中，我们将学习如何绘制第一个简单图表，包括基本的折线图和柱状图，同时了解如何配置图表的基本样式，如颜色、字体和大小等。
一、安装 ECharts
在开始之前，我们需要在项目中安装 ECharts。可以使用 CDN 或 npm 进行安装。这里我们将使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
将上述代码添加到 HTML 文件的 <head> 部分。
二、创建基本的折线图
1. 定义 HTML 结构
首先，我们需要在 HTML 中定义一个用于显示图表的 <div> 容器：
<div id="lineChart" style="width: 600px; height: 400px;"></div>
2. 配置折线图的 option
下面是一个基本的折线图配置示例：
var lineChart = echarts.init(document.getElementById('lineChart'));
var lineOption = {
title: {
text: '月度销售额',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销售额',
type: 'line',
data: [1200, 1800, 2100, 3000, 5000],
itemStyle: {
color: '#3398DB'
},
lineStyle: {
width: 3
},
areaStyle: {} // 显示面积
}]
};
lineChart.setOption(lineOption);
3. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，包含折线图的创建和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 折线图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制折线图</h1>
<div id="lineChart" style="width: 600px; height: 400px;"></div>
<script>
var lineChart = echarts.init(document.getElementById('lineChart'));
var lineOption = {
title: {
text: '月度销售额',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销售额',
type: 'line',
data: [1200, 1800, 2100, 3000, 5000],
itemStyle: {
color: '#3398DB'
},
lineStyle: {
width: 3
},
areaStyle: {}
}]
};
lineChart.setOption(lineOption);
</script>
</body>
</html>
三、创建基本的柱状图
接下来，我们将创建一个简单的柱状图，展示不同产品的销售额。
1. 定义 HTML 结构
在 HTML 中，添加一个用于显示柱状图的 <div> 容器：
<div id="barChart" style="width: 600px; height: 400px;"></div>
2. 配置柱状图的 option
下面是一个柱状图的配置示例：
var barChart = echarts.init(document.getElementById('barChart'));
var barOption = {
title: {
text: '产品销量',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销量',
type: 'bar',
data: [150, 230, 324, 218],
itemStyle: {
color: '#FF5733'
}
}]
};
barChart.setOption(barOption);
3. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，包含柱状图的创建和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 柱状图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制柱状图</h1>
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
var barChart = echarts.init(document.getElementById('barChart'));
var barOption = {
title: {
text: '产品销量',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销量',
type: 'bar',
data: [150, 230, 324, 218],
itemStyle: {
color: '#FF5733'
}
}]
};
barChart.setOption(barOption);
</script>
</body>
</html>
四、结合使用折线图和柱状图
为了进一步了解 ECharts 的强大，我们可以在同一个页面中同时绘制折线图和柱状图。
1. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，展示折线图和柱状图的结合使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 综合示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制折线图和柱状图</h1>
<h2>折线图</h2>
<div id="lineChart" style="width: 600px; height: 400px;"></div>
<h2>柱状图</h2>
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
// 折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var lineOption = {
title: {
text: '月度销售额',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销售额',
type: 'line',
data: [1200, 1800, 2100, 3000, 5000],
itemStyle: {
color: '#3398DB'
},
lineStyle: {
width: 3
},
areaStyle: {}
}]
};
lineChart.setOption(lineOption);
// 柱状图
var barChart = echarts.init(document.getElementById('barChart'));
var barOption = {
title: {
text: '产品销量',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: ['产品A', '产品B', '产品C', '产品D'],
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#666',
fontSize: 14
}
}
},
series: [{
name: '销量',
type: 'bar',
data: [150, 230, 324, 218],
itemStyle: {
color: '#FF5733'
}
}]
};
barChart.setOption(barOption);
</script>
</body>
</html>
五、总结
在本篇博客中，我们学习了如何使用 ECharts 绘制基本的折线图和柱状图。通过这些示例，你可以了解到 ECharts 的基本使用方法和配置选项，包括图表的样式、颜色、字体等。随着你对 ECharts 的深入了解，你将能够创建更复杂的可视化图表和交互效果，提升数据展示的效果。希望这些示例能帮助你顺利开始 ECharts 的学习之旅！