ECharts基础使用指南
作者：手机用户2602925875 | 来源：互联网 | 2024-12-12 13:22
本文档提供了一个简单的ECharts使用示例，帮助初学者快速了解如何在网页中集成和使用ECharts创建图表。更多详细信息请参阅官方文档：https://www.echartsjs.com/zh/tutorial.html#5%20分钟上手%20ECharts
本文将引导您完成一个基础的 ECharts 图表创建过程，适合初学者快速上手。
首先，确保您的项目环境中已引入了 ECharts 库。可以通过 CDN 或下载方式获取：
HTML 文件结构如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础 ECharts 示例title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js">
head>
<body>
<h1>ECharts 基础示例h1>
<div id="chart-container" style="width: 600px;height: 400px;">
<script type="text/Javascript"> var myChart = echarts.init(document.getElementById(
'chart-container'));
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>
body>
html>
通过上述代码，您可以成功地在网页中嵌入一个简单的柱状图。此示例展示了如何设置图表的基本配置，包括标题、数据轴、图例等元素，并使用 ECharts 的 API 渲染图表。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有