前端主流图表框架

最新推荐文章于 2024-07-30 11:48:07 发布

目遇之而成色

最新推荐文章于 2024-07-30 11:48:07 发布

阅读量1w

点赞数 5

分类专栏：前端文章标签：可视化 js 数据可视化

本文链接：https://blog.csdn.net/Web_Student/article/details/107205862

版权

这篇博客介绍了多个前端主流的图表框架，包括Echarts、Flot、Rickshaw、Sparkline、Easypiechart、Chart.js、Knob Charts、Morris.js、Recharts、TauCharts、C3.js、NVD3、FlexChart和Chartist。Echarts因其易用性和高度定制性被重点推荐，而Flot和Rickshaw也是历史悠久的选择。其他框架如Recharts和TauCharts提供了更多灵活性，适用于React和D3.js项目。

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

文章目录

一 · echarts

1.简介：

纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表，基于BSD开原协议，是一款非常优秀的可视化前端框架

由于 Echarts 是用普通的 JavaScript 编写的，所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。

同时，Echarts 也提供了很多官方文档供用户查看。

官方API文档和教程

GitHub源文件网址（源码）

使用 npm 可以很容易的完成 Echarts 的安装:

npm install echarts --save

2.使用：

1.代码：

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 本地引用 -->
		<!-- <script src="js/echarts.js"></script> -->
		<!-- cdn引用 -->
		<script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="container" style="height: 500%;"></div>
		<script type="text/javascript">
			var dom =document.getElementById("container");
			var myChart=echarts.init(dom);
			var app={
   };
			option = null;
			option = {
   
				//标题
				title:{
   
					text:'折线图',
					subtext:'模拟数据',
					x:'center'
				},
				//横坐标
				xAxis:{
   
					name:'星期',
					type:'category',
					data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
				},
				//纵坐标
				yAxis:{
   
					name:'数值',
					type:'value'
				},
				//数据信息
				series:[{
   
					data:[820,932,901,934,1290,1330,1320],
					type:'line'
				}]
			};
			//载入数据
			myChart.setOption(option,true);
		</script>
	</body>
</html>

2.效果：

在这里插入图片描述

3.代码2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- cdn引用 -->
		<script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container" style="height: 500%;"></div>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom