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 ...
随机推荐
- Ext下载文件
项目中前台用的是Ext JS,要从数据库中查询数据并导出为Excel表格 对此研究了下,代码如下: 前台代码: /** * 进行下载文件(form方式) */ _downloadDraft:funct ...
- 遍历js对象中的属性
可以使用js自带的for in.也可以使用Ext JS中的方法来遍历js对象中的属性 代码如下: /** 遍历对象 */ var person = {name:'张泰松',age:28}; //js方 ...
- shell EOF 用户自定义终止符
#!/bin/bash ftp -n << EOF user guest 123456 binary cd /home/ prompt mget * close bye EOF 使用Tab ...
- unity shader入门（一）：基本结构话痨版
unity shader 有三种形式:表面着色器(Surface Shader),顶点/片元着色器(Vertex/Fragment Shader),固定函数着色器(Fixed Function Sha ...
- 记一次IntelliJ IDEA中文乱码问题
问题描述:输出控制台中文乱码,反正就是各种百度解决不了 问题解决:https://blog.csdn.net/m0_37893932/article/details/78280663 解决方案:我用的 ...
- Ubuntu16.04 网络配置
Ubuntu 网络配置 安装Ubuntu操作系统之后,为了通过Xshell连接主机,或者连接其他主机.需要进行如下网络配置和ssh服务配置. 1 网络配置 1.1 修改网络配置信息 sudo vi / ...
- Python——生成器&推导式
生成器 生成器的本质就是迭代器,那么还为什么有生成器呢,两者唯一的不同就是迭代器都是Python给你提供能够的已经写好的工具或者通过数据转化得来的.而生成器是需要我们自己用Python代码构建的工具. ...
- Spring Boot 默认支持的并发量
Spring Boot应用支持的最大并发量是多少? Spring Boot 能支持的最大并发量主要看其对Tomcat的设置,可以在配置文件中对其进行更改.当在配置文件中敲出max后提示值就是它的默认值 ...
- k8s之pod与Pod控制器
k8s中最为重要的基础资源,pod,pod controller,service pod controller类型有多种需要向控制器赋值之后使用: kubectl命令使用 kubectk get no ...
- Python-tkinter开发学习 笔记
目录 课时一 kinter 介绍 查询官方帮助:help(tkinter) 概念介绍 最简单的界面 实现简单的模块 组件的摆放方式 pack()方式例子 gird() 方式例子 place方式例子 课 ...