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 ...
随机推荐
- CF 504E Misha and LCP on Tree（树链剖分+后缀数组）
题目链接:http://codeforces.com/problemset/problem/504/E 题意:给出一棵树,每个结点上有一个字母.每个询问给出两个路径,问这两个路径的串的最长公共前缀. ...
- Cheatsheet: 2013 08.01 ~ 08.13
Mobile Objective C Blocks: Summary, Syntax & Best Practices Android SDK: Create an Arithmetic Ga ...
- 【转载】标准输入输出重定向(Visual C++)
原文:标准输入输出重定向(Visual C++) 引言 本人偶得在 Visual C++ 中进行输入输出重定向的办法,比通常的做法“freopen”更加的灵活和方便,特在此共享.目前,代码正在不断地摸 ...
- Dbcp2抛出org.apache.commons.dbcp2.LifetimeExceededException
三月 24, 2016 5:16:33 下午 org.apache.commons.dbcp2.BasicDataSource onSwallowException 警告: An internal o ...
- Set Font Properties On Mouse Hover Of Push Button And Text Items At Run time In Oracle Forms
Change the font size and weight of text items and push buttons on mouse hover in Oracle Forms. An ...
- [HDOJ3911]Black And White（线段树，区间合并）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3911 题意:一个01串,两种操作: 0 a b:查询[a,b]内连续1的最长长度. 1 a b:翻转[ ...
- SQL索引一步到位
以下均非原创,仅供分享.学习!!! SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭开他的神秘面纱. 1.1 什么是索引? S ...
- Codeforces Round #379 (Div. 2) C. Anton and Making Potions 二分
C. Anton and Making Potions time limit per test 4 seconds memory limit per test 256 megabytes input ...
- HDU1016 Prime Ring Problem（DFS回溯）
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Image与byte[]之间的转换
//将image转化为二进制 public static byte[] GetByteImage(Image img) { byte[] bt = null; if (!img.Equals(null ...