<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线</title>
<style>
#test{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="test"></div>
<!--引入echarts-->
<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<script>
/*基于准备好的dom,初始化echarts实例*/
const myChart = echarts.init(document.getElementById('test'));
/*图表配置项*/
const option = {
/*x轴
* data 类目轴数据
* boundaryGap 边界留白
* axisLabel 标签
* margin 标签偏移量
* */
xAxis:{
data:['html','css','js','canvas'],
boundaryGap: 0
},
/*y轴*/
yAxis:{
echarts折线图
最新推荐文章于 2022-09-16 16:54:30 发布
本文详细介绍了如何使用JavaScript库ECharts创建动态折线图。通过实例代码,展示了配置项的设置和数据更新,帮助读者理解ECharts在数据可视化中的应用。
摘要由CSDN通过智能技术生成