|
|
@@ -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>
|
Aigars Silkalns