威尼斯手机平台登陆-官方网站登录

威尼斯手机平台登陆为您带来世界三大博彩公司最新相关资讯,威尼斯官方网站登录充分考虑到不同地域网民的不同需求,威尼斯手机平台登陆良好的用户界面,人性化的操作,实用的功能设计使其广泛受到欢迎,推动实体出版、影视、动漫、游戏等相关文化产业的发展。

您的位置:威尼斯手机平台登陆 > 威尼斯在线注册平台 > 商业级数据图表,的图表库

商业级数据图表,的图表库

发布时间:2020-02-27 14:00编辑:威尼斯在线注册平台浏览(132)

    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

    本文由威尼斯手机平台登陆发布于威尼斯在线注册平台,转载请注明出处:商业级数据图表,的图表库

    关键词: