澳门新浦京电子游戏Echarts入门

ECharts开源来自百度商业前端数据可视化团队,基于html5
Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

一、简介

ECharts介绍

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。

澳门新浦京电子游戏 1

    大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了。

本文介绍的是2.0的版本,3.0版本已经出来了。

特色

推荐翻阅这份在线文档 《 Why ECharts
? 》,从中可以更直观的体验到ECharts的特性以及快速浏览到所有图表类型。
*文档中展现的个别特性在IE8-中并没有得到支持,所以建议使用IE9+、chrome、safari、firefox或opear等浏览器阅读这份文档。

    ECharts(Enterprise Charts
商业产品图表库) 是基于Canvas的,纯Javascript
的图表库,提供直观,生动,可交互,可个性化定制的

ECharts,缩写来自Enterprise
Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

混搭

澳门新浦京电子游戏 2

   数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

拖拽重计算

澳门新浦京电子游戏 3

        ECharts 是指 Enterprise
Charts(商业产品图表库),提供商业产品常用图表库,底层基于 ZRender,创建了坐标系,图例,提示,工

名称解释

数据视图

澳门新浦京电子游戏 4

   具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局

名词 描述
chart 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等
axis 直角坐标系中的一个坐标轴,坐标轴可分为类目型、数值型或时间型
xAxis 直角坐标系中的横轴,通常并默认为类目型
yAxis 直角坐标系中的纵轴,通常并默认为数值型
grid 直角坐标系中除坐标轴外的绘图网格,用于定义直角系整体布局
legend 图例,表述数据和图形的关联
dataRange 值域选择,常用于展现地域数据时选择值域范围
dataZoom 数据区域缩放,常用于展现大量数据时选择可视范围
roamController 缩放漫游组件,搭配地图使用
toolbox 辅助工具箱,辅助功能,如添加标线,框选缩放等
tooltip 气泡提示框,常用于展现更详细的数据
timeline 时间轴,常用于展现同一系列数据在时间维度上的多份数据
series 数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据

动态类型切换

澳门新浦京电子游戏 5

   图,同时支持任意维度的堆积和多图表混合展现。

图表名称

图例开关

澳门新浦京电子游戏 6

二、简单的例子介入学习

  

数据区域选择

澳门新浦京电子游戏 7

  需要导入jar

line 折线图,堆积折线图,区域图,堆积区域图。
bar 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。
scatter 散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图
k K线图,蜡烛图。常用于展现股票交易数据。
pie 饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。
radar 雷达图,填充雷达图。高维度数据展现的常用图表。
chord 和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据
force 力导布局图。常用于展现复杂关系网络聚类布局。
map 地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用,如室内地图、运动场、物件构造等。
heatmap 热力图。用于展现密度分布信息,支持与地图、百度地图插件联合使用。
gauge 仪表盘。用于展现关键指标数据,常见于BI类系统。
funnel 漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化,常见于BI类系统。
evnetRiver 事件河流图。常用于展示具有时间属性的多个事件,以及事件随时间的演化。
treemap 矩形式树状结构图,简称:矩形树图。用于展示树形数据结构,优势是能最大限度展示节点的尺寸特征。
venn 韦恩图。用于展示集合以及它们的交集。
tree 树图。用于展示树形数据结构各节点的层级关系
wordCloud 词云。词云是关键词的视觉化描述,用于汇总用户生成的标签或一个网站的文字内容

多图联动

澳门新浦京电子游戏 8

  学习方法:

引入方式

值域漫游

澳门新浦京电子游戏 9

  柱状图页面展示

  引入ECharts有几种方式,推荐大家使用模块化单文件引入。

炫光特效

澳门新浦京电子游戏 10

澳门新浦京电子游戏 11

<body>
    <div id="myChart" style="height:600px;"></div>//这里必须设置div的宽度,否则不会显示
    ...
    <script src="./js/echarts.js"></script>//这里放入你js文件的地址
    <script type="text/javascript">
        require.config({                 //配置require.config文件
            paths: {
                echarts: './js/dist'
            }
        });
    </script>
</body>
require.config配置好可以动态加载ECharts

<body>
    <div id="myChart" style="height:500px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                'echarts/chart/bar'     //这里还可以添加其他的图表
          ......code
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>
总结
  创建一个显示图标的容器(必须设置宽度高度)
  引入EChartsJS文件可以通过script标签引入
  配置require.config文件(加载EChartsjs文件地址)
  动态加载ECharts所需要的图标在回调函数里面使用(如果是在同一个页面已经加载了ECharts图标在使用require('echarts').init(“id”))

以上是ECharts使用方法,是根据ECharts官网介绍来写的,还有很多方法没有列出来,可以参考ECharts官网---------》http://echarts.baidu.com/echarts2/index.html

大规模散点图

澳门新浦京电子游戏 12

三、如上图所示简单的jsp页面访问(根据帮助文档查看属性)—–需要一个ehcache-1.2.3.jar

子区域地图模式

澳门新浦京电子游戏 13

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>柱状图</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="<%=path%>/js/echarts.js"></script>
</head>
<body>
    <!--为ECharts准备一个具有大小的Dom-->
    <div id="main" style="width: 900px;height: 600px"></div>
</body>
<script type="text/javascript">
    //基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        //标题组件
        title : {
            text : '公司的星期销量图',
            subtext : '纯属虚构',
            left : 'left',
            textStyle : {
                fontSize : 20
            },
        },
        //图例
        legend : {
            data : [ '销量' ]
        },
        //颜色
        color : [ 'red' ],
        //提示框组件
        tooltip : {
            trigger : 'axis',
            axisPointer : { // 坐标轴指示器,坐标轴触发有效
                type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'|'cross'
            }
        },
        //工具栏
        toolbox : {
            show : true,//是否显示
            feature : {
                //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。
                dataView : {
                    show : true,
                    readOnly : false
                },
                //动态类型切换
                magicType : {
                    show : true,
                    type : [ 'pie', 'bar' ]
                },
                dataZoom:
                {
                 show:true
                },
                //配置项还原
                restore : {
                    show : true
                },
                //保存为图片
                saveAsImage : {
                    show : true
                }
            }
        },
        //x轴
        xAxis : [ {
            position : 'bottom',//x 轴的位置。可选:'top','bottom'
            type : 'category',
            data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
            axisTick : {
                alignWithLabel : true
            }
        } ],
        //y轴
        yAxis : [ {
            type : 'value'
        } ],
        //系列列表
        series : [ {
            name : '销量',
            type : 'bar',
            barWidth : '60%',
            data : [ 10, 52, 200, 334, 390, 330, 220 ],
            //图表标注
            markPoint : {
                data : [ {
                    type : 'max',
                    name : '最大值'
                }, {
                    type : 'min',
                    name : '最小值'
                } ]
            },
            //图表标线
            markLine : {
                data : [ {
                    type : 'average',
                    name : '平均值'
                } ]
            }
        }, {
            name : '产量',
            type : 'line',
            data : [ 50, 55, 200, 340, 390, 400, 220 ]
        } ],

    };
    //使用个刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</html>

GeoJson地图扩展

澳门新浦京电子游戏 14

 

 剩下的可以在帮助文档的视图展示找自己需要的代码

标线辅助

澳门新浦京电子游戏 15

澳门新浦京电子游戏 16

多维度堆积

澳门新浦京电子游戏 17

 

百搭时间轴

澳门新浦京电子游戏 18

个性化定制

澳门新浦京电子游戏 19 澳门新浦京电子游戏 20

发表评论

电子邮件地址不会被公开。 必填项已用*标注