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>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！