前端初始化
This commit is contained in:
“hsc”
+581
@@ -0,0 +1,581 @@
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory);
|
||||
} else if (
|
||||
typeof exports === 'object' &&
|
||||
typeof exports.nodeName !== 'string'
|
||||
) {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts/lib/echarts'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts);
|
||||
}
|
||||
})(this, function(exports, echarts) {
|
||||
var log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
console && console.error && console.error(msg);
|
||||
}
|
||||
};
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded');
|
||||
return;
|
||||
}
|
||||
var colorPalette = [
|
||||
'#5470c6',
|
||||
'#91cc75',
|
||||
'#fac858',
|
||||
'#ee6666',
|
||||
'#73c0de',
|
||||
'#3ba272',
|
||||
'#fc8452',
|
||||
'#9a60b4',
|
||||
'#ea7ccc'
|
||||
];
|
||||
|
||||
var axisCommon = function() {
|
||||
return {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#6E7079'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: null
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['#E0E6F1']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
|
||||
}
|
||||
},
|
||||
minorSplitLine: {
|
||||
color: '#F4F7FD'
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var gradientColor = ['#f6efa6', '#d88273', '#bf444c'];
|
||||
|
||||
echarts.registerTheme('v5', {
|
||||
color: colorPalette,
|
||||
gradientColor: gradientColor,
|
||||
|
||||
loading: {
|
||||
textColor: 'red'
|
||||
},
|
||||
|
||||
// Series
|
||||
|
||||
bar: {
|
||||
defaultBarGap: '20%',
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
boxplot: {
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0,0,0,0.2)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
funnel: {
|
||||
bottom: 60,
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
label: {
|
||||
color: 'inherit'
|
||||
}
|
||||
},
|
||||
|
||||
gauge: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [[1, '#E6EBF8']]
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#63677A'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: {
|
||||
color: '#63677A'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#464646'
|
||||
},
|
||||
anchor: {
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: '#5470c6'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
color: '#464646',
|
||||
},
|
||||
detail: {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#ccc',
|
||||
color: '#464646'
|
||||
}
|
||||
},
|
||||
|
||||
graph: {
|
||||
lineStyle: {
|
||||
color: '#aaa'
|
||||
},
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
heatmap: {
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
line: {
|
||||
symbolSize: 4
|
||||
},
|
||||
|
||||
pictorialBar: {
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
pie: {
|
||||
radius: [0, '75%'],
|
||||
labelLine: {
|
||||
length2: 15
|
||||
}
|
||||
},
|
||||
|
||||
map: {
|
||||
defaultItemStyleColor: '#eee',
|
||||
label: {
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#444',
|
||||
areaColor: '#eee'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
color: 'rgb(100,0,0)'
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(255,215,0,0.8)'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
label: {
|
||||
color: 'rgb(100,0,0)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,215,0,0.8)'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
sankey: {
|
||||
lineStyle: {
|
||||
color: '#314656'
|
||||
},
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
scatter: {
|
||||
select: {
|
||||
itemStyle: {
|
||||
borderColor: '#212121'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tree: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
|
||||
treemap: {
|
||||
left: 'center',
|
||||
top: 'middle',
|
||||
width: '80%',
|
||||
height: '80%',
|
||||
scaleLimit: {
|
||||
max: null,
|
||||
min: null
|
||||
},
|
||||
breadcrumb: {
|
||||
top: 'bottom',
|
||||
bottom: null,
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0.7)', // '#5793f3',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: 'rgba(0,0,0,0.9)' // '#5793f3',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Components
|
||||
|
||||
timeAxis: axisCommon(),
|
||||
logAxis: axisCommon(),
|
||||
valueAxis: axisCommon(),
|
||||
categoryAxis: (() => {
|
||||
const axis = axisCommon();
|
||||
axis.axisTick = {
|
||||
show: true
|
||||
};
|
||||
return axis;
|
||||
})(),
|
||||
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#B9BEC9'
|
||||
},
|
||||
shadowStyle: {
|
||||
color: 'rgba(210,219,238,0.2)'
|
||||
},
|
||||
label: {
|
||||
backgroundColor: 'auto',
|
||||
color: '#fff'
|
||||
},
|
||||
handle: {
|
||||
color: '#333',
|
||||
shadowBlur: 3,
|
||||
shadowColor: '#aaa',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 2,
|
||||
}
|
||||
},
|
||||
|
||||
brush: {
|
||||
brushStyle: {
|
||||
color: 'rgba(210,219,238,0.3)',
|
||||
borderColor: '#D2DBEE'
|
||||
},
|
||||
defaultOutOfBrushColor: '#ddd'
|
||||
},
|
||||
|
||||
calendar: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#ccc'
|
||||
},
|
||||
dayLabel: {
|
||||
margin: '50%',
|
||||
color: '#000'
|
||||
},
|
||||
monthLabel: {
|
||||
margin: 5,
|
||||
color: '#000'
|
||||
},
|
||||
yearLabel: {
|
||||
margin: 30,
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
|
||||
dataZoom: {
|
||||
borderColor: '#d2dbee',
|
||||
borderRadius: 3,
|
||||
backgroundColor: 'rgba(47,69,84,0)',
|
||||
dataBackground: {
|
||||
lineStyle: {
|
||||
color: '#d2dbee',
|
||||
width: 0.5
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#d2dbee',
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
selectedDataBackground: {
|
||||
lineStyle: {
|
||||
color: '#8fb0f7',
|
||||
width: 0.5
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#8fb0f7',
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
borderColor: '#ACB8D1'
|
||||
},
|
||||
moveHandleStyle: {
|
||||
color: '#D2DBEE',
|
||||
opacity: 0.7
|
||||
},
|
||||
textStyle: {
|
||||
color: '#6E7079'
|
||||
},
|
||||
brushStyle: {
|
||||
color: 'rgba(135,175,274,0.15)'
|
||||
},
|
||||
emphasis: {
|
||||
handleStyle: {
|
||||
borderColor: '#8FB0F7'
|
||||
},
|
||||
moveHandleStyle: {
|
||||
color: '#8FB0F7',
|
||||
opacity: 0.7
|
||||
}
|
||||
},
|
||||
defaultLocationEdgeGap: 7
|
||||
},
|
||||
|
||||
geo: {
|
||||
defaultItemStyleColor: '#eee',
|
||||
label: {
|
||||
color: '#000'
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#444'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
color: 'rgb(100,0,0)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,215,0,0.8)'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
label: {
|
||||
color: 'rgb(100,0,0)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255,215,0,0.8)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '10%',
|
||||
top: 60,
|
||||
bottom: 70,
|
||||
borderColor: '#ccc'
|
||||
},
|
||||
|
||||
legend: {
|
||||
top: 0,
|
||||
bottom: null,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#ccc',
|
||||
itemGap: 10,
|
||||
inactiveColor: '#ccc',
|
||||
inactiveBorderColor: '#ccc',
|
||||
lineStyle: {
|
||||
inactiveColor: '#ccc',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
selectorLabel: {
|
||||
color: '#666',
|
||||
borderColor: '#666'
|
||||
},
|
||||
emphasis: {
|
||||
selectorLabel: {
|
||||
color: '#eee',
|
||||
backgroundColor: '#666'
|
||||
}
|
||||
},
|
||||
pageIconColor: '#2f4554',
|
||||
pageIconInactiveColor: '#aaa',
|
||||
pageTextStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
|
||||
radar: (() => {
|
||||
const radar = axisCommon();
|
||||
radar.radius = '75%';
|
||||
radar.axisName = {
|
||||
color: '#bbb'
|
||||
};
|
||||
radar.axisLine.lineStyle.color = '#bbb';
|
||||
return radar;
|
||||
})(),
|
||||
|
||||
timeline: {
|
||||
padding: 5,
|
||||
borderColor: '#ccc',
|
||||
lineStyle: {
|
||||
color: '#DAE1F5'
|
||||
},
|
||||
label: {
|
||||
color: '#A4B1D7'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#A4B1D7',
|
||||
borderWidth: 1
|
||||
},
|
||||
checkpointStyle: {
|
||||
color: '#316bf3',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
shadowBlur: 2,
|
||||
shadowOffsetX: 1,
|
||||
shadowOffsetY: 1,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
controlStyle: {
|
||||
playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
|
||||
stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
|
||||
// eslint-disable-next-line max-len
|
||||
nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
|
||||
// eslint-disable-next-line max-len
|
||||
prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
|
||||
color: '#A4B1D7',
|
||||
borderColor: '#A4B1D7',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
color: '#6f778d'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#316BF3'
|
||||
},
|
||||
controlStyle: {
|
||||
color: '#316BF3',
|
||||
borderColor: '#316BF3',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
lineStyle: {
|
||||
color: '#316BF3'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#316BF3'
|
||||
},
|
||||
label: {
|
||||
color: '#6f778d'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
title: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#ccc',
|
||||
textStyle: {
|
||||
color: '#464646'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#6E7079'
|
||||
}
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
borderColor: '#ccc',
|
||||
padding: 5,
|
||||
itemGap: 8,
|
||||
iconStyle: {
|
||||
borderColor: '#666',
|
||||
},
|
||||
emphasis: {
|
||||
iconStyle: {
|
||||
borderColor: '#3E98C5'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
},
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
defaultBorderColor: '#fff'
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
color: [gradientColor[2], gradientColor[1], gradientColor[0]],
|
||||
inactive: ['rgba(0,0,0,0)'],
|
||||
indicatorStyle: {
|
||||
shadowColor: 'rgba(0,0,0,0.2)'
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
borderColor: '#ccc',
|
||||
contentColor: '#5793f3',
|
||||
inactiveColor: '#aaa',
|
||||
padding: 5,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user