%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/echarts/pie-doughnut/doughnut.js |
/*========================================================================================= File Name: doughnut.js Description: echarts doughnut chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Doughnut chart // ------------------------------ $(window).on("load", function(){ // Set paths // ------------------------------ require.config({ paths: { echarts: '../../../app-assets/vendors/js/charts/echarts' } }); // Configuration // ------------------------------ require( [ 'echarts', 'echarts/chart/pie', 'echarts/chart/funnel' ], // Charts setup function (ec) { // Initialize chart // ------------------------------ var myChart = ec.init(document.getElementById('doughnut')); // Chart Options // ------------------------------ chartOptions = { // Add title title: { text: 'Browser popularity', subtext: 'Open source information', x: 'center' }, // Add legend legend: { orient: 'vertical', x: 'left', data: ['Internet Explorer','Opera','Safari','Firefox','Chrome'] }, // Add custom colors color: ['#00A5A8', '#626E82', '#FF7D4D','#FF4558', '#28D094'], // Display toolbox toolbox: { show: true, orient: 'vertical', 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: { pie: 'Switch to pies', funnel: 'Switch to funnel', }, type: ['pie', 'funnel'], option: { funnel: { x: '25%', y: '20%', width: '50%', height: '70%', funnelAlign: 'left', max: 1548 } } }, restore: { show: true, title: 'Restore' }, saveAsImage: { show: true, title: 'Same as image', lang: ['Save'] } } }, // Enable drag recalculate calculable: true, // Add series series: [ { name: 'Browsers', type: 'pie', radius: ['50%', '70%'], center: ['50%', '57.5%'], itemStyle: { normal: { label: { show: true }, labelLine: { show: true } }, emphasis: { label: { show: true, formatter: '{b}' + '\n\n' + '{c} ({d}%)', position: 'center', textStyle: { fontSize: '17', fontWeight: '500' } } } }, data: [ {value: 335, name: 'Internet Explorer'}, {value: 310, name: 'Opera'}, {value: 234, name: 'Safari'}, {value: 135, name: 'Firefox'}, {value: 1548, name: 'Chrome'} ] } ] }; // 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); } }); } ); });