plugins/report/public/echarts2/doc/example/axis.html in admin-sys-1.0.2 vs plugins/report/public/echarts2/doc/example/axis.html in admin-sys-1.1.0
- old
+ new
@@ -1,245 +1,245 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="ECharts">
- <meta name="author" content="kener.linfeng@gmail.com">
- <title>ECharts · Example</title>
-
- <link rel="shortcut icon" href="../asset/ico/favicon.png">
-
- <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
- <link href="../asset/css/bootstrap.css" rel="stylesheet">
- <link href="../asset/css/carousel.css" rel="stylesheet">
- <link href="../asset/css/echartsHome.css" rel="stylesheet">
- <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
- <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
- <![endif]-->
-
- <script src="./www/js/echarts.js"></script>
- <script src="../asset/js/codemirror.js"></script>
- <script src="../asset/js/javascript.js"></script>
-
- <link href="../asset/css/codemirror.css" rel="stylesheet">
- <link href="../asset/css/monokai.css" rel="stylesheet">
-</head>
-
-<body>
- <!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
-
- <div class="container-fluid">
- <div class="row-fluid example">
- <div id="sidebar-code" class="col-md-4">
- <div class="well sidebar-nav">
- <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
- <textarea id="code" name="code">
-option = {
- tooltip : {
- trigger: 'axis'
- },
- legend: {
- data:['蒸发量','降水量','最低气温','最高气温']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- xAxis : [
- {
- type : 'category',
- position: 'bottom',
- boundaryGap: true,
- axisLine : { // 轴线
- show: true,
- lineStyle: {
- color: 'green',
- type: 'solid',
- width: 2
- }
- },
- axisTick : { // 轴标记
- show:true,
- length: 10,
- lineStyle: {
- color: 'red',
- type: 'solid',
- width: 2
- }
- },
- axisLabel : {
- show:true,
- interval: 'auto', // {number}
- rotate: 45,
- margin: 8,
- formatter: '{value}月',
- textStyle: {
- color: 'blue',
- fontFamily: 'sans-serif',
- fontSize: 15,
- fontStyle: 'italic',
- fontWeight: 'bold'
- }
- },
- splitLine : {
- show:true,
- lineStyle: {
- color: '#483d8b',
- type: 'dashed',
- width: 1
- }
- },
- splitArea : {
- show: true,
- areaStyle:{
- color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
- }
- },
- data : [
- '1','2','3','4','5',
- {
- value:'6',
- textStyle: {
- color: 'red',
- fontSize: 30,
- fontStyle: 'normal',
- fontWeight: 'bold'
- }
- },
- '7','8','9','10','11','12'
- ]
- },
- {
- type : 'category',
- data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
- }
- ],
- yAxis : [
- {
- type : 'value',
- position: 'left',
- //min: 0,
- //max: 300,
- //splitNumber: 5,
- boundaryGap: [0,0.1],
- axisLine : { // 轴线
- show: true,
- lineStyle: {
- color: 'red',
- type: 'dashed',
- width: 2
- }
- },
- axisTick : { // 轴标记
- show:true,
- length: 10,
- lineStyle: {
- color: 'green',
- type: 'solid',
- width: 2
- }
- },
- axisLabel : {
- show:true,
- interval: 'auto', // {number}
- rotate: -45,
- margin: 18,
- formatter: '{value} ml', // Template formatter!
- textStyle: {
- color: '#1e90ff',
- fontFamily: 'verdana',
- fontSize: 10,
- fontStyle: 'normal',
- fontWeight: 'bold'
- }
- },
- splitLine : {
- show:true,
- lineStyle: {
- color: '#483d8b',
- type: 'dotted',
- width: 2
- }
- },
- splitArea : {
- show: true,
- areaStyle:{
- color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
- }
- }
- },
- {
- type : 'value',
- splitNumber: 10,
- axisLabel : {
- formatter: function (value) {
- // Function formatter
- return value + ' °C'
- }
- },
- splitLine : {
- show: false
- }
- }
- ],
- series : [
- {
- name: '蒸发量',
- 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]
- },
- {
- name: '降水量',
- 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]
- },
- {
- name:'最低气温',
- type: 'line',
- yAxisIndex: 1,
- data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
- },
- {
- name:'最高气温',
- type: 'line',
- xAxisIndex: 1,
- yAxisIndex: 1,
- data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
- }
- ]
-};
- </textarea>
- </div><!--/.well -->
- </div><!--/span-->
- <div id="graphic" class="col-md-8">
- <div id="main" class="main"></div>
- <div>
- <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
- <span class="text-primary">切换主题</span>
- <select id="theme-select"></select>
- <span id='wrong-message' style="color:red"></span>
- </div>
- </div><!--/span-->
- </div><!--/row-->
- </div><!--/.fluid-container-->
-
- <footer id="footer"></footer>
- <!-- Le javascript
- ================================================== -->
- <!-- Placed at the end of the document so the pages load faster -->
- <script src="../asset/js/jquery.min.js"></script>
- <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
- <script src="../asset/js/bootstrap.min.js"></script>
- <script src="../asset/js/echartsExample.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="ECharts">
+ <meta name="author" content="kener.linfeng@gmail.com">
+ <title>ECharts · Example</title>
+
+ <link rel="shortcut icon" href="../asset/ico/favicon.png">
+
+ <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
+ <link href="../asset/css/bootstrap.css" rel="stylesheet">
+ <link href="../asset/css/carousel.css" rel="stylesheet">
+ <link href="../asset/css/echartsHome.css" rel="stylesheet">
+ <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+ <![endif]-->
+
+ <script src="./www/js/echarts.js"></script>
+ <script src="../asset/js/codemirror.js"></script>
+ <script src="../asset/js/javascript.js"></script>
+
+ <link href="../asset/css/codemirror.css" rel="stylesheet">
+ <link href="../asset/css/monokai.css" rel="stylesheet">
+</head>
+
+<body>
+ <!-- Fixed navbar -->
+ <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
+
+ <div class="container-fluid">
+ <div class="row-fluid example">
+ <div id="sidebar-code" class="col-md-4">
+ <div class="well sidebar-nav">
+ <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
+ <textarea id="code" name="code">
+option = {
+ tooltip : {
+ trigger: 'axis'
+ },
+ legend: {
+ data:['蒸发量','降水量','最低气温','最高气温']
+ },
+ toolbox: {
+ show : true,
+ feature : {
+ mark : {show: true},
+ dataView : {show: true},
+ magicType : {show: true, type: ['line', 'bar']},
+ restore : {show: true},
+ saveAsImage : {show: true}
+ }
+ },
+ xAxis : [
+ {
+ type : 'category',
+ position: 'bottom',
+ boundaryGap: true,
+ axisLine : { // 轴线
+ show: true,
+ lineStyle: {
+ color: 'green',
+ type: 'solid',
+ width: 2
+ }
+ },
+ axisTick : { // 轴标记
+ show:true,
+ length: 10,
+ lineStyle: {
+ color: 'red',
+ type: 'solid',
+ width: 2
+ }
+ },
+ axisLabel : {
+ show:true,
+ interval: 'auto', // {number}
+ rotate: 45,
+ margin: 8,
+ formatter: '{value}月',
+ textStyle: {
+ color: 'blue',
+ fontFamily: 'sans-serif',
+ fontSize: 15,
+ fontStyle: 'italic',
+ fontWeight: 'bold'
+ }
+ },
+ splitLine : {
+ show:true,
+ lineStyle: {
+ color: '#483d8b',
+ type: 'dashed',
+ width: 1
+ }
+ },
+ splitArea : {
+ show: true,
+ areaStyle:{
+ color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
+ }
+ },
+ data : [
+ '1','2','3','4','5',
+ {
+ value:'6',
+ textStyle: {
+ color: 'red',
+ fontSize: 30,
+ fontStyle: 'normal',
+ fontWeight: 'bold'
+ }
+ },
+ '7','8','9','10','11','12'
+ ]
+ },
+ {
+ type : 'category',
+ data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value',
+ position: 'left',
+ //min: 0,
+ //max: 300,
+ //splitNumber: 5,
+ boundaryGap: [0,0.1],
+ axisLine : { // 轴线
+ show: true,
+ lineStyle: {
+ color: 'red',
+ type: 'dashed',
+ width: 2
+ }
+ },
+ axisTick : { // 轴标记
+ show:true,
+ length: 10,
+ lineStyle: {
+ color: 'green',
+ type: 'solid',
+ width: 2
+ }
+ },
+ axisLabel : {
+ show:true,
+ interval: 'auto', // {number}
+ rotate: -45,
+ margin: 18,
+ formatter: '{value} ml', // Template formatter!
+ textStyle: {
+ color: '#1e90ff',
+ fontFamily: 'verdana',
+ fontSize: 10,
+ fontStyle: 'normal',
+ fontWeight: 'bold'
+ }
+ },
+ splitLine : {
+ show:true,
+ lineStyle: {
+ color: '#483d8b',
+ type: 'dotted',
+ width: 2
+ }
+ },
+ splitArea : {
+ show: true,
+ areaStyle:{
+ color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
+ }
+ }
+ },
+ {
+ type : 'value',
+ splitNumber: 10,
+ axisLabel : {
+ formatter: function (value) {
+ // Function formatter
+ return value + ' °C'
+ }
+ },
+ splitLine : {
+ show: false
+ }
+ }
+ ],
+ series : [
+ {
+ name: '蒸发量',
+ 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]
+ },
+ {
+ name: '降水量',
+ 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]
+ },
+ {
+ name:'最低气温',
+ type: 'line',
+ yAxisIndex: 1,
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+ },
+ {
+ name:'最高气温',
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
+ }
+ ]
+};
+ </textarea>
+ </div><!--/.well -->
+ </div><!--/span-->
+ <div id="graphic" class="col-md-8">
+ <div id="main" class="main"></div>
+ <div>
+ <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
+ <span class="text-primary">切换主题</span>
+ <select id="theme-select"></select>
+ <span id='wrong-message' style="color:red"></span>
+ </div>
+ </div><!--/span-->
+ </div><!--/row-->
+ </div><!--/.fluid-container-->
+
+ <footer id="footer"></footer>
+ <!-- Le javascript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="../asset/js/jquery.min.js"></script>
+ <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
+ <script src="../asset/js/bootstrap.min.js"></script>
+ <script src="../asset/js/echartsExample.js"></script>
+</body>
</html>
\ No newline at end of file