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 ...
随机推荐
- Duilib动画按钮实现(转载)
转载:http://blog.csdn.net/cuiguanghui123/article/details/51674218 .h文件 #ifndef __UIBUTTONEX_H__ #defin ...
- 四、java中的数组
总结: 数组的特点: 1.存储的数据类型单一. 2.数组的大小不可变. 3.Arrays工具类.
- img 图片高度设置为百分比无效的解答
当用百分比作为宽高时 因为百分比是相对于其最近的父元素的宽高,所以首先其父元素要有宽高,宽度一般不设置会有默认值(比如整个屏幕的宽度),但是高度不设置就没有默认值,因此如果父元素没设高度值,而其内部 ...
- Codeforces Round #378 (Div. 2) D. Kostya the Sculptor map+pair
D. Kostya the Sculptor time limit per test 3 seconds memory limit per test 256 megabytes input stand ...
- 面向对象的JavaScript系列二，继承
1.原型链 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ ...
- Json-lib使用 转载
1.从Object到String 要先用Object对象构造一个JSONObject或者JSONArray对象,然后调用它的toString()方法即可 (1)示例一 1 Book book=new ...
- NOJ 1063 生活的烦恼
描述 生活的暑假刚集训开始,他要决心学好字典树,二叉树,线段树和各种树,但生活在OJ上刷题的时候就遇到了一个特别烦恼的问题.那当然就是他最喜欢的二二叉树咯!题目是这样的:给你一颗非空的二叉树,然后再给 ...
- ubuntu 下解决安装包依赖问题
我们用banshee软件安装豆瓣插件来做个示例: 1.首先在Ubuntu Software Center内搜索banshee播放器 因为我之前已经安装好了,可以看到如下界面,你可以在点击该软件看到in ...
- iOS - Sign up/in 注册/登录
1.Sign up/in 1.1 用户登录安全原则 不能在网络上传输用户隐私数据的明文. 不能在本地和服务器上存储用户隐私数据的明文. 1.2 用户登录流程 登录成功之后,应该跳转视图控制器到主页. ...
- spring集成quartz scheduler
创建项目 有两种创建quart配置作业 1.使用MethodInvokingJobDetailFactoryBean Quartz Scheduler 配置作业(MethodInvokingJobD ...