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图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
随机推荐
- 使用extract-text-webpack-plugin插件后报错
如果你使用的webpack是4+版本,那么尝试运行npm install extract-text-webpack-plugin@next ,即可解决问题 然而最好的解决办法是在webpack4+的版 ...
- webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js
webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1
- composer安装thinkphp5
之前安装过composer,里面的一些命令符可以看看,安装tp5我也是按照文档来的,也没什么难度.但是也出现一些问题: 安装tp5: 安装在本地php环境的www目录下,通过命令窗口切换到www目录下 ...
- pip找不到的安装包
pip install找不到一些python包 可以访问网址,选择python版本自行下载:http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 清华大学开源 ...
- Python 入门之格式化输出
Python 入门之格式化输出 1.格式化 (1)%为占位 (2)%s --- 站字符串的位置(数字.字符串都能够进行填充) name = input('请输入姓名:') age = input('请 ...
- dsu on tree 与长链剖分
dsu on tree 对于树进行轻重链剖分,对于节点 $x$ ,递归所有轻儿子后消除其影响,递归重儿子,不消除其影响. 然后对于所有轻儿子的子树暴力,从而得到 $x$ 的答案. 对于要消除暴力消除即 ...
- APP元素定位工具weditor
github地址https://github.com/openatx/weditor python -m weditor --shortcut adb devices 在页面上输入手机设备号,点Con ...
- Linux系统性能测试工具（四）——CPU性能测试工具之super_pi、sysbench
本文介绍关于Linux系统(适用于centos/ubuntu等)的CPU性能测试工具-sysbench.CPU性能测试工具包括: super_pi: sysbench——不仅可以测试CPU性能,而且可 ...
- num1，随堂笔记（3月10日）
1.计算机发展史(略) 2.我们所使用的计算机包括了计算机硬件.操作系统和应用程序与网络. 3.计算机硬件构成---CPU(运算器和控制器).内存.硬盘.输入设备和输出设备. ①CPU是计算机的主要计 ...
- C++ STL（标准模板库）
一.STL简介 STL(Standard Template Library,标准模板库)是惠普实验室开发的,在被引入C++之前该技术就已经存在了很长的一段时间. STL的代码从广义上讲分为三类:alg ...