Echarts 示例代码

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

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

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

    <%@ 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>  
        <meta charset="utf-8">  
        <title>Echarts</title>  
        
      <script type="text/javascript" src="js/esl.js"></script>  
        
      <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>  
      </head>  
      <body>  
        <div id="main" style="height:500px"></div>  
          
         <div>  
             <span id='wrong-message' style="color:red"></span>  
             <span id='hover-console' style="color:#1e90ff"></span>  
             <span id='console' style="color:#1e90ff">Event Console</span>  
         </div>  
            
          <!--echarts 包 -->  
        <script type="text/javascript" src="js/echarts.js"></script>  
      
        <script type="text/javascript">  
              
            //路径配置  
            require.config({  
                paths:{  
                    //zrender:'./zrender/src',  
                     echarts: './js',  
                     //"jquery":"./js/jquery-2.1.0.min"  
                    }  
            });  
              
            var data_array=[12,47,39,45,30,20];  
            var str_array=["江西","福建","北京","黑龙江","海南","安徽"];  
              
              
            //设置主要样式  
            require(  
                [  
                    'echarts',  
                    'echarts/chart/bar',  
                    'echarts/chart/line',  
                    //'jquery'  
                ],  
                function(ec){   
                     //初始化echart对象  
                       var myChart = ec.init(document.getElementById('main'));//ec.init( $("#main")));//   
                      
                    var option={  
                      
                    //标题  
                    title:{  
                        show:true,  
                        //主标题  
                        text:"省份基地数量 ",  
                        link:"http://www.baidu.com",  
                        target:"blank",  
                        textStyle:{  
                            color:"#9932CC"  
                        },   
                        //副标题  
                        subtext:"**机密**",  
                         sublink:'www.google.com',  
                        subtarget:'self',  
                        subtextStyle:{  
                            color:"#8F8F8F",  
                            fontSize:16,  
                            align:'center'  
                        },  
                        //位置  
                        x:'left',  
                        y:'top',  
                        textAlign:'left',  
                        //颜色  
                        backgroundColor:"#FFD39B",  
                        padding:2,  
                        //主副标题纵向间隔  
                        itemGap:3,  
                        borderWidth:1  
                    },  
                      
                    //提示栏  
                    tooltip:{  
                        show:true,  
                        //zlevel:1,  
                        //  z:3,  
                        //触发类型  
                        trigger:'axis',//默认为'item'  
                        //延时  
                        //showDelay:1000,                     
                        enterable:true,                   
                        //颜色  
                        backgroundColor:"#AB82FF",  
                          
                        testStyle:{  
                          color: 'yellow',  
                            decoration: 'none',  
                            fontFamily: 'Verdana, sans-serif',  
                            fontSize: 15,  
                            fontStyle: 'italic',  
                            fontWeight: 'bold'  
                        },  
                        //坐标轴指示器  
                        axisPointer:{  
                             type: 'line',  
                                lineStyle: {  
                                    color: '#48b',  
                                    width: 2,  
                                    type: 'solid'  
                                },  
                                crossStyle: {  
                                    color: '#1e90ff',  
                                    width: 1,  
                                    type: 'dashed'  
                                },  
                                shadowStyle: {  
                                    color: 'rgba(150,150,150,0.3)',  
                                    width: 'auto',  
                                    type: 'default'  
                                }  
                            },  
                          
                          
                        //内容格式化    
                        formatter:function(params,ticket,callback)  
                        {                     
                        //处理提示框显示的信息  
                            console.log(params);  
                                var res=params[0].name+'<br/>';  
                                for(var i=0;i<params.length;i++)  
                                {  
                                    res+=params[i].seriesName+':'+params[i].value;  
                                      
                                }  
                            //模拟异步回调  
                            setTimeout(function()  
                            {  
                                callback(ticket,res);  
                                  
                            },500)  
                            return "loading";  
                        }  
                          
                    //formatter: "{b}<br/>{a}:{c}"  
                    },  
                      
                    //工具箱  
                    toolbox:{  
                        show:true,  
                        orient:'vertical',  
                        x:'right',  
                        y:'top',  
                        itemSize:20,  
                          
                        //特征  
                        feature:{  
                                 mark : {  
                                        show : true,  
                                        title : {  
                                            mark : '辅助线开关',  
                                            markUndo : '删除辅助线',  
                                            markClear : '清空辅助线'  
                                        },  
                                        lineStyle : {  
                                            width : 2,  
                                            color : '#1e90ff',  
                                            type : 'dashed'  
                                        }  
                                    },  
                                    dataZoom : {  
                                        show : true,  
                                        title : {  
                                            dataZoom : '区域缩放',  
                                            dataZoomReset : '区域缩放后退'  
                                        }  
                                    },  
                                    dataView : {  
                                        show : true,  
                                        title : '数据视图',  
                                        readOnly: false,  
                                        lang: ['数据视图', '关闭', '刷新']  
                                    },  
                                    magicType: {  
                                        show : true,  
                                        title : {  
                                            line : '折线图切换',  
                                            bar : '柱形图切换',  
                                            stack : '堆积',  
                                            tiled : '平铺',  
                                            force: '力导向布局图切换',  
                                            chord: '和弦图切换',  
                                            pie: '饼图切换',  
                                            funnel: '漏斗图切换'  
                                        },  
                                        //为各个切换试图单独设置option  
                                      /*   option: { 
                                            // line: {...}, 
                                            // bar: {...}, 
                                            // stack: {...}, 
                                            // tiled: {...}, 
                                            // force: {...}, 
                                            // chord: {...}, 
                                            // pie: {...}, 
                                            // funnel: {...} 
                                        },*/  
                                        type : ['line', 'bar' ,'stack', 'tiled']   
                                    },  
                                    restore : {  
                                        show : true,  
                                        title : '还原'  
                                    },  
                                    saveAsImage : {  
                                        show : true,  
                                        title : '保存为图片',  
                                        type : 'png',  
                                        lang : ['点击保存']  
                                    }  
                                }                                 
                                  
                          
                                 /*    feature : { 
                                        mark : {show: true}, 
                                        dataView : {show: true, readOnly: false}, 
                                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, 
                                        restore : {show: true}, 
                                        saveAsImage : {show: true} 
                                    }       */           
                    },  
                      
                //图例          
                      legend: {  
                            data:str_array,//['销量']  
                            //selectMode:'multiple',  
                            //selected:{  
                            //  '江西':false  
                           // }  
                        },  
                    xAxis:[  
                        {                     
                            type:'category',                      
                            data:str_array  
                        }  
                    ],  
                    yAxis:[  
                        {  
                            type:'value'  
                        }  
                    ],  
                    /*  timeline:{  //时间轴 
                         data:[ 
                                '2002-01-01','2003-01-01','2004-01-01', 
                                '2005-01-01','2006-01-01','2007-01-01', 
                            ], 
                            checkpointStyle:{ 
                                        symbol : 'auto', 
                                        symbolSize : 'auto', 
                                        color : 'auto', 
                                        borderColor : 'auto', 
                                        borderWidth : 'auto', 
                                        label: { 
                                            show: false, 
                                            textStyle: { 
                                                color: 'red' 
                                            } 
                                        } 
                                    }               
                             
                             label : { 
                                formatter : function(s) { 
                                    return s.slice(0, 4); 
                                } 
                            }, 
                            autoPlay : true,  
                            playInterval : 1000 
                     
                    }, */  
                       
                    //数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据  
                     series:[  
                            {  
                                name:"数量",  
                                type:"bar",  
                                data:data_array,  
                                itemStyle: {normal: {areaStyle: {type: 'default'}}}  
                                  
                            },  
                            {  
                            name:"数量",  
                            type:"line",  
                            data:data_array  
                              
                            }  
                              
                        ]  
      
                    };//end of option  
                  
                    myChart.setOption(option);      
                      
                      
                      
                      
                    //事件命名统一挂载到require('echarts/config').EVENT  
                    var ecConfig = require('echarts/config');  
                    //绑定事件  
                    myChart.on(ecConfig.EVENT.CLICK, eConsole1);   
                      
                    //事件响应函数处理  
                        function eConsole1(param) {  
                            var mes = '【' + param.type + '】';  
                            if (typeof param.seriesIndex != 'undefined') {  
                                mes += '  seriesIndex : ' + param.seriesIndex;  
                                mes += '  dataIndex : ' + param.dataIndex;  
                            }  
                            if (param.type == 'hover') {  
                                document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;  
                                alert(mes);  
                            }  
                            else {  
                                document.getElementById('console').innerHTML = mes;  
                                alert(mes);  
                            }  
                            console.log(param);  
                        };  
                                              
                }//end of function  
       
        );//end of require  
                      
                      
        </script>     
      </body>  
    </html>