当前位置: 首页 > news >正文

Echarts

      ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,提供了丰富的图表库,能够在PC端和移动设备上流畅运行

 

官网:

https://echarts.apache.org/zh/index.html

官方使用教程:

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 

使用它要下载对应的js文件

https://github.com/apache/incubator-echarts/releases

 

有一些比如词云图在拓展下载里面

https://echarts.apache.org/zh/download-extension.html

 

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/js/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 800px;"></div>
		<script>
			var ectest = echarts.init(document.getElementById("main"));
			var option = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [1820, 932, 1901, 1934, 1290, 1330, 1320],
					type: 'line'
				}]
			};
			ectest.setOption(option);
		</script>
	</body>
</html>

直接运行就是这样

var option=  是怎么来的呢

https://echarts.apache.org/examples/zh/index.html      在官网的实例

点开一个图

复制这里的option就行了

 

 

相关文章:

  • 做web项目时对代码修改后浏览器端不生效的应对方法
  • WSGI gunicorn
  • 阿里云购买学生机镜像多种选择
  • MySQL Linux配置
  • Python的 __pycache__ 文件夹
  • Vue.js
  • JVM虚拟机
  • MyOS(一):用Java做一个最小的helloworld操作系统内核
  • Windows下Vim
  • 汇编语言
  • SVN服务器端
  • Mavic Mini
  • Chrome浏览器
  • SVN客户端
  • Windows批处理文件bat/cmd
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • Akka系列(七):Actor持久化之Akka persistence
  • echarts的各种常用效果展示
  • exports和module.exports
  • Java Agent 学习笔记
  • k8s如何管理Pod
  • k个最大的数及变种小结
  • maya建模与骨骼动画快速实现人工鱼
  • mongodb--安装和初步使用教程
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • nfs客户端进程变D,延伸linux的lock
  • node学习系列之简单文件上传
  • SpriteKit 技巧之添加背景图片
  • Vultr 教程目录
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 复习Javascript专题(四):js中的深浅拷贝
  • 计算机常识 - 收藏集 - 掘金
  • 浅谈Golang中select的用法
  • 思维导图—你不知道的JavaScript中卷
  • 我看到的前端
  • 异常机制详解
  • 正则学习笔记
  • (02)Hive SQL编译成MapReduce任务的过程
  • (06)金属布线——为半导体注入生命的连接
  • (二)学习JVM —— 垃圾回收机制
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (分布式缓存)Redis哨兵
  • (附源码)springboot宠物医疗服务网站 毕业设计688413
  • (离散数学)逻辑连接词
  • (六)Hibernate的二级缓存
  • (三分钟)速览传统边缘检测算子
  • (新)网络工程师考点串讲与真题详解
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)四层和七层负载均衡的区别
  • ./和../以及/和~之间的区别
  • .apk文件,IIS不支持下载解决
  • .NET CF命令行调试器MDbg入门(四) Attaching to Processes
  • .NET/C# 判断某个类是否是泛型类型或泛型接口的子类型
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .NET设计模式(8):适配器模式(Adapter Pattern)