%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/advance/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/advance/timeline.js |
/*========================================================================================= File Name: timeline.js Description: echarts timeline chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Timeline chart // ------------------------------ $(window).on("load", function(){ // Set paths // ------------------------------ require.config({ paths: { echarts: '../../../app-assets/vendors/js/charts/echarts' } }); // Configuration // ------------------------------ require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], // Charts setup function (ec) { // Initialize chart // ------------------------------ var myChart = ec.init(document.getElementById('timeline')); // Chart Options // ------------------------------ chartOptions = { // 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 Color color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094', '#FFC400'], // 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']} ] } ] }; // Apply options // ------------------------------ myChart.setOption(chartOptions); // Resize chart // ------------------------------ $(function () { // Resize chart on menu width change and window resize $(window).on('resize', resize); $(".menu-toggle").on('click', resize); // Resize function function resize() { setTimeout(function() { // Resize chart myChart.resize(); }, 200); } }); } ); });