ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以运行在浏览器和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11,Chrome,Firefox,Safari等），底层依赖矢量图形库 ZRender，ECharts 提供了直观、交互丰富、可高度个性化定制的数据可视化图表，创建 ECharts.html 文件的主要步骤如下：
1、创建HTML文件
你需要创建一个HTML文件，你可以使用任何文本编辑器来创建这个文件，例如Notepad++，Sublime Text，VS Code等，在这个文件中，你需要创建一个<div>元素，这个元素将用于渲染ECharts图表。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>ECharts</title>
<!引入 echarts.js >
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
<!为ECharts准备一个具备大小（宽高）的Dom >
<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>
</body>
</html>
2、引入ECharts库
在HTML文件的头部，我们需要引入ECharts的JavaScript库，你可以直接从ECharts的官方网站下载库文件，或者使用CDN链接，在这个例子中，我们使用的是CDN链接。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
3、创建ECharts容器
接下来，我们需要在HTML文件中创建一个<div>元素，这个元素将用于渲染ECharts图表，我们可以给它一个唯一的ID，以便在JavaScript代码中引用它，在这个例子中，我们使用的ID是main，我们还为这个元素设置了宽度和高度。
<div id="main" style="width: 600px;height:400px;"></div>
4、初始化ECharts实例
我们需要在JavaScript代码中初始化一个ECharts实例，我们将使用echarts.init()方法来完成这个任务，这个方法需要一个参数，即我们要在其中渲染图表的DOM元素的引用，在这个例子中，我们将使用我们在上一步中创建的<div>元素。
var myChart = echarts.init(document.getElementById('main'));
5、定义图表的配置项和数据
接下来，我们需要定义图表的配置项和数据，配置项是一个对象，它定义了图表的各种属性，如标题、提示框、图例、坐标轴和系列等，数据是一个数组，它包含了图表中每个系列的数据，在这个例子中，我们定义了一个简单的柱状图，标题是“ECharts 入门示例”，x轴是商品名称，y轴是销量。
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
6、显示图表
我们需要使用myChart.setOption()方法来显示图表，这个方法需要一个参数，即我们在上一步中定义的图表配置项，当我们调用这个方法时，ECharts将使用我们提供的配置项和数据来渲染图表。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/360504.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复