gentelella
Version:
Gentellela Admin is a free to use Bootstrap admin template
1,463 lines (1,384 loc) • 85.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ECharts Chart Bootstrap Examples | Gentallela Alela! by Colorlib</title>
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentellela Alela!</span></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu profile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="index.html">Dashboard</a></li>
<li><a href="index2.html">Dashboard2</a></li>
<li><a href="index3.html">Dashboard3</a></li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="form.html">General Form</a></li>
<li><a href="form_advanced.html">Advanced Components</a></li>
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="form_wizards.html">Form Wizard</a></li>
<li><a href="form_upload.html">Form Upload</a></li>
<li><a href="form_buttons.html">Form Buttons</a></li>
</ul>
</li>
<li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="general_elements.html">General Elements</a></li>
<li><a href="media_gallery.html">Media Gallery</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="glyphicons.html">Glyphicons</a></li>
<li><a href="widgets.html">Widgets</a></li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="inbox.html">Inbox</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
</li>
<li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="tables.html">Tables</a></li>
<li><a href="tables_dynamic.html">Table Dynamic</a></li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="chartjs.html">Chart JS</a></li>
<li><a href="chartjs2.html">Chart JS2</a></li>
<li><a href="morisjs.html">Moris JS</a></li>
<li><a href="echarts.html">ECharts</a></li>
<li><a href="other_charts.html">Other Charts</a></li>
</ul>
</li>
<li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
<li><a href="fixed_footer.html">Fixed Footer</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="e_commerce.html">E-commerce</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="project_detail.html">Project Detail</a></li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="profile.html">Profile</a></li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="page_403.html">403 Error</a></li>
<li><a href="page_404.html">404 Error</a></li>
<li><a href="page_500.html">500 Error</a></li>
<li><a href="plain_page.html">Plain Page</a></li>
<li><a href="login.html">Login Page</a></li>
<li><a href="pricing_tables.html">Pricing Tables</a></li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#level1_1">Level One</a>
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu"><a href="level2.html">Level Two</a>
</li>
<li><a href="#level2_1">Level Two</a>
</li>
<li><a href="#level2_2">Level Two</a>
</li>
</ul>
</li>
<li><a href="#level1_2">Level One</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Logout">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="javascript:;"> Profile</a></li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li><a href="javascript:;">Help</a></li>
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span>
</a>
</li>
<li>
<div class="text-center">
<a>
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>Echarts <small>Some examples to get you started</small></h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Bar Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="mainb" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Mini Pie</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_mini_pie" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Pie Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_pie" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Pie Area</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_pie2" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Donut Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_donut" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Scatter Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_scatter" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Line Graph</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_line" style="height:350px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Horizontal Bar</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_bar_horizontal" style="height:370px;"></div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>World Map</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_world_map" style="height:370px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Pyramid</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_pyramid" style="height:370px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Sonar</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_sonar" style="height:370px;"></div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Guage</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_guage" style="height:370px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- ECharts -->
<script src="../vendors/echarts/dist/echarts.min.js"></script>
<script src="../vendors/echarts/map/js/world.js"></script>
<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>
<script>
var theme = {
color: [
'#26B99A', '#34495E', '#BDC3C7', '#3498DB',
'#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'
],
title: {
itemGap: 8,
textStyle: {
fontWeight: 'normal',
color: '#408829'
}
},
dataRange: {
color: ['#1f610a', '#97b58d']
},
toolbox: {
color: ['#408829', '#408829', '#408829', '#408829']
},
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {
type: 'line',
lineStyle: {
color: '#408829',
type: 'dashed'
},
crossStyle: {
color: '#408829'
},
shadowStyle: {
color: 'rgba(200,200,200,0.3)'
}
}
},
dataZoom: {
dataBackgroundColor: '#eee',
fillerColor: 'rgba(64,136,41,0.2)',
handleColor: '#408829'
},
grid: {
borderWidth: 0
},
categoryAxis: {
axisLine: {
lineStyle: {
color: '#408829'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
}
},
valueAxis: {
axisLine: {
lineStyle: {
color: '#408829'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
}
},
timeline: {
lineStyle: {
color: '#408829'
},
controlStyle: {
normal: {color: '#408829'},
emphasis: {color: '#408829'}
}
},
k: {
itemStyle: {
normal: {
color: '#68a54a',
color0: '#a9cba2',
lineStyle: {
width: 1,
color: '#408829',
color0: '#86b379'
}
}
}
},
map: {
itemStyle: {
normal: {
areaStyle: {
color: '#ddd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
},
emphasis: {
areaStyle: {
color: '#99d2dd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
}
}
},
force: {
itemStyle: {
normal: {
linkStyle: {
strokeColor: '#408829'
}
}
}
},
chord: {
padding: 4,
itemStyle: {
normal: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: 1,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
},
gauge: {
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
length: 18,
lineStyle: {
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: {
color: '#333'
}
},
detail: {
textStyle: {
color: 'auto'
}
}
},
textStyle: {
fontFamily: 'Arial, Verdana, sans-serif'
}
};
var echartBar = echarts.init(document.getElementById('mainb'), theme);
echartBar.setOption({
title: {
text: 'Graph title',
subtext: 'Graph Sub-text'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['sales', 'purchases']
},
toolbox: {
show: false
},
calculable: false,
xAxis: [{
type: 'category',
data: ['1?', '2?', '3?', '4?', '5?', '6?', '7?', '8?', '9?', '10?', '11?', '12?']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'sales',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint: {
data: [{
type: 'max',
name: '???'
}, {
type: 'min',
name: '???'
}]
},
markLine: {
data: [{
type: 'average',
name: '???'
}]
}
}, {
name: 'purchases',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [{
name: 'sales',
value: 182.2,
xAxis: 7,
yAxis: 183,
}, {
name: 'purchases',
value: 2.3,
xAxis: 11,
yAxis: 3
}]
},
markLine: {
data: [{
type: 'average',
name: '???'
}]
}
}]
});
var echartRadar = echarts.init(document.getElementById('echart_sonar'), theme);
echartRadar.setOption({
title: {
text: 'Budget vs spending',
subtext: 'Subtitle'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'right',
y: 'bottom',
data: ['Allocated Budget', 'Actual Spending']
},
toolbox: {
show: true,
feature: {
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
polar: [{
indicator: [{
text: 'Sales',
max: 6000
}, {
text: 'Administration',
max: 16000
}, {
text: 'Information Techology',
max: 30000
}, {
text: 'Customer Support',
max: 38000
}, {
text: 'Development',
max: 52000
}, {
text: 'Marketing',
max: 25000
}]
}],
calculable: true,
series: [{
name: 'Budget vs spending',
type: 'radar',
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: 'Allocated Budget'
}, {
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: 'Actual Spending'
}]
}]
});
var echartFunnel = echarts.init(document.getElementById('echart_pyramid'), theme);
echartFunnel.setOption({
title: {
text: 'Echart Pyramid Graph',
subtext: 'Subtitle'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show: true,
feature: {
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
legend: {
data: ['Something #1', 'Something #2', 'Something #3', 'Something #4', 'Something #5'],
orient: 'vertical',
x: 'left',
y: 'bottom'
},
calculable: true,
series: [{
name: '漏斗图',
type: 'funnel',
width: '40%',
data: [{
value: 60,
name: 'Something #1'
}, {
value: 40,
name: 'Something #2'
}, {
value: 20,
name: 'Something #3'
}, {
value: 80,
name: 'Something #4'
}, {
value: 100,
name: 'Something #5'
}]
}]
});
var echartGauge = echarts.init(document.getElementById('echart_guage'), theme);
echartGauge.setOption({
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show: true,
feature: {
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
series: [{
name: 'Performance',
type: 'gauge',
center: ['50%', '50%'],
startAngle: 140,
endAngle: -140,
min: 0,
max: 100,
precision: 0,
splitNumber: 10,
axisLine: {
show: true,
lineStyle: {
color: [
[0.2, 'lightgreen'],
[0.4, 'orange'],
[0.8, 'skyblue'],
[1, '#ff4500']
],
width: 30
}
},
axisTick: {
show: true,
splitNumber: 5,
length: 8,
lineStyle: {
color: '#eee',
width: 1,
type: 'solid'
}
},
axisLabel: {
show: true,
formatter: function(v) {
switch (v + '') {
case '10':
return 'a';
case '30':
return 'b';
case '60':
return 'c';
case '90':
return 'd';
default:
return '';
}
},
textStyle: {
color: '#333'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: '#eee',
width: 2,
type: 'solid'
}
},
pointer: {
length: '80%',
width: 8,
color: 'auto'
},
title: {
show: true,
offsetCenter: ['-65%', -10],
textStyle: {
color: '#333',
fontSize: 15
}
},
detail: {
show: true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: ['-60%', 10],
formatter: '{value}%',
textStyle: {
color: 'auto',
fontSize: 30
}
},
data: [{
value: 50,
name: 'Performance'
}]
}]
});
var echartLine = echarts.init(document.getElementById('echart_line'), theme);
echartLine.setOption({
title: {
text: 'Line Graph',
subtext: 'Subtitle'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 220,
y: 40,
data: ['Intent', 'Pre-order', 'Deal']
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
title: {
line: 'Line',
bar: 'Bar',
stack: 'Stack',
tiled: 'Tiled'
},
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
calculable: true,
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: 'Deal',
type: 'line',
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [10, 12, 21, 54, 260, 830, 710]
}, {
name: 'Pre-order',
type: 'line',
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [30, 182, 434, 791, 390, 30, 10]
}, {
name: 'Intent',
type: 'line',
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [1320, 1132, 601, 234, 120, 90, 20]
}]
});
var echartScatter = echarts.init(document.getElementById('echart_scatter'), theme);
echartScatter.setOption({
title: {
text: 'Scatter Graph',
subtext: 'Heinz 2003'
},
tooltip: {
trigger: 'axis',
showDelay: 0,
axisPointer: {
type: 'cross',
lineStyle: {
type: 'dashed',
width: 1
}
}
},
legend: {
data: ['Data2', 'Data1']
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
xAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} cm'
}
}],
yAxis: [{
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} kg'
}
}],
series: [{
name: 'Data1',
type: 'scatter',
tooltip: {
trigger: 'item',
formatter: function(params) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>' + params.value[0] + 'cm ' + params.value[1] + 'kg ';
} else {
return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + 'kg ';
}
}
},
data: [
[161.2, 51.6],
[167.5, 59.0],
[159.5, 49.2],
[157.0, 63.0],
[155.8, 53.6],
[170.0, 59.0],
[159.1, 47.6],
[166.0, 69.8],
[176.2, 66.8],
[160.2, 75.2],
[172.5, 55.2],
[170.9, 54.2],
[172.9, 62.5],
[153.4, 42.0],
[160.0, 50.0],
[147.2, 49.8],
[168.2, 49.2],
[175.0, 73.2],
[157.0, 47.8],
[167.6, 68.8],
[159.5, 50.6],
[175.0, 82.5],
[166.8, 57.2],
[176.5, 87.8],
[170.2, 72.8],
[174.0, 54.5],
[173.0, 59.8],
[179.9, 67.3],
[170.5, 67.8],
[160.0, 47.0],
[154.4, 46.2],
[162.0, 55.0],
[176.5, 83.0],
[160.0, 54.4],
[152.0, 45.8],
[162.1, 53.6],
[170.0, 73.2],
[160.2, 52.1],
[161.3, 67.9],
[166.4, 56.6],
[168.9, 62.3],
[163.8, 58.5],
[167.6, 54.5],
[160.0, 50.2],
[161.3, 60.3],
[167.6, 58.3],
[165.1, 56.2],
[160.0, 50.2],
[170.0, 72.9],
[157.5, 59.8],
[167.6, 61.0],
[160.7, 69.1],
[163.2, 55.9],
[152.4, 46.5],
[157.5, 54.3],
[168.3, 54.8],
[180.3, 60.7],
[165.5, 60.0],
[165.0, 62.0],
[164.5, 60.3],
[156.0, 52.7],
[160.0, 74.3],
[163.0, 62.0],
[165.7, 73.1],
[161.0, 80.0],
[162.0, 54.7],
[166.0, 53.2],
[174.0, 75.7],
[172.7, 61.1],
[167.6, 55.7],
[151.1, 48.7],
[164.5, 52.3],
[163.5, 50.0],
[152.0, 59.3],
[169.0, 62.5],
[164.0, 55.7],
[161.2, 54.8],
[155.0, 45.9],
[170.0, 70.6],
[176.2, 67.2],
[170.0, 69.4],
[162.5, 58.2],
[170.3, 64.8],
[164.1, 71.6],
[169.5, 52.8],
[163.2, 59.8],
[154.5, 49.0],
[159.8, 50.0],
[173.2, 69.2],
[170.0, 55.9],
[161.4, 63.4],
[169.0, 58.2],
[166.2, 58.6],
[159.4, 45.7],
[162.5, 52.2],
[159.0, 48.6],
[162.8, 57.8],
[159.0, 55.6],
[179.8, 66.8],
[162.9, 59.4],
[161.0, 53.6],
[151.1, 73.2],
[168.2, 53.4],
[168.9, 69.0],
[173.2, 58.4],
[171.8, 56.2],
[178.0, 70.6],
[164.3, 59.8],
[163.0, 72.0],
[168.5, 65.2],
[166.8, 56.6],
[172.7, 105.2],
[163.5, 51.8],
[169.4, 63.4],
[167.8, 59.0],
[159.5, 47.6],
[167.6, 63.0],
[161.2, 55.2],
[160.0, 45.0],
[163.2, 54.0],
[162.2, 50.2],
[161.3, 60.2],
[149.5, 44.8],
[157.5, 58.8],
[163.2, 56.4],
[172.7, 62.0],
[155.0, 49.2],
[156.5, 67.2],
[164.0, 53.8],
[160.9, 54.4],
[162.8, 58.0],
[167.0, 59.8],
[160.0, 54.8],
[160.0, 43.2],
[168.9, 60.5],
[158.2, 46.4],