Echarts 示例代码
基于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>