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