ECharts插件介绍（图表库）
ECharts是一个非常好用的插件，用于进行 树状图，折线图，饼图，地图等等，系列视图的绘制。（详情看官网）
了解：
AMD：模块化开发方式；
引入文件后：console.log(echarts) //得到一个echarts的对象
options：选项；
图表介绍：
柱状图（bar）
折线图（line）
饼图（pie）
散点图（scatter）
地图（map）
气泡图（bubble）
前提工作：
1.引入插件
2.设一个视图容器，为行内样式，
3.设置一个id，以便进行dom获取
插件的使用分为3个步骤；
第一步：
//初始化视图环境
使用 var myecharts=echarts.init() 里面的参数就是，对dom元素的获取
那么 myecharts 就是他的实例对象
第二步：
//配置信息 变量名随便取
var opaction={
title:{ //title:图表的标题
},
legend:{ //legend 图例组件
},
xAxis:{ //x轴坐标
},
Yaxis:{ //y轴坐标
},
series:{ //系列列表
},
tooltip:{ //提示框组件
formatter: //这个属性，便可显示具体的值，百分比，名称，等
}
}
详情看官网
第三部：
//将配置好的信息方法 实例对象上
myecharts.setOption(opaction);
下面会有一个案例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>饼图</title>
<style>
#main{
border:red 1px solid;
}
</style>
</head>
<body>
<div id="main" style="width:600px;height:400px"> </div>
</body>
</html>
<script src="echarts.js"></script>
<script>
var myecharts=echarts.init(document.getElementById("main"));
var opaction={
title:{
text:"饼图",
left:"center",
textStyle:{
color:"red"
}
},
series:{
type:"pie",
data:[
{
name:"web",
value:120
},
{
name:"android",
value:30
},
{
name:"ios",
value:30
},
{
name:"java",
value:50
},
{
name:"python",
value:70
},
{
name:"php",
value:60
} ]
},
tooltip:{
formatter:"{b}:{d}%"
}
};
myecharts.setOption(opaction);
</script>
ECharts插件介绍（图表库）的更多相关文章
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- 百度图表库ECharts
本文主要包含ECharts的介绍和教程.关于ECharts的应用就不多了,像经营状况.收支情况.数据分析等都需要以图表的形式展现,因为这样更直观. 一.介绍 ECharts,一个使用 JavaScri ...
- 详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化
1.背景 前段时间公司有个需求,需要在一个图表中展示两条折线,并且绘制出两条线的交点.为了满足需求大哥的需求,我也是着实想了有一会.下面我就把具体的实现过程给大家展示一下. 1.1.ECharts 简 ...
- ECharts（Enterprise Charts 商业产品图表库）初识
一.简介 大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了. ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript ...
- 最牛逼android上的图表库MpChart（一） 介绍篇
最牛逼android上的图表库MpChart一 介绍篇 MpChart优点 MpChart是什么 MpChart支持哪些图表 MpChart效果如何 最牛逼android上的图表库MpChart(一) ...
- highCharts入门-强大的图表库插件
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...
- 【转】个人常用iOS第三方库以及XCode插件介绍 -- 不错
原文网址:http://adad184.com/2015/07/08/my-favorite-libraries-and-plugins/ 第三方库是现在的程序员离不开的东西 不光是APP开发 基本上 ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
随机推荐
- Linux菜狗入门(不停更新)
资料来源:<腾讯课堂> 1, 计算机硬件包括CPU,内存,硬盘,声卡等等 2, 没有安装操作系统的计算机,通常被称为裸机 如果想在裸机上运行自己所编写的程序,就必须用机器语言书写程序 如果 ...
- 1、Java语言概述与开发环境——Java程序运行机制
Java语言是一种特殊的高级语言,它既有解释型语言的特性,也具有编译型语言的特征,因为Java要经过先编译后解释两个步骤. 一.高级语言的运行机制 计算机高级语言按程序的执行方式可以分为编译型和解释型 ...
- 学习Golang语言(6):类型--切片
学习Golang语言(1): Hello World 学习Golang语言(2): 变量 学习Golang语言(3):类型--布尔型和数值类型 学习Golang语言(4):类型--字符串 学习Gola ...
- spring boot 枚举使用的坑
java 枚举的功能挺多,但是坑更多,使用的时候要注意.如下面这个枚举. @Getter @AllArgsConstructor public enum EnumExpenseType impleme ...
- layoutSubviews何时调用的问题(原文：http://www.cnblogs.com/pengyingh/articles/2417211.html)
今天跟旺才兄学习了一下UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这 ...
- OC中数组排序的3种方法
总结OC中数组排序3种方法:sortedArrayUsingSelector:;sortedArrayUsingComparator:;sortedArrayUsingDescriptors: 大体上 ...
- TreeView详细用法
Treeview用于显示按照树形结构进行组织的数据. Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...
- linux系统快速搭建ftp服务器——实现匿名用户和创建用户访问服务器
一.准备工作: linux系统为CentOS Linux release 7.5.1804 (Core) 可以使用 lsb_release -a 命令查看 window系统中安装 SecureCR ...
- 2.k8s资源清单
一.常见资源对象 常见的资源对象:(包括但不仅限于) l Workload: Pod,ReplicaSet,Deployment,StatefulSet,DaemonSet,Job,Cronjob ...
- 【LuoguP3264】[JLOI2015] 管道连接(斯坦那树)
题目链接 题目描述 小铭铭最近进入了某情报部门,该部门正在被如何建立安全的通道连接困扰.该部门有 n 个情报站,用 1 到 n 的整数编号.给出 m 对情报站 ui;vi 和费用 wi,表示情报站 u ...