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 ...
随机推荐
- 2019 字节跳动java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.字节跳动等公司offer,岗位是Java后端开发,因为发展原因最终选择去了字节跳动,入职一年时间了,也成为了面 ...
- 启动OpenOffice服务
下载安装 安装OpenOffice 4.1.6:下载路径:http://www.openoffice.org/zh-cn/download/ 启动 用以下命令启动OpenOffice服务,注意ip,如 ...
- 【转载】 C#中使用int.TryParse方法将字符串转换为整型Int类型
在C#编程过程中,将字符串string转换为整型int过程中,时常使用的转换方法为int.Parse方法,但int.Parse在无法转换的时候,会抛出程序异常,其实还有个int.TryParse方法可 ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- 英语Bisynes商务
英语bisynes商务概念的提出是改革的产物,有一个演变的过程:贸易部--商业部.外贸部--内贸部--内贸局--商务部.是内外贸一体化的概念. 中文名:商务 外文名:Business,Bisynes商 ...
- springboot feign too many bytes written executing POST
解決办法: pom添加: <dependency><groupId>io.github.openfeign</groupId><artifactId>f ...
- Hive Lateral View
一.简介 1.Lateral View 用于和UDTF函数[explode,split]结合来使用. 2.首先通过UDTF函数将数据拆分成多行,再将多行结果组合成一个支持别名的虚拟表. 3.主要解决在 ...
- 深入理解JVM-java内存区域与内存溢出异常
1.内存模型概述 2.运行时数据区 2.1.程序计数器 理解: 1.什么是程序计数器 2.线程私有还是共享 引入难点: 理解什么是 native方法 简单地讲,一个Native Method就是一个j ...
- BootstrapValidator 表单验证超详细教程
一. 引入js 和css文件 在有jquery和bootstrap的页面里引入 bootstrapValidator.js bootstrapValidator.css 链接: https://pan ...
- Python,while循环小例子--猜拳游戏(三局二胜)
Python,while循环小例子--猜拳游戏(三局二胜) import random all_choice = ['石头', '剪刀', '布'] prompt = '''(0)石头 (1)剪刀 ( ...