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 ...
随机推荐
- 基于xilinx Zynq UltraScale MPSoC平台的核心板及开发板介绍-米尔科技
近日,米尔科技推出国内首款基于xilinx Zynq UltraScale+MPSoC 平台的核心板及开发板.其优势主要有:采用16纳米制程,相比Znyq7000系列每瓦性能提升5倍,且单芯片融合4核 ...
- ASPxComboBox默认情况下不显示代码和名称，特别头疼，直到发现了关键
1.ASPxComboBox 默认不开启 AutoPostBack: 既是开启,总显示第一行(好像是个bug) 2.只好ajax,但是默认情况下不显示代码和名称,特别头疼,直到发现了关键 <dx ...
- 使用vue-router在页面之间传值及接收值
第一页 点击去第二页的时候进行传值直接贴代码看: <template> <div id="app"> <div><router-link ...
- 珠宝juelrye宝石
juelrye n.珠宝 late 14c., juelrye "precious ornaments, jewel juelrye (uncountable) Adornment with ...
- Android为TV端助力记录EditText.setInputType的坑
如XML中设置android:inputType=”numberDecimal”在Java代码中仅设置setInputType(EditorInfo.TYPE_NUMBER_FLAG_DECIMAL) ...
- Cannot assign to read only property 'exports' of object '#<Object>' ，文件名大小写问题！！！
有些坑不知道怎么就掉进去,可能一辈子都爬不起来!!! 一.错误描述 昨天还好好的,今天早上来从git获取了一下别人提交的代码就出错了!而提交代码的人 运行一点错误都没有!!! cya@KQ-101 M ...
- Environment类在代码中的使用
string environmentVariable = Environment.GetEnvironmentVariable("TrustMerchantIniFile"); 可 ...
- jquery 表单对象属性筛选选择器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...
- JS中的this、apply、call、bind(经典面试题)
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
- java处理异常的机制关键字为throw和throws
在异常处理的过程中,throws和throw的区别是? throws:是在方法上对一个方法进行声明,而不进行处理,而是向上传,谁调用谁处理. throw:是在具体的抛出一个异常类型. throws的栗 ...