简介

最近工作上用到这个图表库,图表丰富,用起来也很方便。纯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. 目录结构介绍

 (1)build  开发所有源文件,一次性引入全部图表 echarts-all.js,推荐引入echarts.js
 (2)doc 全部demo事例文件夹
 (3)index.html 文档入口
 
开发模式
1. 开发

如果你的项目本身并不是基于模块化开发的,或者是基于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); });

运行结果:

2. 柱状图,饼图
HTML
<!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); });

运行结果:

 
 
三:相关实例化方法
1、setOption(Object option,{boolean = true} notMerge)
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 商业级数据图表的更多相关文章

  1. 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  2. 数据图表插件Echarts(一)

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  3. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  4. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  5. 使用echart 做出数据折线图

    代码如下: // 基于准备好的dom,初始化echarts图表var myChart = echarts.init(document.getElementById("main")) ...

  6. Python使用plotly绘制数据图表的方法

    转载:http://www.jb51.net/article/118936.htm 本篇文章主要介绍了Python使用plotly绘制数据图表的方法,实例分析了plotly绘制的技巧. 导语:使用 p ...

  7. ajax请求返回Json字符串运用highcharts数据图表展现数据

    [1].[图片] Json字符串和highcharts数据图表展现.jpg 跳至 [1] code=26754#44745" rel="nofollow"> [2] ...

  8. (私人收藏)PPT数据图表

    PPT数据图表 https://pan.baidu.com/s/1lXt8UU20IotD4LLagfTTXAkknf

  9. Echart:前端很好的数据图表展现工具+demo

    官网:  http://echarts.baidu.com/index.html 通过一个简单的小Demo介绍echart的使用:demo均亲测可以运行 demo1: 1.新建一个echarts.ht ...

随机推荐

  1. 【Linux】方便的SecureCRT文件上传、下载命令

    使用SecureCRT连接服务器,可用命令上传.下载文件,非常方便. > 安装 如果系统报找不到以下命令,那么你可能没有安装软件.安装以下吧. [root@localhost ~]# yum - ...

  2. 编写一个Car类,具有final类型的属性品牌,具有功能drive; 定义其子类Aodi和Benchi,具有属性:价格、型号;具有功能:变速; 定义主类E,在其main方法中分别创建Aodi和Benchi的对象并测试对象的特 性。

    package b; public class Car { public final static Car pinpai=new Car(); public static Car instance() ...

  3. 【leetcode❤python】 438. Find All Anagrams in a String

    class Solution(object):    def findAnagrams(self, s, p):        """        :type s: s ...

  4. 【leetcode❤python】217. Contains Duplicate

    #-*- coding: UTF-8 -*- class Solution(object):    def containsDuplicate(self, nums):        numsdic= ...

  5. [转]SIP穿越NAT&FireWall解决方案

    原文链接(也是转载)http://blog.csdn.net/yetyongjin/article/details/6881491.我修改了部分错字.   SIP从私网到公网会遇到什么样的问题呢? 1 ...

  6. java中判断从数据库中取出的字段是否为空

    方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低.1:if(s == null || s.equals(""));方法二: 比较字符串长度, 效率高, 是我知道的最好一 ...

  7. 美国插画家Mike Bear作品欣赏

    Mike Bear,美国插画师兼概念艺术家,在漫画和游戏界从业6年有余,分别为包括Popcap.Rockstar Games.Hasbro.EA等在内的业界巨头创建作品.他的画风较为抽象,大胆想象出一 ...

  8. ARM工作模式

    ARM工作模式 学习ARM的最好的资料是ARM公司发布的资料:ARM Architecture Reference Manual.pdf 找到章节:Programmers’ Model 由文档可知:A ...

  9. How to build a GUI in ROS with Qt / C++

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: left; widows: 2; orphans: 2 ...

  10. shape into blocks--source code in python based on pySpark

    这是微博深度和广度预测的原始代码,写了大约半个月,第一个版本不是这样的,但是这个版本包含所有需要的功能. 模块化的程度也更高.找工作前一直想用python完美解决这个问题,后来发现自己的方法和硬件都有 ...