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 ...
随机推荐
- Intent官方教程(4)用Intent构造应用选择框
Forcing an app chooser When there is more than one app that responds to your implicit intent, the us ...
- ios沙盒路径
http://www.cnblogs.com/ios-wmm/p/3299695.html iOS沙盒路径的查看和使用 NSString *path = NSHomeDirectory();//主目录 ...
- VFL +AutoLayout
横竖屏事件响应(viewWillLayoutSubviews和通知)两种方式 http://blog.csdn.net/nogodoss/article/details/17246489 一,NSLa ...
- JAVA——getter setter
package org.hanqi.pn0120; public class User { private int userid; private String username; private S ...
- UVA 10163 十六 Storage Keepers
十六 Storage Keepers Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit ...
- CodeForces 496B Secret Combination
Secret Combination Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u ...
- 格式化时间（SimpleDateFormat）
import java.text.SimpleDateFormat; import java.util.Date; public class Main{ public static void main ...
- vimperator学习教程
有人总是说Vim难学,而Vimperator把火狐变成了VIM,所以很多人就认为只有那些VIM的狂热者才会用这个插件,但实际上并不是这样.Vimperator在安装之后,只要稍加练习,就可以让我们的浏 ...
- NoSQL数据库：数据的一致性
NoSQL数据库:数据的一致性 读取一致性 强一致性 在任何时间访问集群中任一结点,得到的数据结果一致: 用户一致性 对同一用户,访问集群期间得到的数据一致: 解决用户一致性:使用粘性会话,将会话绑定 ...
- 常见的PC端和移动端表单组件
http://files.cnblogs.com/samwu/PC%E7%AB%AF%E5%89%8D%E7%AB%AF%E4%BA%A4%E4%BA%92%E7%BB%84%E4%BB%B6.rar