在网页中插入echarts图表需要由哪几部分代码组成?
下面是一个echarts简单折线图表的示例
示例图
https://echarts.apache.org/examples/zh/editor.html?c=line-simple
将以上图表插入至网页中,html文件示例代码如下
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
总结以上示例代码,可以发现,echarts插入到网页中,由以下四部分组成:
- echarts图表库
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
构建图表的基础,引用echarts图表库脚本文件;
可以是网页地址(如Line1),也可以是本地路径(如Line2,引用根目录下echarts. min.js文件)
如需使用本地路径,图表库脚本文件下载:https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js
- 样式代码
<style>
#echarts1 {
width: 92%;
height: 500px;
margin: 0.5rem auto;
padding: 0.5rem;
}
</style>
用于定义echarts图标的尺寸大小;
在
或者css样式文件中定义图表尺寸位置,也可以在下列引用代码中直接定义图表尺寸位置。- 引用代码
<div id="echarts1" class="echarts1"></div>
定义将图表具体放置在网页的具体位置(代码在哪,图表就在哪);
class关联图表确定的尺寸(图表多大),id关联配置图表的脚本(图表画成什么样子);
另外,名称保持上下一致。
- ehcarts配置脚本,自定义绘制图表区域
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var dom = document.getElementById("echarts1");
var myChart = echarts.init(dom);
var app = {};
// 指定图表的配置项和数据
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
用于配置自定义图表,也就是你想将图表具体做成什么样子
此配置脚本为基础折线图配置代码,也就是在此代码中可以任意定制你的图表
具体如何配置,相关参数对照官方配置手册即可:https://echarts.apache.org/zh/option.html