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基础笔记（6）
xml文件的写入 通过dom生成xml文件: package com.writexml; import java.io.File; import javax.xml.parsers.DocumentB ...
- [2019多校联考(Round 6 T3)]脱单计划 (费用流)
[2019多校联考(Round 6 T3)]脱单计划 (费用流) 题面 你是一家相亲机构的策划总监,在一次相亲活动中,有 n 个小区的若干男士和 n个小区的若干女士报名了这次活动,你需要将这些参与者两 ...
- JetBrains下载历史版本
https://www.jetbrains.com/clion/download/other.html 在上方的链接中将clion改为idea,phpstrom.webstrom等等
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- textarea标签输出内容时不能顶格（左对齐）输出
我用textarea输出文本内容的时候出现下面的问题:文本内容在action里测试没有问题(文本内容前面没有空格),但是在jsp页面textare标签中输出文本内容时,文本内容前面却出现一些多余的空格 ...
- 计算机系统结构总结_Scoreboard and Tomasulo
Textbook:<计算机组成与设计——硬件/软件接口> HI<计算机体系结构——量化研究方法> QR 超标量 前面讲过超标量的概念.超标量的目的就是实现指 ...
- 在django中使用循环与条件语言
{% if not Article_type_id %} <li class="active"><a href="/">全部</a ...
- 使用vscode来代替git上传代码到仓库
一.在上传前的注意事项 1. 要配置几个文件: (1)在根目录添加 .gitignore 文件:里面添加一些上传时需要忽略的文件 (2)在根目录添加 README.md 文件,这个用来说明项目的 ...
- Composer学习
Composer简介 Composer是PHP的一个依赖管理工具,不是包管理器:在项目中声明所依赖的外部工具库(libraries),Composer会自动安装止血工具库及依赖的库文件. 安装方式 C ...
- scrollIntoView 与平滑滚动
经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分.对于这样的需求,很容易想到使用锚点实现.但有一个问题:滚动一步到位,太生硬了. 我还是比较喜欢平滑滚动.HTML5 中提供了 CSS ...