Echarts 学习系列(1)-5分钟上手ECharts
写在前面
最近，在做某个项目的时候。需要使用的可视化的图表显数据。最后，选择了百度的Echarts。
下载Echarts和主题
1.获取Echarts
- 这是这官网的地址 传送门 直接下载最新的版本的Echarts
2.下载Echarts
- 选择下载，拉到下面，点击在线定制
- 然后跳转到在线构建页面，图表只选择常规的柱状图、折线图、饼图
- 坐标系不选
- 组件选择标题、图例、提示框
- 其他选项 选择工具集 、代码压缩
- 跳转下载界面，下载完成
3.下载主题
- 选择下载->下载主题
- 选择自己喜欢的主题
- 点击下载
绘制一个简单的图表
1.引用Echats
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
3.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样你的第一个图表就诞生了！
这个是官网给出的最简单的例子。如果还是，有不明白的地方，可以去官网详细的看文档。
Echarts 学习系列(1)-5分钟上手ECharts的更多相关文章
- Echarts 学习系列(2)-常见的静态ECharts图
目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...
- 5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
- Echarts 学习系列(3)-Echarts动态数据交互
写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...
- echarts学习总结
ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- ECharts模块化使用5分钟上手
什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...
- echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...
- Echarts学习总结（一）-----柱状图
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...
- 快速上手 Echarts
最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...
随机推荐
- C# 读取Excel文件数据
1.首先需要在管理NuGet程序包中添加外部包:ExcelDataReader,添加好后,不要忘记在命名空间那里引用. 2.定义文件流,将文件流传入IExcelDataReader类型的对象excel ...
- svn更换repos时保留svn log
两种情况 1. 直接移动库 问题:svn如何把A服务器上的reposA上传到B服务器的reposB并保留各种上传更新记录? 这个问题要感想敢干,直接复制改名即可 #登录到B服务器 scp -r cmo ...
- mysql 命令修复表
如果在断电.硬重启服务器等情况下,可能会造成有些表损坏,这时就需要修复 修复表前需要将mysql停止 centos7 用 systemctl stop mysqld.service 来停止 然后进入到 ...
- Nginx编译安装脚本
Nginx是高性能的web服务器和反向代理服务器,在互联网公司中被广泛使用.以下是Nginx在centos7系统下的一键编译安装脚本,仅供参考,具体编译参数选项请结合实际生产环境需求进行选择,脚本 ...
- 如何检查linux服务器是否被入侵
被入侵服务器的症状 当服务器被没有经验攻击者或者自动攻击程序入侵了的话,他们往往会消耗 100% 的资源.他们可能消耗 CPU 资源来进行数字货币的采矿或者发送垃圾邮件,也可能消耗带宽来发动 DoS ...
- ROS学习笔记(二) ：使用roslaunch
目录 roslaunch roslaunch的使用 以turtlesim为例 roslaunch roslaunch是ros自带的一个库,使用roslaunch可以同时运行多个节点,通过编写launc ...
- Unity 渲染教程（一）：矩阵
转载:http://gad.qq.com/program/translateview/7181958 创建立方体网格.· 支持缩放.位移和旋转. · 使用变换矩阵. · 创建简单的相机投影. 这是关于 ...
- 织梦dedecms后台文件media_add.php任意上传漏洞解决办法
织梦在安装到阿里云服务器后阿里云后台会提示media_add.php后台文件任意上传漏洞,引起的文件是后台管理目录下的media_add.php文件,下面跟大家分享一下这个漏洞的修复方法: 首先找到并 ...
- VIJOS-P1320 清点人数
JDOJ 1427: VIJOS-P1320 清点人数 题目传送门 Description 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出发走到最后一节车厢,每节车厢随时都有可能 ...
- 前端js判空处理，js字符串判空，js数组判空
1.字符串 在 js 中,字符串为空会有这么几种形式,"",null,undefined,如果在已知变量为空串的情况下可以直接采用 if (string.length == 0) ...