You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1017 lines
36 KiB
1017 lines
36 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Echarts - columns and waterfalls |
|
* |
|
* Columns and waterfalls chart configurations |
|
* |
|
* Version: 1.0 |
|
* Latest update: August 1, 2015 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
$(function () { |
|
|
|
// Set paths |
|
// ------------------------------ |
|
|
|
require.config({ |
|
paths: { |
|
echarts: 'assets/js/plugins/visualization/echarts' |
|
} |
|
}); |
|
|
|
|
|
// Configuration |
|
// ------------------------------ |
|
|
|
require( |
|
[ |
|
'echarts', |
|
'echarts/theme/limitless', |
|
'echarts/chart/bar', |
|
'echarts/chart/line' |
|
], |
|
|
|
|
|
// Charts setup |
|
function (ec, limitless) { |
|
|
|
|
|
// Initialize charts |
|
// ------------------------------ |
|
|
|
var basic_columns = ec.init(document.getElementById('basic_columns'), limitless); |
|
var stacked_columns = ec.init(document.getElementById('stacked_columns'), limitless); |
|
var stacked_clustered_columns = ec.init(document.getElementById('stacked_clustered_columns'), limitless); |
|
var thermometer_columns = ec.init(document.getElementById('thermometer_columns'), limitless); |
|
var compositive_waterfall = ec.init(document.getElementById('compositive_waterfall'), limitless); |
|
var change_waterfall = ec.init(document.getElementById('change_waterfall'), limitless); |
|
var columns_timeline = ec.init(document.getElementById('columns_timeline'), limitless); |
|
|
|
|
|
|
|
// Charts setup |
|
// ------------------------------ |
|
|
|
|
|
// |
|
// Basic columns options |
|
// |
|
|
|
basic_columns_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 40, |
|
x2: 40, |
|
y: 35, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
data: ['Evaporation', 'Precipitation'] |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal axis |
|
xAxis: [{ |
|
type: 'category', |
|
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [{ |
|
type: 'value' |
|
}], |
|
|
|
// 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, |
|
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, |
|
textStyle: { |
|
fontWeight: 500 |
|
} |
|
} |
|
} |
|
}, |
|
markLine: { |
|
data: [{type: 'average', name: 'Average'}] |
|
} |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Stacked columns options |
|
// |
|
|
|
stacked_columns_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 40, |
|
x2: 47, |
|
y: 35, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' // 'line' | 'shadow' |
|
} |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
data: ['Direct', 'Email', 'Prints', 'Videos', 'Television', 'Yahoo', 'Google', 'Bing', 'Other'] |
|
}, |
|
|
|
// Add toolbox |
|
toolbox: { |
|
show: true, |
|
orient: 'vertical', |
|
x: 'right', |
|
y: 'center', |
|
itemGap: 15, |
|
showTitle: false, |
|
feature: { |
|
mark: { |
|
show: true, |
|
title: { |
|
mark: 'Markline switch', |
|
markUndo: 'Undo markline', |
|
markClear: 'Clear markline' |
|
} |
|
}, |
|
dataZoom: { |
|
show: true, |
|
title: { |
|
dataZoom: 'Data zoom', |
|
dataZoomReset: 'Reset zoom' |
|
} |
|
}, |
|
dataView: { |
|
show: true, |
|
readOnly: false, |
|
title: 'View data', |
|
lang: ['View chart data', 'Close', 'Update'] |
|
}, |
|
magicType: { |
|
show: true, |
|
title: { |
|
line: 'Switch to line chart', |
|
bar: 'Switch to bar chart', |
|
}, |
|
type: ['line', 'bar'] |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal axis |
|
xAxis: [{ |
|
type: 'category', |
|
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [{ |
|
type: 'value' |
|
}], |
|
|
|
// 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', |
|
data: [862, 1018, 964, 1026, 1679, 1600, 1570], |
|
markLine: { |
|
itemStyle: { |
|
normal: { |
|
lineStyle: { |
|
type: 'dashed' |
|
} |
|
} |
|
}, |
|
data: [ |
|
[{type: 'min'}, {type: 'max'}] |
|
] |
|
} |
|
}, |
|
{ |
|
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 options |
|
// |
|
|
|
thermometer_columns_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 35, |
|
x2: 10, |
|
y: 35, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' // 'line' | 'shadow' |
|
}, |
|
formatter: function (params) { |
|
return params[0].name + '<br/>' |
|
+ params[0].seriesName + ': ' + params[0].value + '<br/>' |
|
+ params[1].seriesName + ': ' + (params[1].value + params[0].value); |
|
} |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
selectedMode: false, |
|
data: ['Actual', 'Forecast'] |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal axis |
|
xAxis: [{ |
|
type: 'category', |
|
data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', 'Maersk', 'Hanjin', 'Nyk'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [{ |
|
type: 'value', |
|
boundaryGap: [0, 0.1] |
|
}], |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: 'Actual', |
|
type: 'bar', |
|
stack: 'sum', |
|
barCategoryGap: '50%', |
|
itemStyle: { |
|
normal: { |
|
color: '#FF7043', |
|
barBorderColor: '#FF7043', |
|
barBorderWidth: 6, |
|
label: { |
|
show: true, |
|
position: 'insideTop' |
|
} |
|
}, |
|
emphasis: { |
|
color: '#FF7043', |
|
barBorderColor: '#FF7043', |
|
barBorderWidth: 6, |
|
label: { |
|
show: true, |
|
textStyle: { |
|
color: '#fff' |
|
} |
|
} |
|
} |
|
}, |
|
data: [260, 200, 220, 120, 100, 80, 130, 230, 90] |
|
}, |
|
{ |
|
name: 'Forecast', |
|
type: 'bar', |
|
stack: 'sum', |
|
itemStyle: { |
|
normal: { |
|
color: '#fff', |
|
barBorderColor: '#FF7043', |
|
barBorderWidth: 6, |
|
barBorderRadius: 0, |
|
label: { |
|
show: true, |
|
position: 'top', |
|
formatter: function (params) { |
|
for (var i = 0, l = thermometer_columns_options.xAxis[0].data.length; i < l; i++) { |
|
if (thermometer_columns_options.xAxis[0].data[i] == params.name) { |
|
return thermometer_columns_options.series[0].data[i] + params.value; |
|
} |
|
} |
|
}, |
|
textStyle: { |
|
color: '#FF7043' |
|
} |
|
} |
|
}, |
|
emphasis: { |
|
barBorderColor: '#FF7043', |
|
barBorderWidth: 6, |
|
label: { |
|
show: true, |
|
textStyle: { |
|
color: '#FF7043' |
|
} |
|
} |
|
} |
|
}, |
|
data:[40, 80, 50, 80,80, 70, 60, 90, 120] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Compositive waterfall options |
|
// |
|
|
|
compositive_waterfall_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 45, |
|
x2: 10, |
|
y: 10, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' |
|
}, |
|
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'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [{ |
|
type: 'value' |
|
}], |
|
|
|
// 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 options |
|
// |
|
|
|
change_waterfall_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 45, |
|
x2: 10, |
|
y: 35, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' |
|
}, |
|
formatter: function (params) { |
|
var tar; |
|
if (params[1].value != '-') { |
|
tar = params[1]; |
|
} |
|
else { |
|
tar = params[0]; |
|
} |
|
return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value; |
|
} |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
data: ['Expenses','Income'] |
|
}, |
|
|
|
// Horizontal axis |
|
xAxis: [{ |
|
type: 'category', |
|
data: ['January','February','March','April','May','June','July','August','September','October','November','December'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [{ |
|
type: 'value' |
|
}], |
|
|
|
// 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: {label: {show: true, position: 'top'}}}, |
|
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'] |
|
}, |
|
{ |
|
name: 'Expenses', |
|
type: 'bar', |
|
stack: 'Total', |
|
itemStyle: { normal: {label: {show: true, position: 'bottom'}}}, |
|
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203,300] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Timeline options |
|
// |
|
|
|
columns_timeline_options = { |
|
|
|
// Setup timeline |
|
timeline: { |
|
data: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01'], |
|
x: 10, |
|
x2: 10, |
|
label: { |
|
formatter: function(s) { |
|
return s.slice(0, 4); |
|
} |
|
}, |
|
autoPlay: true, |
|
playInterval: 3000 |
|
}, |
|
|
|
// Main options |
|
options: [ |
|
{ |
|
|
|
// Setup grid |
|
grid: { |
|
x: 55, |
|
x2: 110, |
|
y: 35, |
|
y2: 100 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
|
|
// Add legend |
|
legend: { |
|
data: ['GDP','Financial','Real Estate','Primary industry','Secondary industry','Third industry'] |
|
}, |
|
|
|
// Add toolbox |
|
toolbox: { |
|
show: true, |
|
orient: 'vertical', |
|
x: 'right', |
|
y: 70, |
|
feature: { |
|
mark: { |
|
show: true, |
|
title: { |
|
mark: 'Markline switch', |
|
markUndo: 'Undo markline', |
|
markClear: 'Clear markline' |
|
} |
|
}, |
|
dataView: { |
|
show: true, |
|
readOnly: false, |
|
title: 'View data', |
|
lang: ['View chart data', 'Close', 'Update'] |
|
}, |
|
magicType: { |
|
show: true, |
|
title: { |
|
line: 'Switch to line chart', |
|
bar: 'Switch to bar chart', |
|
stack: 'Switch to stack', |
|
tiled: 'Switch to tiled' |
|
}, |
|
type: ['line', 'bar', 'stack', 'tiled'] |
|
}, |
|
restore: { |
|
show: true, |
|
title: 'Restore' |
|
}, |
|
saveAsImage: { |
|
show: true, |
|
title: 'Same as image', |
|
lang: ['Save'] |
|
} |
|
} |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal axis |
|
xAxis: [{ |
|
type: 'category', |
|
axisLabel: { |
|
interval: 0 |
|
}, |
|
data: ['Paris','Budapest','Prague','Madrid','Amsterdam','Berlin','Bratislava','Munich','Hague','Rome','Milan'] |
|
}], |
|
|
|
// Vertical axis |
|
yAxis: [ |
|
{ |
|
type: 'value', |
|
name: 'GDP（million)', |
|
max: 53500 |
|
}, |
|
{ |
|
type: 'value', |
|
name: 'Other（million)' |
|
} |
|
], |
|
|
|
// 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'] |
|
}, |
|
{ |
|
name: 'Primary industry', |
|
yAxisIndex: 1, |
|
type: 'bar', |
|
data: dataMap.dataPI['2010'] |
|
}, |
|
{ |
|
name: 'Secondary industry', |
|
yAxisIndex: 1, |
|
type: 'bar', |
|
data: dataMap.dataSI['2010'] |
|
}, |
|
{ |
|
name: 'Third industry', |
|
yAxisIndex: 1, |
|
type: 'bar', |
|
data: dataMap.dataTI['2010'] |
|
} |
|
] |
|
}, |
|
|
|
// 2011 data |
|
{ |
|
series: [ |
|
{data: dataMap.dataGDP['2011']}, |
|
{data: dataMap.dataFinancial['2011']}, |
|
{data: dataMap.dataEstate['2011']}, |
|
{data: dataMap.dataPI['2011']}, |
|
{data: dataMap.dataSI['2011']}, |
|
{data: dataMap.dataTI['2011']} |
|
] |
|
}, |
|
|
|
// 2012 data |
|
{ |
|
series: [ |
|
{data: dataMap.dataGDP['2012']}, |
|
{data: dataMap.dataFinancial['2012']}, |
|
{data: dataMap.dataEstate['2012']}, |
|
{data: dataMap.dataPI['2012']}, |
|
{data: dataMap.dataSI['2012']}, |
|
{data: dataMap.dataTI['2012']} |
|
] |
|
}, |
|
|
|
// 2013 data |
|
{ |
|
series: [ |
|
{data: dataMap.dataGDP['2013']}, |
|
{data: dataMap.dataFinancial['2013']}, |
|
{data: dataMap.dataEstate['2013']}, |
|
{data: dataMap.dataPI['2013']}, |
|
{data: dataMap.dataSI['2013']}, |
|
{data: dataMap.dataTI['2013']} |
|
] |
|
}, |
|
|
|
// 2014 data |
|
{ |
|
series: [ |
|
{data: dataMap.dataGDP['2014']}, |
|
{data: dataMap.dataFinancial['2014']}, |
|
{data: dataMap.dataEstate['2014']}, |
|
{data: dataMap.dataPI['2014']}, |
|
{data: dataMap.dataSI['2014']}, |
|
{data: dataMap.dataTI['2014']} |
|
] |
|
} |
|
] |
|
}; |
|
|
|
|
|
// |
|
// Stacked clustered columns options |
|
// |
|
|
|
stacked_clustered_columns_options = { |
|
|
|
// Setup grid |
|
grid: { |
|
x: 65, |
|
x2: 20, |
|
y: 85, |
|
y2: 25 |
|
}, |
|
|
|
// Add tooltip |
|
tooltip: { |
|
trigger: 'axis' |
|
}, |
|
|
|
// Add legends |
|
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' |
|
] |
|
}, |
|
|
|
// Enable drag recalculate |
|
calculable: true, |
|
|
|
// Horizontal axis |
|
xAxis: [ |
|
{ |
|
type: 'category', |
|
data: ['Line','Bar','Scatter','Pies','Map'] |
|
}, |
|
{ |
|
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: {formatter:'{value} ms'}, |
|
axisLine: { |
|
lineStyle: { |
|
color: '#dc143c' |
|
} |
|
} |
|
}], |
|
|
|
// Add series |
|
series: [ |
|
{ |
|
name: 'Version 2.0 - 2k data', |
|
type: 'bar', |
|
itemStyle: { |
|
normal: { |
|
color: '#F44336', |
|
label: { |
|
show: true, |
|
textStyle: { |
|
color: '#fff' |
|
} |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [247, 187, 95, 175, 270] |
|
}, |
|
{ |
|
name: 'Version 2.0 - 2w data', |
|
type: 'bar', |
|
itemStyle: { |
|
normal: { |
|
color: '#4CAF50', |
|
label: { |
|
show: true, |
|
textStyle: { |
|
color: '#fff' |
|
} |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [488, 415, 405, 340, 328] |
|
}, |
|
{ |
|
name: 'Version 2.0 - 20w data', |
|
type: 'bar', |
|
itemStyle: { |
|
normal: { |
|
color: '#2196F3', |
|
label: { |
|
show: true, |
|
textStyle: { |
|
color:'#fff' |
|
} |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [906, 911, 908, 778, 550] |
|
}, |
|
{ |
|
name: 'Version 1.7 - 2k data', |
|
type: 'bar', |
|
xAxisIndex: 1, |
|
itemStyle: { |
|
normal: { |
|
color: '#E57373', |
|
label: { |
|
show: true, |
|
formatter: function(p) {return p.value > 0 ? (p.value +'\n'):'';} |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [680, 819, 564, 724, 890] |
|
}, |
|
{ |
|
name: 'Version 1.7 - 2w data', |
|
type: 'bar', |
|
xAxisIndex: 1, |
|
itemStyle: { |
|
normal: { |
|
color: '#81C784', |
|
label: { |
|
show: true |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: true |
|
} |
|
} |
|
}, |
|
data: [1212, 2035, 1620, 955, 1300] |
|
}, |
|
{ |
|
name: 'Version 1.7 - 20w data', |
|
type: 'bar', |
|
xAxisIndex: 1, |
|
itemStyle: { |
|
normal: { |
|
color: '#64B5F6', |
|
label: { |
|
show: true, |
|
formatter: function(p){return p.value > 0 ? (p.value +'+'):'';} |
|
} |
|
}, |
|
emphasis: { |
|
label: { |
|
show: false |
|
} |
|
} |
|
}, |
|
data: [2200, 3000, 2500, 3000, 2000] |
|
} |
|
] |
|
}; |
|
|
|
|
|
|
|
// Apply options |
|
// ------------------------------ |
|
|
|
basic_columns.setOption(basic_columns_options); |
|
stacked_columns.setOption(stacked_columns_options); |
|
stacked_clustered_columns.setOption(stacked_clustered_columns_options); |
|
thermometer_columns.setOption(thermometer_columns_options); |
|
compositive_waterfall.setOption(compositive_waterfall_options); |
|
change_waterfall.setOption(change_waterfall_options); |
|
columns_timeline.setOption(columns_timeline_options); |
|
|
|
|
|
|
|
// Resize charts |
|
// ------------------------------ |
|
|
|
window.onresize = function () { |
|
setTimeout(function () { |
|
basic_columns.resize(); |
|
stacked_columns.resize(); |
|
stacked_clustered_columns.resize(); |
|
thermometer_columns.resize(); |
|
compositive_waterfall.resize(); |
|
change_waterfall.resize(); |
|
columns_timeline.resize(); |
|
}, 200); |
|
} |
|
} |
|
); |
|
});
|
|
|