Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f5d2d429 编写于 作者: K kener
浏览文件
操作

主题预览升级

上级 5da4c54a
隐藏空白更改
内联 并排
Showing with 71 addition and 57 deletion
doc/asset/js/echartsTheme.js
浏览文件 @ f5d2d429
var myChart = [];
var domCode = document.getElementById('sidebar-code');
var domGraphic = document.getElementById('graphic');
var domMain = $("[md='main']");
var needRefresh = false;
var theme = 'erik';
$('[name=theme-select]').on('change', function(){selectChange(this.value);});
function selectChange(value){
window.location.hash = value;
theme = value;
showLoading();
$('[name=theme-select]').val(theme);
require(['theme/' + theme], function(curTheme){
theme = curTheme;
setTimeout(refreshAll, 500);
})
}
function showLoading() {
for (var i = 0, l = domMain.length; i < l; i++) {
myChart[i].showLoading();
}
}
function refreshAll() {
for (var i = 0, l = domMain.length; i < l; i++) {
//myChart[i].setTheme(theme);
myChart[i].setTheme(theme);
}
}
......@@ -49,10 +65,17 @@ else {
});
}
var hash = window.location.hash.replace('#','') || 'default';
if ($('[name=theme-select]').val(hash).val() != hash) {
$('[name=theme-select]').val('erik');
hash = 'erik';
}
// 按需加载
require(
[
'echarts',
'theme/' + hash,
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
......@@ -68,10 +91,10 @@ require(
var echarts;
function requireCallback (ec) {
function requireCallback (ec, defaultTheme) {
echarts = ec;
for (var i = 0, l = domMain.length; i < l; i++) {
myChart[i] = echarts.init(domMain[i]);
myChart[i] = echarts.init(domMain[i], defaultTheme);
myChart[i].setOption(option[i]);
}
......@@ -89,8 +112,8 @@ function requireCallback (ec) {
var zrDom = document.createElement('div');
zrDom.style.position = 'absolute';
zrDom.style.left = '-4000px';
zrDom.style.width = domGWidth * 2 + 'px';
zrDom.style.height = (domGHeight / 2)+ 'px';
zrDom.style.width = domGWidth + 'px';
zrDom.style.height = domGHeight + 'px';
document.body.appendChild(zrDom);
var _zr = require('zrender').init(zrDom);
......@@ -112,8 +135,8 @@ function requireCallback (ec) {
_zr.addShape({
shape:'image',
style : {
x : domMain[i].offsetLeft - domGLeft + (i < 6 ? 0: domGWidth),
y : domMain[i].offsetTop - domGTop - (i < 6 ? 0: 1200),
x : domMain[i].offsetLeft - domGLeft,
y : domMain[i].offsetTop - domGTop,
image : myChart[i].getDataURL()
}
});
......@@ -172,11 +195,11 @@ function requireCallback (ec) {
}
var theme;
var option = {
0 : {
title : {
text: '折线图'
text: '折线图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'axis'
......@@ -206,10 +229,10 @@ var option = {
],
series : [
{
name:'成交',
name:'意向',
type:'line',
smooth:true,
data:[10, 12, 21, 54, 260, 830, 710]
data:[1320, 1132, 601, 234, 120, 90, 20]
},
{
name:'预购',
......@@ -218,16 +241,17 @@ var option = {
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'意向',
name:'成交',
type:'line',
smooth:true,
data:[1320, 1132, 601, 234, 120, 90, 20]
data:[10, 12, 21, 54, 260, 830, 710]
}
]
},
1 : {
title : {
text: '柱形图'
text: '柱形图',
subtext: 'ECharts'
},
legend: {
data:['直接','邮件','联盟','搜索']
......@@ -261,12 +285,12 @@ var option = {
{
name:'直接',
type:'bar',
data:[120, 132, 201, 234, 290, 230, 220]
data:[80, 132, 101, 134, 90, 180, 200]
},
{
name:'邮件',
type:'bar',
data:[80, 102, 101, 134, 90, 230, 210]
data:[120, 102, 151, 164, 230, 230, 280]
},
{
name:'联盟',
......@@ -282,7 +306,8 @@ var option = {
},
2 : {
title : {
text: '散点图'
text: '散点图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'item',
......@@ -442,7 +467,8 @@ var option = {
},
3 : {
title : {
text: 'K线图'
text: 'K线图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'axis',
......@@ -609,7 +635,8 @@ var option = {
},
4 : {
title : {
text: '地图'
text: '地图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'item'
......@@ -626,6 +653,7 @@ var option = {
dataRange: {
min: 0,
max: 100000,
realtime: false,
calculable : true
},
series : [
......@@ -817,7 +845,8 @@ var option = {
},
5 : {
title : {
text: '饼图'
text: '饼图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'item',
......@@ -861,7 +890,8 @@ var option = {
},
6 : {
title : {
text: '雷达图'
text: '雷达图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'axis'
......@@ -911,7 +941,8 @@ var option = {
},
7 : {
title : {
text: '和弦图'
text: '和弦图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'item'
......@@ -1011,7 +1042,8 @@ var option = {
return {
title : {
text: '力导向布局图'
text: '力导向布局图',
subtext: 'ECharts'
},
tooltip : {
trigger: 'item',
......@@ -1048,4 +1080,4 @@ var option = {
]
}
})()
};
\ No newline at end of file
};
doc/example/theme.html
浏览文件 @ f5d2d429
......@@ -71,7 +71,7 @@
<div class="row-fluid">
<div class='span8'>
<select style="width:100%" name="theme-select">
<option selected="true" name='default'>default</option>
<option selected="true" name='erik'>erik</option>
<option name='blue'>blue</option>
<option name='dark'>dark</option>
<option name='gray'>gray</option>
......@@ -127,7 +127,7 @@
<div class="row-fluid">
<div class='span8'>
<select style="width:100%" name="theme-select">
<option selected="true" name='default'>default</option>
<option selected="true" name='erik'>erik</option>
<option name='blue'>blue</option>
<option name='dark'>dark</option>
<option name='gray'>gray</option>
......
doc/example/theme/blue.js
浏览文件 @ f5d2d429
......@@ -5,7 +5,7 @@ var theme = {
backgroundColor: '#FFF',
// 默认色板
color: ['#1bb2d8','#1790cf',
color: ['#1790cf','#1bb2d8',
'#99d2dd','#88b0bb','#1c7099','#038cc4','#75abd0','#afd6dd'],
// 图表标题
......@@ -466,9 +466,6 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
......
doc/example/theme/dark.js
浏览文件 @ f5d2d429
......@@ -466,15 +466,12 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
// color: 各异,
borderColor: '#fff',
borderWidth: 1,
borderWidth: 0,
label: {
show: true,
position: 'outer'
......@@ -611,7 +608,7 @@ var theme = {
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle : {
width : 1,
width : 0,
color : '#fff'
},
chordStyle : {
......
doc/example/theme/erik.js
浏览文件 @ f5d2d429
......@@ -466,9 +466,6 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
......
doc/example/theme/gray.js
浏览文件 @ f5d2d429
......@@ -158,8 +158,8 @@ var theme = {
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
fillerColor: 'rgba(80,80,80,0.2)', // 填充颜色
handleColor: 'rgba(170,170,170,0.8)' // 手柄颜色
},
// 网格
......@@ -466,9 +466,6 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
......
doc/example/theme/green.js
浏览文件 @ f5d2d429
......@@ -5,7 +5,7 @@ var theme = {
backgroundColor: '#fff',
// 默认色板
color: ['#68a54a','#408829',
color: ['#408829','#68a54a',
'#a9cba2','#86b379','#397b29','#8abb6f','#759c6a','#bfd3b7'],
// 图表标题
......@@ -158,8 +158,8 @@ var theme = {
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
fillerColor: 'rgba(144,237,197,0.2)', // 填充颜色
handleColor: 'rgba(50,160,50,0.8)' // 手柄颜色
},
// 网格
......@@ -466,9 +466,6 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
......
doc/example/theme/red.js
浏览文件 @ f5d2d429
......@@ -158,8 +158,8 @@ var theme = {
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
fillerColor: 'rgba(237,140,140,0.2)', // 填充颜色
handleColor: 'rgba(190,80,80,0.8)' // 手柄颜色
},
// 网格
......@@ -466,9 +466,6 @@ var theme = {
pie: {
center : ['50%', '50%'], // 默认全局居中
radius : [0, '75%'],
clockWise : false, // 默认逆时针
startAngle: 90,
minAngle: 0, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
itemStyle: {
normal: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或