首页 > 代码库 > ECharts（Enterprise Charts 商业产品图表库）初识

ECharts（Enterprise Charts 商业产品图表库）初识

2024-08-25 13:43:42   222人阅读

一、简介

　　　　大数据时代，重新定义图表的时候到了，所以随之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>

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

技术分享

 

ECharts（Enterprise Charts 商业产品图表库）初识


联系
我们