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

一、简介

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

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

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

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

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

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

二、简单的例子介入学习

  需要导入jar

  学习方法:http://echarts.baidu.com/官网

  柱状图页面展示

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

<%@ 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>

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

时间: 2024-11-10 11:42:37

ECharts(Enterprise Charts 商业产品图表库)初识的相关文章

ECharts,一个javascript 互动图表库,使用例子。

一,下载echarts-plain.js 二,新建index.html,并与下载的echarts-plain.js放到同一目录. <HTML> <HEAD> <title>系统环境信息</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <META NAME="Author" CONTE

21 个最棒最有用的 JavaScript 图表库

每个企业在做重要决定时都倾向于做数据分析.实际上他们很多时候都是沉沦在数据里头,不知道如何跳出其中.随着大数据的到来,曾经好用的表格和图表只是不再削减它了. 企业一直寻求更好的方式来可视化数据,更好的互动和使图表多角度.毕竟,只有从数据中抽出的见解才是有用的. JavaScript 图表库出现了,作为漂亮的,容易理解的,交互式的可视化图表最有力的工具.它能更容易提取和传达关键的模式和见解,而静态图表往往不明显. 为了使事情更加简单,我努力挖掘了很多选项,找到了你需要的最好的 JavaScript

三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点.同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性.公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对. BizCharts 文档地址:BizCharts 一.安装 通过 npm/yarn 引入 npm install bizcharts --save yarn add bizcharts --save 二.引用 成功安装完成之

ECharts 图表库

http://echarts.baidu.com/demo.html#pie-simple ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化.

Swift 很强大的图表库-Charts使用

前言: 今天分享一个很漂亮的功能强大的图表库,希望对有需要的同学, 有帮助, 喜欢请点个赞,支持一下.谢谢~ 在项目中如何加入Swift库请看我的上一篇文章 http://www.jianshu.com/p/fd91c10c9f55 编译环境: Xcode7.3 添加Charts图表库 // 在Podfile中 use_frameworks! pod 'Charts' import Charts 创建柱状图 func createLineChartView() { chartView = Bar

最新开源JavaScript 图表库 ECharts推荐

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ECharts 提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图).柱状图(条状图).散点图(气泡图).饼图(环形图).K线图.地图.力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现. ? 特色 推荐翻阅这份在线文档 < Why

推荐三款强大的Js图表库

1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表需求. 2.Highcharts 中文网站:http://www.hcharts.cn/ Highcharts是国外的一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库.Highcharts针对个人用户及非商业用途免费,商业用途需要购买授权. 3.阿里的G2 G2(The Gram

双11不再孤单,结识ECharts---强大的常用图表库

又是一年双十一,广大单身狗们有没有很寂寞(好把,其实我也是)!但是这次的双十一,我不再孤单,因为结识了一个js的强大的图表库---ECharts. 最近做软件工程项目的时候,由于设计图中有柱状图和饼图的设计,第一反应用原生js写肯定很麻烦,于是我请求能否不做,但我们的PM铁了心要做,最终逼迫我找到了这个强大的图表库,哈哈,在这里感谢一下PM李佳玮.(当我发现它还兼容IE6-8时,真的炒鸡感动!)  ECharts提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创

JavaScript chart--15款JavaScript制图表库

译文来源:http://www.sitepoint.com/15-best-javascript-charting-libraries/ 我们无法想像一个没有图表的Dashboard会是什么样.图表可以对数据进行直观有效的展示.不仅如此,图表的巧妙应用还可以提升网站的整体视觉效果. 本文将介绍一些非常好用的制作图表的JavaScript库.这些库能够帮助你完成你未来项目中的漂亮的.可定制化的图和表. 文中介绍的库大多是免费的,当然也有一些库会提供功能更加强大的付费版. 1. D3.js —— 数