Updated ECharts
This commit is contained in:
Aigars Silkalns
parent
4350630ac3
commit
85d367789b
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue