Echart 商业级数据图表
简介
最近工作上用到这个图表库，图表丰富，用起来也很方便。纯javascript，可以流畅得运行在PC和移动设备上，兼容大部分浏览器。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗 图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
Echarts官网：http://echarts.baidu.com/echarts2/index.html
Echarts实例：http://echarts.baidu.com/echarts2/doc/example.html
配置
1. 下载资源文件，去官网下载
http://echarts.baidu.com/echarts2/index.html
2. 目录结构介绍
如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入
如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
1、引用资源的主文件
<script src="build/source/echarts.js" type="text/javascript"></script>
2、指图表对象
var myChart = echarts.init(document.getElementById('div1'));
var option = {};
myChart.setOption(option);
示例1 折线图：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.chart{
width:900px;
height:400px;
border:1px solid #dddddd;
margin:10px auto;
}
</style>
<script src="build/source/echarts.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="chart" id="chart"></div>
<script> </script>
</body>
</html>
js
// 自定义模块加载
require.config({
paths:{
echarts:'./build/dist' //引入资源文件夹路径
}
});
require(['echarts','echarts/chart/line'],function(ec){
var chart = document.getElementById("chart");
var myChart = ec.init(chart);
var option = {
title:{
text:'标题',
x:'center' //放置位置——水平
},
tooltip:{
trigger:'axis' //气泡提示配置
},
legend:{ //图例配置
data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
padding:5,//图例内边距，默认上下左右内边距为5
itemGap:10, //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
y:'bottom' //垂直安放位置
},
toolbox:{ //工具箱
show:true, //是否显示工具箱
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar','stack','tiled']},
restore:{show:true},
saveAsImage:{show:true}
}
},
xAxis:[{ //x轴
type:'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
boundary:false, //坐标轴两端空白策略
data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis:[{
type:'value'
}],
series:[
{ //图表数据
name:'邮件营销',
type:'line',
stack:'总量', //组合名称
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack:'总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
] };
myChart.setOption(option); });
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.chart{
width:900px;
height:400px;
border:1px solid #dddddd;
margin:20px auto;
}
</style> </head>
<body>
<!-- 折线图 -->
<div class="chart" id="chart1"></div> <!-- 柱状图 -->
<div class="chart" id="chart2"></div> <!-- 饼图 -->
<div class="chart" id="chart3"></div> <script src="build/source/echarts.js"></script>
<script src="js/main.js"></script>
</body>
</html>
js:
/*
*2016.9.6
*主模块
*/
// 自定义模块加载
require.config({
paths:{
echarts:'./build/dist' //引入资源文件夹路径
}
});
require([
'echarts',
'echarts/chart/line', //折线图
'echarts/chart/bar', //柱形图
'echarts/chart/pie', //饼图
'echarts/chart/chord', //和弦图
'echarts/chart/map', //地图
'echarts/chart/radar' //雷达
//★一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
],
function(ec){
var chart1 = document.getElementById("chart1"), //折线图
chart2 = document.getElementById("chart2"), //柱状图
chart3 = document.getElementById("chart3");
var myChart1 = ec.init(chart1),
myChart2 = ec.init(chart2),
mychart3 = ec.init(chart3); // 折线图
var option1 = {
title:{
text:'标题',
x:'center' //放置位置——水平
},
tooltip:{
trigger:'axis' //气泡提示配置
},
legend:{ //图例配置
data:['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
padding:5,//图例内边距，默认上下左右内边距为5
itemGap:10, //Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
y:'bottom' //垂直安放位置
},
toolbox:{ //工具箱
show:true, //是否显示工具箱
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar','stack','tiled']},
restore:{show:true},
saveAsImage:{show:true}
}
},
xAxis:[{ //x轴
type:'category', //坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
boundary:false, //坐标轴两端空白策略
data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis:[{
type:'value'
}],
series:[
{ //图表数据
name:'邮件营销',
type:'line',
stack:'总量', //组合名称
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack:'总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
] }; // 柱状图
var option2 = {
title:{
text:'某地区蒸发量和降水量',
subtext:'数据纯属虚构'
},
tooltip:{
trigger:'axis'
},
legend:{
data:['蒸发量','降水量']
},
toolbox:{
show:true,
feature:{
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis:[{
type:'category',
data:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis:[{
type:'value'
}],
series:[
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}; // 饼图
var option3={
title:{
text:'某站点用户访问来源',
subtext:'虚构数据',
x:'center'
},
tooltip:{
trigger:'item',
formatter:'{a} <br/>{b} : {c} ({d}%)'
},
legend:{
orient:'vertical',
x:'left',
data:['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
toolbox:{
show:true,
feature:{
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType:{
show:true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
} },
restore:{show:true},
saveAsImage:{show:true}
}
},
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
] }; myChart1.setOption(option1);
myChart2.setOption(option2);
mychart3.setOption(option3); });
运行结果：
var option={
title:{
text:'我的第一个图表示例'
},
tooltip:{
trigger:'axis'
}
};
2. boolean notMerge,表示是否合并option，默认false，可以不设置
万能接口，配置图表实例任何可配置选项（详见option），多次调用时option选项是默认是合并（merge）的，如果不需求，可以通过notMerger参数为true阻止与上次option的合并。
3. setSeries(Array series,{boolean = }notMerge)
1)Array类型的series序列数据，如下
var Array seriesList = new Array(); var seriesObj = new seriesObj();
seriesObj.name = "蒸发量";
seriesObj.type = "line";
seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]; //设置series
myChart.setSeries(seriesList,false);
4. showLoading(Object loadingOption)
mychart.showLoading({
text:'图表数据正在努力加载...',
x:'center',
y:'center',
textStyle:{
color:'red',
fontSize:14
},
effect:'spin'
});
//隐藏图表数据加载过度提示消息
myChart.hideLoading();
四：主要配置
title:{
show:true,
text:'标题'，
subtext:'副标题'，
left:150, //距离左边的像素 center||right
borderColor:'red', //边框颜色
borderWidth:5, //边框宽度
textStyle:{ //设置标题字体样式
fontSize:18
}
}
Echart 商业级数据图表的更多相关文章
- 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- ECharts – 大数据时代，重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
- 使用echart 做出数据折线图
代码如下: // 基于准备好的dom,初始化echarts图表var myChart = echarts.init(document.getElementById("main")) ...
- Python使用plotly绘制数据图表的方法
转载:http://www.jb51.net/article/118936.htm 本篇文章主要介绍了Python使用plotly绘制数据图表的方法,实例分析了plotly绘制的技巧. 导语:使用 p ...
- ajax请求返回Json字符串运用highcharts数据图表展现数据
[1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...
- （私人收藏）PPT数据图表
PPT数据图表 https://pan.baidu.com/s/1lXt8UU20IotD4LLagfTTXAkknf
- Echart：前端很好的数据图表展现工具+demo
官网: http://echarts.baidu.com/index.html 通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行 demo1: 1.新建一个echarts.ht ...
随机推荐
- CentOS6.5下安装wine OK
这篇文章主要记录了如何在CentOS 6.5上安装Wine 1.7.24开发版 1.安装需要的软件包 # yum groupinstall ‘Development Tools‘ # yum inst ...
- flume ng之TailSource
在它里面自带了一个TailSource以及TailDirSource,这个Source是负责读取一个文件,并一行一行的发送到sink端,而在flume-ng 1.4.0里面没有自带TailSource ...
- WCF 自托管、无配置文件实现jsonp（跨域）的访问
以下内容基于WCF4.0,本文将对比讨论配置文件方案和无配置文件方案的实现方式. WCF4.0加入了对RESTFU和标准终结点的支持,这为实现跨域提供了简单的方式. 一.有配置文件的情况: 首先我们先 ...
- 编写2个接口：InterfaceA和InterfaceB；在接口InterfaceA中有个方法void printCapitalLetter()；在接口InterfaceB中有个方法void printLowercaseLetter()；然 后写一个类Print实现接口InterfaceA和InterfaceB，最后再在主类E 的main方法中创建Print的对象并赋值，运行方法
package lianxi; public interface InterfaceA { void printCapitalLetter(); } package lianxi; public in ...
- 【leetcode❤python】13. Roman to Integer
#-*- coding: UTF-8 -*-#从前向后遍历罗马数字,#如果某个数比前一个数小,则加上该数.反之,减去前一个数的两倍然后加上该数###-----技术规则-----#----------- ...
- BZOJ 1797 最小割
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1797 题意:给出一个有向图,每条边有流量,给出源点汇点s.t.对于每条边,询问:(1)是 ...
- 学习html5第一天
HTMl5作为web标准的一种,在2004年诞生,web超文本应用技术工作组WHATWG将它发展起来,W3C由开始的不赞同到与WHATWG共同合作,并在2015年开始推广.并随着浏览器的不断支持和兼容 ...
- spring引入实体类映射文件
由于spring对hibernate配置文件hibernate.cfg.xml的集成相当好 LocalSessionFactoryBean有好几个属性用来查找hibernate映射文件: mapp ...
- NFS安装过程
操作环境:linuxmint做客户端--centos7(虚拟机)做服务器 1.先安装需要的包: centos7中:yum install rpcbind && yum install ...
- EntityManager方法简介
EntityManager 是用来对实体Bean 进行操作的辅助类.他可以用来产生/删除持久化的实体Bean,通过主键查找实体bean,也可以通过EJB3 QL 语言查找满足条件的实体Bean.实体B ...