jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Updated ECharts

pull/12/merge
Aigars Silkalns 2016-02-27 23:28:21 +02:00
parent 4350630ac3
commit 85d367789b
4 changed files with 149 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
production/echarts.html
View File

@ -8,26 +8,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentallela Alela! | </title> <title>ECharts Chart Bootstrap Examples | Gentallela Alela! by Colorlib</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet"> <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet"> <link href="css/icheck/flat/green.css" rel="stylesheet">
<script src="js/jquery.min.js"></script> <script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@ -724,22 +713,15 @@
</div> </div>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<!-- chart js -->
<script src="js/chartjs/chart.min.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script> <script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.min.js"></script> <script src="js/nicescroll/jquery.nicescroll.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script> <script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script> <script src="js/custom.js"></script>
<!-- echart --> <!-- echart -->
<script src="js/echart/echarts-all.js"></script> <script src="js/echart/echarts-all.js"></script>
<script src="js/echart/green.js"></script> <script src="js/echart/green.js"></script>
<!-- pace -->
<script src="js/pace/pace.min.js"></script>
<script> <script>
var myChart9 = echarts.init(document.getElementById('mainb'), theme); var myChart9 = echarts.init(document.getElementById('mainb'), theme);
myChart9.setOption({ myChart9.setOption({
@ -842,7 +824,7 @@
orient: 'vertical', orient: 'vertical',
x: 'right', x: 'right',
y: 'bottom', y: 'bottom',
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'] data: ['（Allocated Budget）', 'Actual Spending）']
}, },
toolbox: { toolbox: {
show: true, show: true,
@ -859,27 +841,27 @@
{ {
indicator: [ indicator: [
{ {
text: '销售（sales）', text: 'sales',
max: 6000 max: 6000
}, },
{ {
text: '管理（Administration）', text: 'Administration',
max: 16000 max: 16000
}, },
{ {
text: '信息技术（Information Techology）', text: 'Information Techology',
max: 30000 max: 30000
}, },
{ {
text: '客服（Customer Support）', text: 'Customer Support',
max: 38000 max: 38000
}, },
{ {
text: '研发（Development）', text: 'Development',
max: 52000 max: 52000
}, },
{ {
text: '市场（Marketing）', text: 'Marketing',
max: 25000 max: 25000
} }
] ]
@ -888,16 +870,16 @@
calculable: true, calculable: true,
series: [ series: [
{ {
name: '预算 vs 开销（Budget vs spending）', name: 'Budget vs spending',
type: 'radar', type: 'radar',
data: [ data: [
{ {
value: [4300, 10000, 28000, 35000, 50000, 19000], value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配（Allocated Budget）' name: 'Allocated Budget'
}, },
{ {
value: [5000, 14000, 28000, 31000, 42000, 21000], value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销（Actual Spending）' name: 'Actual Spending'
} }
] ]
} }
@ -926,7 +908,7 @@
} }
}, },
legend: { legend: {
data: ['展现', '点击', '访问', '咨询', '订单'], data: ['Something #1', 'Something #2', 'Something #3', 'Something #4', 'Something #5'],
orient: 'vertical', orient: 'vertical',
x: 'left', x: 'left',
y: 'bottom' y: 'bottom'
@ -940,23 +922,23 @@
data: [ data: [
{ {
value: 60, value: 60,
name: '访问' name: 'Something #1'
}, },
{ {
value: 40, value: 40,
name: '咨询' name: 'Something #2'
}, },
{ {
value: 20, value: 20,
name: '订单' name: 'Something #3'
}, },
{ {
value: 80, value: 80,
name: '点击' name: 'Something #4'
}, },
{ {
value: 100, value: 100,
name: '展现' name: 'Something #5'
} }
] ]
} }
@ -982,57 +964,57 @@
}, },
series: [ series: [
{ {
name: '个性化仪表盘', name: 'Performance',
type: 'gauge', type: 'gauge',
center: ['50%', '50%'], // 默认全局居中 center: ['50%', '50%'],
radius: [0, '75%'], radius: [0, '75%'],
startAngle: 140, startAngle: 140,
endAngle: -140, endAngle: -140,
min: 0, // 最小值 min: 0,
max: 100, // 最大值 max: 100,
precision: 0, // 小数精度，默认为0，无小数点 precision: 0,
splitNumber: 10, // 分割段数，默认为5 splitNumber: 10,
axisLine: { // 坐标轴线 axisLine: {
show: true, // 默认显示，属性show控制显示与否 show: true,
lineStyle: { // 属性lineStyle控制线条样式 lineStyle: {
color: [[0.2, 'lightgreen'], [0.4, 'orange'], [0.8, 'skyblue'], [1, '#ff4500']], color: [[0.2, 'lightgreen'], [0.4, 'orange'], [0.8, 'skyblue'], [1, '#ff4500']],
width: 30 width: 30
} }
}, },
axisTick: { // 坐标轴小标记 axisTick: {
show: true, // 属性show控制显示与否，默认不显示 show: true,
splitNumber: 5, // 每份split细分多少段 splitNumber: 5,
length: 8, // 属性length控制线长 length: 8,
lineStyle: { // 属性lineStyle控制线条样式 lineStyle: {
color: '#eee', color: '#eee',
width: 1, width: 1,
type: 'solid' type: 'solid'
} }
}, },
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel axisLabel: {
show: true, show: true,
formatter: function (v) { formatter: function (v) {
switch (v + '') { switch (v + '') {
case '10': case '10':
return '弱'; return 'a';
case '30': case '30':
return '低'; return 'b';
case '60': case '60':
return '中'; return 'c';
case '90': case '90':
return '高'; return 'd';
default: default:
return ''; return '';
} }
}, },
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: '#333' color: '#333'
} }
}, },
splitLine: { // 分隔线 splitLine: {
show: true, // 默认显示，属性show控制显示与否 show: true,
length: 30, // 属性length控制线长 length: 30,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 lineStyle: {
color: '#eee', color: '#eee',
width: 2, width: 2,
type: 'solid' type: 'solid'
@ -1045,8 +1027,8 @@
}, },
title: { title: {
show: true, show: true,
offsetCenter: ['-65%', -10], // x, y，单位px offsetCenter: ['-65%', -10],
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: '#333', color: '#333',
fontSize: 15 fontSize: 15
} }
@ -1058,16 +1040,16 @@
borderColor: '#ccc', borderColor: '#ccc',
width: 100, width: 100,
height: 40, height: 40,
offsetCenter: ['-60%', 10], // x, y，单位px offsetCenter: ['-60%', 10],
formatter: '{value}%', formatter: '{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: 'auto', color: 'auto',
fontSize: 30 fontSize: 30
} }
}, },
data: [{ data: [{
value: 50, value: 50,
name: '仪表盘' name: 'Performance'
}] }]
} }
] ]
@ -1390,7 +1372,7 @@
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['2011', '2012'] data: ['2015', '2016']
}, },
toolbox: { toolbox: {
show: true, show: true,
@ -1415,12 +1397,12 @@
], ],
series: [ series: [
{ {
name: '2011', name: '2015',
type: 'bar', type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230] data: [18203, 23489, 29034, 104970, 131744, 630230]
}, },
{ {
name: '2012', name: '2016',
type: 'bar', type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807] data: [19325, 23438, 31000, 121594, 134141, 681807]
} }
@ -1461,9 +1443,9 @@
radius: [25, 90], radius: [25, 90],
center: ['50%', 170], center: ['50%', 170],
roseType: 'area', roseType: 'area',
x: '50%', // for funnel x: '50%',
max: 40, // for funnel max: 40,
sort: 'ascending', // for funnel sort: 'ascending',
data: [ data: [
{ {
value: 10, value: 10,
@ -1682,7 +1664,7 @@
var myChartx = echarts.init(document.getElementById('echart_mini_pie'), theme); var myChartx = echarts.init(document.getElementById('echart_mini_pie'), theme);
myChartx.setOption({ myChartx.setOption({
title: { title: {
text: '你幸福吗？', text: 'Chart #2',
subtext: 'From ExcelHome', subtext: 'From ExcelHome',
sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh', sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh',
x: 'center', x: 'center',
@ -1704,7 +1686,7 @@
x: 170, //document.getElementById('main').offsetWidth / 2, x: 170, //document.getElementById('main').offsetWidth / 2,
y: 45, y: 45,
itemGap: 12, itemGap: 12,
data: ['68%的人表示过的不错', '29%的人表示生活压力很大', '3%的人表示“我姓曾”'] data: ['68%Something #1', '29%Something #2', '3%Something #3']
}, },
toolbox: { toolbox: {
show: true, show: true,
@ -1734,7 +1716,7 @@
data: [ data: [
{ {
value: 68, value: 68,
name: '68%的人表示过的不错' name: '68%Something #1'
}, },
{ {
value: 32, value: 32,
@ -1752,7 +1734,7 @@
data: [ data: [
{ {
value: 29, value: 29,
name: '29%的人表示生活压力很大' name: '29%Something #2'
}, },
{ {
value: 71, value: 71,
@ -1770,7 +1752,7 @@
data: [ data: [
{ {
value: 3, value: 3,
name: '3%的人表示“我姓曾”' name: '3%Something #3'
}, },
{ {
value: 97, value: 97,

60
production/js/echart/echarts-all.js
View File

File diff suppressed because one or more lines are too long

88
production/js/echart/green.js
View File

@ -1,10 +1,10 @@
var theme = { var theme = {
// 默认色板
color: [ color: [
'#26B99A', '#34495E', '#BDC3C7', '#3498DB', '#26B99A', '#34495E', '#BDC3C7', '#3498DB',
'#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7' '#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'
], ],
// 图表标题
title: { title: {
itemGap: 8, itemGap: 8,
textStyle: { textStyle: {
@ -12,57 +12,57 @@ var theme = {
color: '#408829' color: '#408829'
} }
}, },
// 值域
dataRange: { dataRange: {
color: ['#1f610a', '#97b58d'] color: ['#1f610a', '#97b58d']
}, },
// 工具箱
toolbox: { toolbox: {
color: ['#408829', '#408829', '#408829', '#408829'] color: ['#408829', '#408829', '#408829', '#408829']
}, },
// 提示框
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)', backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: {// 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'line', // 默认为直线，可选为：'line' | 'shadow' type: 'line',
lineStyle: {// 直线指示器样式设置 lineStyle: {
color: '#408829', color: '#408829',
type: 'dashed' type: 'dashed'
}, },
crossStyle: { crossStyle: {
color: '#408829' color: '#408829'
}, },
shadowStyle: {// 阴影指示器样式设置 shadowStyle: {
color: 'rgba(200,200,200,0.3)' color: 'rgba(200,200,200,0.3)'
} }
} }
}, },
// 区域缩放控制器
dataZoom: { dataZoom: {
dataBackgroundColor: '#eee', // 数据背景颜色 dataBackgroundColor: '#eee',
fillerColor: 'rgba(64,136,41,0.2)', // 填充颜色 fillerColor: 'rgba(64,136,41,0.2)',
handleColor: '#408829' // 手柄颜色 handleColor: '#408829'
}, },
grid: { grid: {
borderWidth: 0 borderWidth: 0
}, },
// 类目轴
categoryAxis: { categoryAxis: {
axisLine: {// 坐标轴线 axisLine: {
lineStyle: {// 属性lineStyle控制线条样式 lineStyle: {
color: '#408829' color: '#408829'
} }
}, },
splitLine: {// 分隔线 splitLine: {
lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式 lineStyle: {
color: ['#eee'] color: ['#eee']
} }
} }
}, },
// 数值型坐标轴默认参数
valueAxis: { valueAxis: {
axisLine: {// 坐标轴线 axisLine: {
lineStyle: {// 属性lineStyle控制线条样式 lineStyle: {
color: '#408829' color: '#408829'
} }
}, },
@ -72,8 +72,8 @@ var theme = {
color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)'] color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
} }
}, },
splitLine: {// 分隔线 splitLine: {
lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式 lineStyle: {
color: ['#eee'] color: ['#eee']
} }
} }
@ -87,16 +87,16 @@ var theme = {
emphasis: {color: '#408829'} emphasis: {color: '#408829'}
} }
}, },
// K线图默认参数
k: { k: {
itemStyle: { itemStyle: {
normal: { normal: {
color: '#68a54a', // 阳线填充颜色 color: '#68a54a',
color0: '#a9cba2', // 阴线填充颜色 color0: '#a9cba2',
lineStyle: { lineStyle: {
width: 1, width: 1,
color: '#408829', // 阳线边框颜色 color: '#408829',
color0: '#86b379' // 阴线边框颜色 color0: '#86b379'
} }
} }
} }
@ -113,7 +113,7 @@ var theme = {
} }
} }
}, },
emphasis: {// 也是选中样式 emphasis: {
areaStyle: { areaStyle: {
color: '#99d2dd' color: '#99d2dd'
}, },
@ -166,28 +166,28 @@ var theme = {
gauge: { gauge: {
startAngle: 225, startAngle: 225,
endAngle: -45, endAngle: -45,
axisLine: {// 坐标轴线 axisLine: {
show: true, // 默认显示，属性show控制显示与否 show: true,
lineStyle: {// 属性lineStyle控制线条样式 lineStyle: {
color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']], color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
width: 8 width: 8
} }
}, },
axisTick: {// 坐标轴小标记 axisTick: {
splitNumber: 10, // 每份split细分多少段 splitNumber: 10,
length: 12, // 属性length控制线长 length: 12,
lineStyle: {// 属性lineStyle控制线条样式 lineStyle: {
color: 'auto' color: 'auto'
} }
}, },
axisLabel: {// 坐标轴文本标签，详见axis.axisLabel axisLabel: {
textStyle: {// 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: 'auto' color: 'auto'
} }
}, },
splitLine: {// 分隔线 splitLine: {
length: 18, // 属性length控制线长 length: 18,
lineStyle: {// 属性lineStyle（详见lineStyle）控制线条样式 lineStyle: {
color: 'auto' color: 'auto'
} }
}, },
@ -196,17 +196,17 @@ var theme = {
color: 'auto' color: 'auto'
}, },
title: { title: {
textStyle: {// 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: '#333' color: '#333'
} }
}, },
detail: { detail: {
textStyle: {// 其余属性默认使用全局文本样式，详见TEXTSTYLE textStyle: {
color: 'auto' color: 'auto'
} }
} }
}, },
textStyle: { textStyle: {
fontFamily: '微软雅黑, Arial, Verdana, sans-serif' fontFamily: 'Arial, Verdana, sans-serif'
} }
} }

5
production/morisjs.html
View File

@ -534,13 +534,14 @@
<script src="js/nicescroll/jquery.nicescroll.min.js"></script> <script src="js/nicescroll/jquery.nicescroll.min.js"></script>
<script src="js/icheck/icheck.min.js"></script> <script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script> <script src="js/custom.js"></script>
<!-- pace -->
<script src="js/pace/pace.min.js"></script>
<!-- moris js --> <!-- moris js -->
<script src="js/moris/raphael-min.js"></script> <script src="js/moris/raphael-min.js"></script>
<script src="js/moris/morris.min.js"></script> <script src="js/moris/morris.min.js"></script>
<script src="js/moris/example.js"></script> <script src="js/moris/example.js"></script>
<!-- pace -->
<script src="js/pace/pace.min.js"></script>
</body> </body>