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

Updated ECharts

Browse Source
pull/12/merge
Aigars Silkalns 9 years ago
parent 4350630ac3
commit 85d367789b
4 changed files with 149 additions and 156 deletions
Show Stats Download Patch File Download Diff File

148
production/echarts.html
Unescape View File

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

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

File diff suppressed because one or more lines are too long

90
production/js/echart/green.js
Unescape View File

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

7
production/morisjs.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save