Echarts画折线图

最新推荐文章于 2024-09-14 13:20:17 发布

桔梗的犬夜叉

最新推荐文章于 2024-09-14 13:20:17 发布

阅读量325

点赞数

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.csdn.net/LL9504/article/details/103028239

版权

这篇博客介绍了如何使用Echarts库来绘制折线图，包括设置标题、图例、x轴和y轴的属性，如名称、间隔、双轴配置以及数据展示等基本步骤。建议对Echarts感兴趣的读者可以参考官方实例进行更深入的学习。

摘要由CSDN通过智能技术生成

参考博客的地址:https://blog.csdn.net/sleepwalker_1992/article/details/82709793

步骤: 标题 , 图示,对x和y轴的设置(名字,间隔,两个y轴或x轴,长度等),接下来是数据(数据显示的类型,line,bar以及对应的data)

这些都是最基本的图形元素,更复杂的可以参考官网上面实例学习.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计</title>
    <script src="echarts.min.js"></script>
    <script src="ecStat.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:650px;margin:0 auto"></div>
    <script type="text/javascript">
		var data1 = [1753, 834, 510, 301, 301, 133, 133, 133, 133, 133];
		var data2= [120, 102, 89, 73, 73, 59, 59, 59, 59, 59];
		var data3= [6.845, 12.230, 17.451, 24.252, 24.252, 44.361, 44.361, 44.361, 44.361, 44.