图表工具--- ECharts.js学习(一) 简单入门
ECharts.js学习(一)
在项目开发的时候,在前端的数据需要用图表的形式展示。网上搜索了一下,发现有几种统计图库。具体有哪几种可以看:
一、ECharts.js的特点
这也是一款基于HTML5的图形库。图形的创建也比较简单,直接引用Javascript即可。使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3;第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易;第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便。
先用个小案例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["苹果","三星","小米","华为","oppo","酷派"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[100, 120, 150, 160, 220, 80]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
显示效果:
这个是我在CEharts官方文档的小案例:
官方文档:ECharts官方文档
二、CEharts进行步骤讲解
第一步,引用Js文件
<script type="text/javascript" src="js/echarts.js"></script>
js文件有几个版本,可以根据实际需要引用需要的版本。echarts.js下载链接
第一步,准备一个放图表的容器
<div id="main" style="width:600px; height: 400px;"></div>
第三步,设置参数,初始化图表
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'数据统计'
},
tooltip:{},
legend:{
data:['手机销量']
},
xAxis:{
data:["苹果","小米","华为","三星"]
},
yAxis:{ },
series:[{
name:'销量',
type:'line',
data:[800,1000,1300,400]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); //使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
效果图:不清楚是因为我缩小网页了
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标,数据绑定上也是采用value 和name对应的形式。
var option = {
title:{
text:'ECharts 数据统计'
},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
data:[
{value:1000,name:'苹果'},
{value:1200,name:'小米'},
{value:1800,name:'华为'},
{value:400,name:'三星'}
]
}]
};
效果截图
有关最基础的就讲到这里,下篇,我将如何通过后台数据完成图表。
想的太多,做的太少,中间的落差就是烦恼,要么去做,要么别想 少尉【20】
图表工具--- ECharts.js学习(一) 简单入门的更多相关文章
- ECharts.js学习(一) 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- 使用第三方图表工具——Chart.js
效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- ECharts.js学习(二)动态数据绑定
Echarts 数据绑定 简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的.EChart.js对于数据异步读取这块提供了异步加载的方法. 绑 ...
- ECharts.js学习(三)交互组件
ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol ...
- 编译器工具 Flex Bison for Windows 简单入门例子
最近从事一个系统仿真软件的开发,里面定义了自己的描述性语言MSL, MSL语言经FlexBison转换成C语言,然后用C编译器来编译并计算仿真. 现在领域驱动开发比较热门,有机会定义自己的语言对程序员 ...
- gulp学习笔记--简单入门
一.准备工作 1.gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS 2.利用npm全局安装gulp. npm install -g gulp 3.在项目根目录下新建文件package ...
- Vue.js学习 Item1 --快速入门
我们以 Vue 数据绑定的快速导览开始.如果你对高级概述更感兴趣,可查看这篇博文. 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.在浏览器新标签页中打开它,跟 ...
- Quartz学习——Quartz简单入门Demo(二)
要学习Quartz框架,首先大概了解了Quartz的基本知识后,在通过简单的例子入门,一步一个脚印的走下去. 下面介绍Quartz入门的示例,由于Quartz的存储方式分为RAM和JDBC,分别对这两 ...
- LESS 学习记录(简单入门)
什么是 LESS LESS是一种动态样式语言,属于 CSS 预处理语言的一种.它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量.继承.运算.函数等,方便 CSS 的编写和维护. 使用 ...
随机推荐
- mysql如何执行关联查询与优化
mysql如何执行关联查询与优化 一.前言 在数据库中执行查询(select)在我们工作中是非常常见的,工作中离不开CRUD,在执行查询(select)时,多表关联也非常常见,我们用的也比较多,那么m ...
- lbp特征提取(等价模式)
LBP等价模式 考察LBP算子的定义可知,一个LBP算子可以产生多种二进制模式(p个采样点)如:3x3邻域有p=8个采样点,则可得到2^8=256种二进制模式:5x5邻域有p=24个采样点,则可得到2 ...
- Java学习笔记14---this作为返回值时返回的是什么
有时会遇到this作为返回值的情况,那么此时返回的到底是什么呢? 返回的是调用this所处方法的那个对象的引用,读起来有点绕口哈,有没有想起小学语文分析句子成份的试题,哈哈. 一点点分析的话,主干是& ...
- oracle PL/SQL语法基础
目录 数据类型 定义变量 PL/SQL控制结构 参考资料 Oracle10g数据类型总结 PL/SQL之基础篇 数据类型 学习总结 字符类型 char.nchar.varchar.nvarchar:有 ...
- iOS开发证书和配置文件的使用
提示:之前只是根据网上的流程完成了iOS项目的发布过程,对于证书和配置文件仍是一头雾水,这里参照别人的文章,简单了解一下,毕竟以后用的着. 这里有几个问题: 什么是iOS证书,它是如何与app应用关联 ...
- hibernate使用setResultTransformer()将SQL查询结果放入集合中
在平时开发中Hibernate提供的hql基本能够满足我们的日常需求.但是在有些特殊的情况下,还是需要使用原生的sql,并且希望sql查询出来的结果能够绑定到pojo上.hibernate API中的 ...
- 设备树的interrupt
http://www.cnblogs.com/targethero/p/5080499.html https://www.cnblogs.com/xiaojiang1025/p/6131381.htm ...
- JMeter基本元素简介
JMeter基本元素简介 一.测试计划 测试计划对象有一个复选框叫做"Functional Testing"(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例 ...
- Codeforces Round #356 (Div. 1) C. Bear and Square Grid
C. Bear and Square Grid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- 2017"百度之星"程序设计大赛 - 资格赛【1001 Floyd求最小环 1002 歪解(并查集),1003 完全背包 1004 01背包 1005 打表找规律+卡特兰数】
度度熊保护村庄 Accepts: 13 Submissions: 488 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3276 ...