Echarts 入门操作
Echarts具有丰富的图表,可以说是数据可视化的神器；
1.下载Echarts
到官网或者点击以下文字【下载Echarts】即可下载；
①官网下载地址：https://echarts.baidu.com/index.html
2.Echarts引用案例
2.1 引入Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts案例</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
</html>
2.2 绘制前给Echarts准备一个Dom容器
<!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>
</body>
</html>
2.3 绘制一个简单的柱状图
<!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 入门操作的更多相关文章
- spring boot 入门操作(二)
spring boot入门操作 使用FastJson解析json数据 pom dependencies里添加fastjson依赖 <dependency> <groupId>c ...
- spring boot 入门操作(三)
spring boot入门操作 devtools热部署 pom dependencies里添加依赖 <dependency> <groupId>org.springframew ...
- Mysql的二进制安装和基础入门操作
前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...
- java之servlet入门操作教程一续
本节主要是在java之servlet入门操作教程一 的基础上使用myeclipse实现自动部署的功能 准备: java之servlet入门操作教程一 中完成myFirstServlet项目的创建: ...
- Mysql数据库的二进制安装和基础入门操作
前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...
- Mycat 中间件配置初探与入门操作
Mycat中间件配置初探与入门操作 By:授客 QQ:1033553122 实践环境 Mycat-server-1.5.1-RELEASE-20161130213509-win.tar.gz 下载地址 ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- 01.JDBC操作数据库-快速入门操作
/** * 简单入门操作 * 注:先将mysql-connector-java-5.1.36.jar 构建 Build Path环境当中去 * @param args * @throws Except ...
- (转)私有代码存放仓库 BitBucket介绍及入门操作
转自:http://blog.csdn.net/lhb_0531/article/details/8602139 私有代码存放仓库 BitBucket介绍及入门操作 分类: 研发管理2013-02-2 ...
随机推荐
- Git撤销add、commit
撤销add git status 查看当下更新的文件 git reset HEAD 表示撤销上次add的所有文件 git reset HEAD dir/dir/test.php 撤销指定文件 撤销co ...
- Vue-webpack-hbuilderx 开发前端基本命令
--创建Vue 项目 pc 需要装 node 环境 ,安装完之后,就可以在cmd中使用npm 命令了 1:npm install -g vue-cli //电脑端需要安装vue 脚手架模板,电脑端一 ...
- 解决java依赖poi导出Excel表时，没有出现下载提示的问题
转自:https://blog.csdn.net/jinchunzhao123/article/details/88626077 浏览器响应: 而且进入断点调试,所有的数据都执行了就是没有下载提示.而 ...
- 归并排序python实现源码
将开发过程经常用到的一些代码片段收藏起来,下面的资料是关于归并排序python实现的代码,应该能对码农们有一些用. def mergesort(arr): if len(arr) == 1: retu ...
- MavenWrapper替代Maven
1. 说明 jdk8已经安装成功 Maven已经安装成功 参见Maven Wrapper 2. Maven初始化项目 注:初次执行,Maven会下载很多jar,需等待几分钟 mvn archetype ...
- session有效期设置的两种方式
/**session有效期设置的两种方式: * 1.代码设置:session.setMaxInactiveInterval(30);//单位:秒.30秒有效期,默认30分钟. * 2.web.xml中 ...
- 【Iterm2】item2 ssh保持连接
profiles -> sessions -> 勾选 When idel, send ASCII code就可以了
- mysql where 1
where后跟各种查询条件,当条件为真时即可查询出记录.在这里where 1,1为真,也就是where后的条件为真,查询表中所有内容. SELECT * FROM `sdb_pam_members` ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- 前端安全问题之CSRF和XSS
一.CSRF 1.什么是 CSRF CSRF(全称 Cross-site request forgery),即跨站请求伪造 2.攻击原理 用户登录A网站,并生成 Cookie,在不登出的情况下访问危险 ...