dev-chiefworks
1357 lines
47 KiB
JavaScript
1357 lines
47 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
||
*
|
||
* # Echarts - Column and Waterfall charts
|
||
*
|
||
* Demo JS code for echarts_columns_waterfalls.html page
|
||
*
|
||
* ---------------------------------------------------------------------------- */
|
||
|
||
|
||
// Setup module
|
||
// ------------------------------
|
||
|
||
var EchartsColumnsWaterfalls = function() {
|
||
|
||
|
||
//
|
||
// Setup module components
|
||
//
|
||
|
||
// Column and waterfall charts
|
||
var _columnsWaterfallsExamples = function() {
|
||
if (typeof echarts == 'undefined') {
|
||
console.warn('Warning - echarts.min.js is not loaded.');
|
||
return;
|
||
}
|
||
|
||
// Define elements
|
||
var columns_basic_element = document.getElementById('columns_basic');
|
||
var columns_stacked_element = document.getElementById('columns_stacked');
|
||
var columns_thermometer_element = document.getElementById('columns_thermometer');
|
||
var columns_clustered_element = document.getElementById('columns_clustered');
|
||
var columns_compositive_waterfall_element = document.getElementById('columns_compositive_waterfall');
|
||
var columns_change_waterfall_element = document.getElementById('columns_change_waterfall');
|
||
var columns_timeline_element = document.getElementById('columns_timeline');
|
||
|
||
|
||
//
|
||
// Charts configuration
|
||
//
|
||
|
||
// Basic columns chart
|
||
if (columns_basic_element) {
|
||
|
||
// Initialize chart
|
||
var columns_basic = echarts.init(columns_basic_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
columns_basic.setOption({
|
||
|
||
// Define colors
|
||
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 0,
|
||
right: 40,
|
||
top: 35,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: ['Evaporation', 'Precipitation'],
|
||
itemHeight: 8,
|
||
itemGap: 20,
|
||
textStyle: {
|
||
padding: [0, 5]
|
||
}
|
||
},
|
||
|
||
// Add tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: ['#eee']
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Evaporation',
|
||
type: 'bar',
|
||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
fontWeight: 500
|
||
}
|
||
}
|
||
}
|
||
},
|
||
markLine: {
|
||
data: [{type: 'average', name: 'Average'}]
|
||
}
|
||
},
|
||
{
|
||
name: 'Precipitation',
|
||
type: 'bar',
|
||
data: [2.6, 5.9, 9.0, 26.4, 58.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
fontWeight: 500
|
||
}
|
||
}
|
||
}
|
||
},
|
||
markLine: {
|
||
data: [{type: 'average', name: 'Average'}]
|
||
}
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// Stacked columns
|
||
if (columns_stacked_element) {
|
||
|
||
// Initialize chart
|
||
var columns_stacked = echarts.init(columns_stacked_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
columns_stacked.setOption({
|
||
|
||
// Define colors
|
||
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 0,
|
||
right: 10,
|
||
top: 35,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: ['Direct', 'Email', 'Prints', 'Videos', 'Television', 'Yahoo', 'Google', 'Bing', 'Other'],
|
||
itemHeight: 8,
|
||
itemGap: 20
|
||
},
|
||
|
||
// Add tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: 'rgba(0,0,0,0.025)'
|
||
}
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#eee'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Direct',
|
||
type: 'bar',
|
||
data: [320, 332, 301, 334, 390, 330, 320]
|
||
},
|
||
{
|
||
name: 'Email',
|
||
type: 'bar',
|
||
stack: 'Advertising',
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name: 'Prints',
|
||
type: 'bar',
|
||
stack: 'Advertising',
|
||
data: [220, 182, 191, 234, 290, 330, 310]
|
||
},
|
||
{
|
||
name: 'Videos',
|
||
type: 'bar',
|
||
stack: 'Advertising',
|
||
data: [150, 232, 201, 154, 190, 330, 410]
|
||
},
|
||
{
|
||
name: 'Television',
|
||
type: 'bar',
|
||
stack: 'Advertising',
|
||
data: [862, 1018, 964, 1026, 1679, 1600, 1570]
|
||
},
|
||
{
|
||
name: 'Yahoo',
|
||
type: 'bar',
|
||
barWidth: 10,
|
||
stack: 'Television',
|
||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||
},
|
||
{
|
||
name: 'Google',
|
||
type: 'bar',
|
||
stack: 'Television',
|
||
data: [120, 132, 101, 134, 290, 230, 220]
|
||
},
|
||
{
|
||
name: 'Bing',
|
||
type: 'bar',
|
||
stack: 'Television',
|
||
data: [60, 72, 71, 74, 190, 130, 110]
|
||
},
|
||
{
|
||
name: 'Other',
|
||
type: 'bar',
|
||
stack: 'Television',
|
||
data: [62, 82, 91, 84, 109, 110, 120]
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// Thermometer
|
||
if (columns_thermometer_element) {
|
||
|
||
// Initialize chart
|
||
var columns_thermometer = echarts.init(columns_thermometer_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
var columns_thermometer_options = {
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 35,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: ['Actual', 'Forecast'],
|
||
itemHeight: 8,
|
||
itemGap: 20,
|
||
selectedMode: false
|
||
},
|
||
|
||
// Add tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: 'rgba(0,0,0,0.025)'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + '<br/>'
|
||
+ params[0].seriesName + ': ' + params[0].value + '<br/>'
|
||
+ params[1].seriesName + ': ' + (params[1].value + params[0].value);
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', 'Maersk', 'Hanjin', 'Nyk'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
boundaryGap: [0, 0.1],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#eee'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Actual',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
barCategoryGap: '50%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#FF7043',
|
||
barBorderColor: '#FF7043',
|
||
barBorderWidth: 6,
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop'
|
||
}
|
||
}
|
||
},
|
||
data: [260, 200, 220, 120, 100, 80, 130, 230, 90]
|
||
},
|
||
{
|
||
name: 'Forecast',
|
||
type: 'bar',
|
||
stack: 'sum',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#f5f5f5',
|
||
barBorderColor: '#FF7043',
|
||
barBorderWidth: 6,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function (params) {
|
||
for (var i = 0, l = columns_thermometer_options.xAxis[0].data.length; i < l; i++) {
|
||
if (columns_thermometer_options.xAxis[0].data[i] == params.name) {
|
||
return columns_thermometer_options.series[0].data[i] + params.value;
|
||
}
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#FF7043'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [40, 80, 50, 80,80, 70, 60, 90, 120]
|
||
}
|
||
]
|
||
};
|
||
|
||
// Set options
|
||
columns_thermometer.setOption(columns_thermometer_options);
|
||
}
|
||
|
||
// Stacked clustered columns
|
||
if (columns_clustered_element) {
|
||
|
||
// Initialize chart
|
||
var columns_clustered = echarts.init(columns_clustered_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
columns_clustered.setOption({
|
||
|
||
// Define colors
|
||
color: ['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80'],
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 0,
|
||
right: 5,
|
||
top: 55,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: [
|
||
'Version 1.7 - 2k data','Version 1.7 - 2w data','Version 1.7 - 20w data','',
|
||
'Version 2.0 - 2k data','Version 2.0 - 2w data','Version 2.0 - 20w data'
|
||
],
|
||
itemHeight: 2,
|
||
itemGap: 8,
|
||
textStyle: {
|
||
padding: [0, 10]
|
||
}
|
||
},
|
||
|
||
// Add tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['Line','Bar','Scatter','Pies','Map'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'category',
|
||
axisLine: {show:false},
|
||
axisTick: {show:false},
|
||
axisLabel: {show:false},
|
||
splitArea: {show:false},
|
||
splitLine: {show:false},
|
||
data: ['Line','Bar','Scatter','Pies','Map']
|
||
}
|
||
],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#333',
|
||
formatter: '{value} ms'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: ['#eee']
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Version 2.0 - 2k data',
|
||
type: 'bar',
|
||
z: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#F44336',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [247, 187, 95, 175, 270]
|
||
},
|
||
{
|
||
name: 'Version 2.0 - 2w data',
|
||
type: 'bar',
|
||
z: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#4CAF50',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [488, 415, 405, 340, 328]
|
||
},
|
||
{
|
||
name: 'Version 2.0 - 20w data',
|
||
type: 'bar',
|
||
z: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#2196F3',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top',
|
||
textStyle: {
|
||
color:'#fff',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [906, 911, 908, 778, 550]
|
||
},
|
||
{
|
||
name: 'Version 1.7 - 2k data',
|
||
type: 'bar',
|
||
z: 1,
|
||
xAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#E57373',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top'
|
||
}
|
||
}
|
||
},
|
||
data: [680, 819, 564, 724, 890]
|
||
},
|
||
{
|
||
name: 'Version 1.7 - 2w data',
|
||
type: 'bar',
|
||
z: 1,
|
||
xAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#81C784',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top'
|
||
}
|
||
}
|
||
},
|
||
data: [1212, 2035, 1620, 955, 1300]
|
||
},
|
||
{
|
||
name: 'Version 1.7 - 20w data',
|
||
type: 'bar',
|
||
z: 1,
|
||
xAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#64B5F6',
|
||
label: {
|
||
show: true,
|
||
padding: 5,
|
||
position: 'top'
|
||
}
|
||
}
|
||
},
|
||
data: [2200, 3000, 2500, 3000, 2000]
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// Multiple areas
|
||
if (columns_compositive_waterfall_element) {
|
||
|
||
// Initialize chart
|
||
var columns_compositive_waterfall = echarts.init(columns_compositive_waterfall_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
columns_compositive_waterfall.setOption({
|
||
|
||
// Define colors
|
||
color: ['#f17a52', '#03A9F4'],
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 35,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: 'rgba(0,0,0,0.025)'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
var tar = params[0];
|
||
return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value;
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['Total cost', 'Rent', 'Utilities', 'Transport', 'Meals', 'Commodity', 'Taxes', 'Travel'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#eee'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Aid',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderColor: 'rgba(0,0,0,0)',
|
||
color: 'rgba(0,0,0,0)'
|
||
},
|
||
emphasis: {
|
||
barBorderColor: 'rgba(0,0,0,0)',
|
||
color: 'rgba(0,0,0,0)'
|
||
}
|
||
},
|
||
data:[0, 3500, 3000, 2300, 1700, 900, 400, 0]
|
||
},
|
||
{
|
||
name: 'Cost of living',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 3,
|
||
color: '#42A5F5',
|
||
label: {
|
||
show: true,
|
||
position: 'inside'
|
||
}
|
||
},
|
||
emphasis: {
|
||
color: '#42A5F5',
|
||
}
|
||
},
|
||
data: [4500, 1000, 500, 700, 600, 800, 500, 400]
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// Change waterfall
|
||
if (columns_change_waterfall_element) {
|
||
|
||
// Initialize chart
|
||
var columns_change_waterfall = echarts.init(columns_change_waterfall_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Options
|
||
columns_change_waterfall.setOption({
|
||
|
||
// Define colors
|
||
color: ['#f17a52', '#03A9F4'],
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 35,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: ['Expenses', 'Income'],
|
||
itemHeight: 8,
|
||
itemGap: 20,
|
||
textStyle: {
|
||
padding: [0, 5]
|
||
}
|
||
},
|
||
|
||
// Tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: 'rgba(0,0,0,0.025)'
|
||
}
|
||
},
|
||
formatter: function (params) {
|
||
var tar;
|
||
if (params[1].value != '-') {
|
||
tar = params[1];
|
||
}
|
||
else {
|
||
tar = params[0];
|
||
}
|
||
return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value;
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['January','February','March','April','May','June','July','August','September','October','November','December'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#eee'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'Aid',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderColor: 'rgba(0,0,0,0)',
|
||
color: 'rgba(0,0,0,0)'
|
||
},
|
||
emphasis: {
|
||
barBorderColor: 'rgba(0,0,0,0)',
|
||
color: 'rgba(0,0,0,0)'
|
||
}
|
||
},
|
||
data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292, 992]
|
||
},
|
||
{
|
||
name: 'Income',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 3,
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
}
|
||
}
|
||
},
|
||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
|
||
},
|
||
{
|
||
name: 'Expenses',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 3,
|
||
label: {
|
||
show: true,
|
||
position: 'bottom'
|
||
}
|
||
}
|
||
},
|
||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203,300]
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
// Columns timeline
|
||
if (columns_timeline_element) {
|
||
|
||
// Initialize chart
|
||
var columns_timeline = echarts.init(columns_timeline_element);
|
||
|
||
|
||
//
|
||
// Chart config
|
||
//
|
||
|
||
// Demo data
|
||
var dataMap = {};
|
||
dataMap.dataGDP = ({
|
||
2014:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27],
|
||
2013:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48],
|
||
2012:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3],
|
||
2011:[11115,6719.01,16011.97,7315.4,8496.2,13668.58,6426.1,8314.37,14069.87,30981.98],
|
||
2010:[9846.81,5252.76,13607.32,6024.45,6423.18,11164.3,5284.69,7104,12494.01,26018.48]
|
||
});
|
||
dataMap.dataEstate = ({
|
||
2014:[1074.93,411.46,918.02,224.91,384.76,876.12,238.61,492.1,1019.68,2747.89],
|
||
2013:[1006.52,377.59,697.79,192,309.25,733.37,212.32,391.89,1002.5,2600.95],
|
||
2012:[1062.47,308.73,612.4,173.31,286.65,605.27,200.14,301.18,1237.56,2025.39],
|
||
2011:[844.59,227.88,513.81,166.04,273.3,500.81,182.7,244.47,939.34,1626.13],
|
||
2010:[821.5,183.44,467.97,134.12,191.01,410.43,153.03,225.81,958.06,1365.71]
|
||
});
|
||
dataMap.dataFinancial = ({
|
||
2014:[2215.41,756.5,746.01,519.32,447.46,755.57,207.65,370.78,2277.4,2600.11],
|
||
2013:[1863.61,572.99,615.42,448.3,346.44,639.27,190.12,304.59,1950.96,2105.92],
|
||
2012:[1603.63,461.2,525.67,361.64,291.1,560.2,180.83,227.54,1804.28,1596.98],
|
||
2011:[1519.19,368.1,420.74,290.91,219.09,455.07,147.24,177.43,1414.21,1298.48],
|
||
2010:[1302.77,288.17,347.65,218.73,148.3,386.34,126.03,155.48,1209.08,1054.25]
|
||
});
|
||
|
||
|
||
// Options
|
||
columns_timeline.setOption({
|
||
|
||
// Setup timeline
|
||
timeline: {
|
||
axisType: 'category',
|
||
data: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01'],
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
label: {
|
||
normal: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 11
|
||
}
|
||
},
|
||
autoPlay: true,
|
||
playInterval: 3000
|
||
},
|
||
|
||
// Config
|
||
options: [
|
||
{
|
||
|
||
// Global text styles
|
||
textStyle: {
|
||
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
|
||
fontSize: 13
|
||
},
|
||
|
||
// Chart animation duration
|
||
animationDuration: 750,
|
||
|
||
// Setup grid
|
||
grid: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 35,
|
||
bottom: 60,
|
||
containLabel: true
|
||
},
|
||
|
||
// Add legend
|
||
legend: {
|
||
data: ['GDP','Financial','Real Estate'],
|
||
itemHeight: 8,
|
||
itemGap: 20
|
||
},
|
||
|
||
// Tooltip
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
padding: [10, 15],
|
||
textStyle: {
|
||
fontSize: 13,
|
||
fontFamily: 'Roboto, sans-serif'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: 'rgba(0,0,0,0.025)'
|
||
}
|
||
}
|
||
},
|
||
|
||
// Horizontal axis
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['Paris','Budapest','Prague','Madrid','Amsterdam','Berlin','Bratislava','Munich','Hague','Rome'],
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)']
|
||
}
|
||
}
|
||
}],
|
||
|
||
// Vertical axis
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: 'GDP（million)',
|
||
max: 53500,
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eee'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: 'Other（million)',
|
||
axisLabel: {
|
||
color: '#333'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#f5f5f5'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
|
||
// Add series
|
||
series: [
|
||
{
|
||
name: 'GDP',
|
||
type: 'bar',
|
||
markLine: {
|
||
symbol: ['arrow','none'],
|
||
symbolSize: [4, 2],
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {color: 'orange'},
|
||
barBorderColor: 'orange',
|
||
label: {
|
||
position: 'left',
|
||
formatter: function(params) {
|
||
return Math.round(params.value);
|
||
},
|
||
textStyle: {color: 'orange'}
|
||
}
|
||
}
|
||
},
|
||
data: [{type: 'average', name: 'Average'}]
|
||
},
|
||
data: dataMap.dataGDP['2010']
|
||
},
|
||
{
|
||
name: 'Financial',
|
||
yAxisIndex: 1,
|
||
type: 'bar',
|
||
data: dataMap.dataFinancial['2010']
|
||
},
|
||
{
|
||
name: 'Real Estate',
|
||
yAxisIndex: 1,
|
||
type: 'bar',
|
||
data: dataMap.dataEstate['2010']
|
||
}
|
||
]
|
||
},
|
||
|
||
// 2011 data
|
||
{
|
||
series: [
|
||
{data: dataMap.dataGDP['2011']},
|
||
{data: dataMap.dataFinancial['2011']},
|
||
{data: dataMap.dataEstate['2011']}
|
||
]
|
||
},
|
||
|
||
// 2012 data
|
||
{
|
||
series: [
|
||
{data: dataMap.dataGDP['2012']},
|
||
{data: dataMap.dataFinancial['2012']},
|
||
{data: dataMap.dataEstate['2012']}
|
||
]
|
||
},
|
||
|
||
// 2013 data
|
||
{
|
||
series: [
|
||
{data: dataMap.dataGDP['2013']},
|
||
{data: dataMap.dataFinancial['2013']},
|
||
{data: dataMap.dataEstate['2013']}
|
||
]
|
||
},
|
||
|
||
// 2014 data
|
||
{
|
||
series: [
|
||
{data: dataMap.dataGDP['2014']},
|
||
{data: dataMap.dataFinancial['2014']},
|
||
{data: dataMap.dataEstate['2014']}
|
||
]
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
|
||
//
|
||
// Resize charts
|
||
//
|
||
|
||
// Resize function
|
||
var triggerChartResize = function() {
|
||
columns_basic_element && columns_basic.resize();
|
||
columns_stacked_element && columns_stacked.resize();
|
||
columns_thermometer_element && columns_thermometer.resize();
|
||
columns_clustered_element && columns_clustered.resize();
|
||
columns_compositive_waterfall_element && columns_compositive_waterfall.resize();
|
||
columns_change_waterfall_element && columns_change_waterfall.resize();
|
||
columns_timeline_element && columns_timeline.resize();
|
||
};
|
||
|
||
// On sidebar width change
|
||
$(document).on('click', '.sidebar-control', function() {
|
||
setTimeout(function () {
|
||
triggerChartResize();
|
||
}, 0);
|
||
});
|
||
|
||
// On window resize
|
||
var resizeCharts;
|
||
window.onresize = function () {
|
||
clearTimeout(resizeCharts);
|
||
resizeCharts = setTimeout(function () {
|
||
triggerChartResize();
|
||
}, 200);
|
||
};
|
||
};
|
||
|
||
|
||
//
|
||
// Return objects assigned to module
|
||
//
|
||
|
||
return {
|
||
init: function() {
|
||
_columnsWaterfallsExamples();
|
||
}
|
||
}
|
||
}();
|
||
|
||
|
||
// Initialize module
|
||
// ------------------------------
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
EchartsColumnsWaterfalls.init();
|
||
});
|