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图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
随机推荐
- 极*Java速成教程 - (7)
Java高级特性 数组 在Java中,数组是一串连续的,不可改变长度的,对象被固定的,类型固定的连续空间.数组中的随机访问非常迅速,但为了速度放弃了灵活性.而效率也是数组最大的优点. 在使用泛型的容器 ...
- POJ 3410 Split convex polygon（凸包）
题意是逆时针方向给你两个多边形,问你这两个多边形通过旋转和平移能否拼成一个凸包. 首先可以想到的便是枚举边,肯定是有一对长度相同的边贴合,那么我们就可以n2枚举所有边对,接下来就是旋转点对,那么假设多 ...
- 06: django+celery+redis
目录: 1.1 Celery介绍 1.2 celery 组件 1.3 安装相关包 与 管理命令 1.4 celery与Django执行异步任务 1.5 在django中使用计划任务功能 1.1 Cel ...
- 二： Jvm内存模型
因为每个对象生命周期不一样,jvm在做内存管理的时候,就帮我们分成了三个区域: 1. 新生代(回收频率高) 新生和老年默认大小比例为1:2 2. 老年代(回收频率低) 最好所有的对象都 ...
- 00.AutoMapper 之入门指南(Getting Started Guide)
转载(https://www.jianshu.com/p/29ee5a94c1d9) 入门指南(Getting Started Guide) AutoMapper 是什么? AutoMapper 是一 ...
- Axiso解决跨域访问
问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...
- Windows及Android倍速播放视频软件下载
目录 1. 更多推荐 2. 关键字 3. 按 4. 软件下载 4.1. IOS应用商店 4.2. 网盘下载 5. 软件介绍 5.1. PotPlayer(Windows) 5.2. MoboPlaye ...
- mknod - 建立块专用或字符专用文件
总览 mknod [options] name {bc} major minor mknod [options] name p GNU 选项(缩写): [-m mode] [--help] [--ve ...
- 前端之CSS：CSS补充
css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...
- java课堂测试2
//信1605-2 20163428 刘宏琦import java.util.*;public class Number { /** * @param args */ public void pand ...