ECharts 是一个使用 JavaScript 实现的开源可视化库,可以轻松地在网页中创建可交互的图表,那么如何在 HTML 中插入 ECharts 呢?下面我将一步一步地为大家讲解。
我们需要确保已经在项目中引入了 ECharts,有两种引入方式:script 标签引入和 npm/yarn 安装。
script标签引入: 在 HTML 文件中,通过 script 标签引入 ECharts 的 JavaScript 文件,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/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>
npm/yarn 安装: 在项目根目录下执行以下命令:
npm install echarts --save
或者
yarn add echarts
安装完成后,在项目中引入 ECharts:
import * as echarts from 'echarts';
以下是详细步骤:
第一步:创建一个 HTML 文件,并在其中添加一个 div 元素,用来放置图表。
<div id="main" style="width: 600px;height:400px;"></div>
注意:这里的 div 需要设置宽高,否则图表可能无法正常显示。
第二步:在 HTML 文件中引入 ECharts 的 JavaScript 文件,如果使用 script 标签引入,可以参考上面的代码。
第三步:在 JavaScript 代码中,首先通过 echarts.init 方法初始化一个 echarts 实例,然后设置图表的配置项和数据,使用 setOption 方法将配置项和数据应用到实例上,以下是示例代码:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: 'ECharts 示例'
},
// 提示框
tooltip: {},
// 图例
legend: {
data:['销量']
},
// x轴
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
// y轴
yAxis: {},
// 系列列表
series: [{
name: '销量',
type: 'bar', // 类型为柱状图
data: [5, 20, 36, 10, 10, 20] // 数据
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
到这里,一个简单的 ECharts 图表就已经在 HTML 中插入成功了,ECharts 提供了丰富的图表类型和配置项,你可以根据自己的需求进行定制,更多关于 ECharts 的使用和配置,可以参考官方文档,希望这篇文章能帮助你快速地在 HTML 中插入 ECharts 图表。

