ECharts开源图表使用方法简单介绍
ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：http://echarts.baidu.com/index.html
需要先下载插件：https://github.com/ecomfe/echarts/archive/1.4.1.zip
1. 首先需要在文件中引入JS库，可以使用百度的CDN
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
2. 之后创建一个用于显示图表的DIV
<div id="pie" style="height:400px"></div> <div id="bar" style="height:400px"></div>
3. 配置加载的图表类型及路径
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
}
});
</script>
4. 配置图表数据
optionpie = {
title: {
text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['满意', '不满意']
},
toolbox: {
show: true,
feature: {
restore: true,
saveAsImage: true
}
},
calculable: true,
series: [
{
name: '总满意度百分比',
type: 'pie',
radius: '55%',
center: ['50%', 225],
data: [
{ value: 100, name: '满意' },
{ value: 16, name: '不满意'}
]
}
]
};
option = {
title: {
text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'
},
tooltip: {
trigger: 'axis',
formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
},
legend: {
x: 'right',
padding: [5,70,5,5],
data: ['满意', '不满意']
},
toolbox: {
show: true,
feature: {
restore: true,
saveAsImage: true
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: '满意',
type: 'bar',
radius: '55%',
center: ['50%', 225],
data: [10, 5, 8]},
{
name: '不满意',
type: 'bar',
radius: '55%',
center: ['50%', 225],
data: [2, 4, 6]}
]
};
5. 将数据显示在图表中
require(
[
'echarts',
'echarts/chart/pie',
'echarts/chart/bar'
],
function (ec) {
//饼状图
var pieChart = ec.init(document.getElementById('pie'));
pieChart.setOption(optionpie);
//柱状图
var myChart = ec.init(document.getElementById('bar'));
myChart.setOption(option);
}
)
通过以上即可完成图表的配置，这里附上完整的代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<!-- 来自百度CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="pie" style="height:400px"></div> <div id="bar" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
}
}); optionpie = {
title: {
text: '2014年04月客户总满意度比例图',subtext: '测试人员',x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['满意', '不满意']
},
toolbox: {
show: true,
feature: {
restore: true,
saveAsImage: true
}
},
calculable: true,
series: [
{
name: '总满意度百分比',
type: 'pie',
radius: '55%',
center: ['50%', 225],
data: [
{ value: 100, name: '满意' },
{ value: 16, name: '不满意'}
]
}
]
};
option = {
title: {
text: '2014年04月客户满意度分布图',subtext: '测试人员',x: 'left'
},
tooltip: {
trigger: 'axis',
formatter: "{b}<br/>{a0} : {c0}<br/>{a1} : {c1}"
},
legend: {
x: 'right',
padding: [5,70,5,5],
data: ['满意', '不满意']
},
toolbox: {
show: true,
feature: {
restore: true,
saveAsImage: true
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ['客服人员满意度', '维修人员满意度', '售后人员满意度']
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [
{
name: '满意',
type: 'bar',
radius: '55%',
center: ['50%', 225],
data: [10, 5, 8]},
{
name: '不满意',
type: 'bar',
radius: '55%',
center: ['50%', 225],
data: [2, 4, 6]}
]
};
require(
[
'echarts',
'echarts/chart/pie',
'echarts/chart/bar'
],
function (ec) {
var pieChart = ec.init(document.getElementById('pie'));
pieChart.setOption(optionpie);
var myChart = ec.init(document.getElementById('bar'));
myChart.setOption(option);
}
)
</script>
</body>
完整代码复制到html中可以直接运行
完整的API可以参考官网：http://echarts.baidu.com/doc/doc.html
ECharts开源图表使用方法简单介绍的更多相关文章
- InputStreamReader 和 OutputStreamWriter类使用方法简单介绍，及演示。
InputStreamReader 和 OutputStreamWriter类使用方法简单介绍. 一.InputStreamReader类 InputStreamReader 将字节流转换为字符流.是 ...
- 基于SIP和RTP协议的开源VOIP之QuteCom简单介绍
**************************************************************************************************** ...
- Android Mediaplayer各种属性和方法简单介绍
主要涉及类:MediaPlayer (1) 当一个MediaPlayer对象被创建或者调用reset()方法之后,它处于空闲状态,调用release()方法后处于结束状态 1,一个MediaPlaye ...
- eclipse IDE使用git方法简单介绍
eclipse下使用git插件上传代码至github 1.eclipse下安装git eclipse git 插件的安装. 点击 Help->Install New Software-> ...
- awk基本使用方法简单介绍
之前说过sed, 今天来说awk, 它也是一个文本处理器. 是linux下的一个命令, 比sed更强大. 搞linux开发, 尤其是后台开发, 这个命令差点儿必需要用到. awk这三个字母分别代表其三 ...
- java类中的static成员变量和static方法简单介绍，持续补充
一.静态成员变量 1.属于整个类而不是某个对象实例,所以可以直接通过类名和对象名去调用. 2.静态成员属于整个类,当系统第一次使用该类时,就会为其分配内存空间直到该类被卸载才会进行资源回收 二.静态方 ...
- python 子进程 subpocess 的使用方法简单介绍
python的子进程嘛,就是利用python打开一个子进程(当然像是一句废话),但是可能和我们理解的不太一样. 一:如何理解? 我们可能的理解:多开一个进程运行某个python函数(如果只想实现这个功 ...
- Python Appium 元素定位方法简单介绍
Python Appium 元素定位 常用的八种定位方法(与selenium通用) # id定位 driver.find_element_by_id() # name定位 driver.find_ ...
- java 多线程 start方法 run方法 简单介绍。
一 start开启一个多线程, run 只是一个内部的方法. package com.aaa.threaddemo; /* * start方法的作用? * 在 Java中启动多线程调用的是start方 ...
随机推荐
- 《head first python》第一章《初识python》总结
该章主要介绍了python的安装和列表相关 列表主要用了movies做介绍: 1.列表及嵌套列表:movies=["the hodaliy",1975,"zhangyim ...
- UIBezierPath
UIBezierPath 笔者在写本篇文章之前,也没有系统学习过贝塞尔曲线,只是曾经某一次的需求需要使用到,才临时百度看了一看而且使用最基本的功能.现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞 ...
- Swift —构造函数与存储属性初始化-备
构造函数的主要作用是初始化实例,其中包括:初始化存储属性和其它的初始化.在Rectangle类或结构体中,如果在构造函数中初始化存储属性width和height后,那么在定义他们时就不需要初始化了. ...
- favicon支持的图片格式
为网站设置favicon有两种方式: 1.网站根目录下放置名为favicon.ico的图片,浏览器就会自动获取: 2.在页面中通过<link rel="shortcut icon&qu ...
- 转：Raspberry Pi（树莓派）试用小记
近期入手一树莓派卡片机,体验了一下它的强大,写篇报告,推广一下哈! 机器截图: 基础参数: CPU:700 MHz, ARM11 内存:512M(还有一种是256M的) 支持GPU加速(高清视频无压力 ...
- HADOOP在处理HIVE时权限错误的解决办法
今天,小乔操作时发现问题: org.apache.hadoop.security.AccessControlException: Permission denied: user=root, acces ...
- win8 开启administrator 管理员帐户
进入命令提示符以后,输入命令:[net user administrator /active:yes]然后注销,就可以使用administrator登录.. 如果想要取消administrator激活 ...
- Activity的各种功能封装
Activity全屏.隐藏系统标题栏.设置屏幕方向.Activity跳转等功能 /** * Copyright (C) 2012 TookitForAndroid Project * * Licens ...
- NOI2014题解
起床困难综合症(BZOJ 3668) 送分题,直接从高位向低位贪心. 魔法森林(BZOJ 3669) 一个容易想到的办法就是枚举A的最大值,以B作为权值求最小生成树.暴力的话要T的.如果从小到大枚举A ...
- eclipse tomcat 网页404的一个小问题
之前一篇文章说过关于修改tomcat布置的应用的localhost路径.因为有两个项目在eclipse,所以我每次启动tomcat的时候都会加载两个项目, 但我其实只用调试其中一个项目,所以我就在se ...