echarts
Version:
Apache ECharts is a powerful, interactive charting and data visualization library for browser
582 lines (546 loc) • 15.9 kB
JavaScript
/*
* 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'
}
}
});
});