[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
surat2
/
assets
/
js
/
charts
/
echarts
/
[
Home
]
File: pies_donuts.js
/* ------------------------------------------------------------------------------ * * # Echarts - pies and donuts * * Pies and donuts 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/pie', 'echarts/chart/funnel' ], // Charts setup function (ec, limitless) { // Initialize charts // ------------------------------ var basic_pie = ec.init(document.getElementById('basic_pie'), limitless); var basic_donut = ec.init(document.getElementById('basic_donut'), limitless); var nested_pie = ec.init(document.getElementById('nested_pie'), limitless); var infographic_donut = ec.init(document.getElementById('infographic_donut'), limitless); var rose_diagram_hidden = ec.init(document.getElementById('rose_diagram_hidden'), limitless); var rose_diagram_visible = ec.init(document.getElementById('rose_diagram_visible'), limitless); var lasagna_donut = ec.init(document.getElementById('lasagna_donut'), limitless); var pie_timeline = ec.init(document.getElementById('pie_timeline'), limitless); var multiple_donuts = ec.init(document.getElementById('multiple_donuts'), limitless); // Charts setup // ------------------------------ // // Basic pie options // basic_pie_options = { // Add title title: { text: 'Browser popularity', subtext: 'Open source information', x: 'center' }, // Add tooltip tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, // Add legend legend: { orient: 'vertical', x: 'left', data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome'] }, // 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: '70%', center: ['50%', '57.5%'], data: [ {value: 335, name: 'IE'}, {value: 310, name: 'Opera'}, {value: 234, name: 'Safari'}, {value: 135, name: 'Firefox'}, {value: 1548, name: 'Chrome'} ] }] }; // // Basic donut options // basic_donut_options = { // 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'] }, // 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'} ] } ] }; // // Nested pie charts options // nested_pie_options = { // Add tooltip tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, // Add legend legend: { orient: 'vertical', x: 'left', data: ['Italy','Spain','Austria','Germany','Poland','Denmark','Hungary','Portugal','France','Netherlands'] }, // 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'] }, restore: { show: true, title: 'Restore' }, saveAsImage: { show: true, title: 'Same as image', lang: ['Save'] } } }, // Enable drag recalculate calculable: false, // Add series series: [ // Inner { name: 'Countries', type: 'pie', selectedMode: 'single', radius: [0, '40%'], // for funnel x: '15%', y: '7.5%', width: '40%', height: '85%', funnelAlign: 'right', max: 1548, itemStyle: { normal: { label: { position: 'inner' }, labelLine: { show: false } }, emphasis: { label: { show: true } } }, data: [ {value: 535, name: 'Italy'}, {value: 679, name: 'Spain'}, {value: 1548, name: 'Austria'} ] }, // Outer { name: 'Countries', type: 'pie', radius: ['60%', '85%'], // for funnel x: '55%', y: '7.5%', width: '35%', height: '85%', funnelAlign: 'left', max: 1048, data: [ {value: 535, name: 'Italy'}, {value: 310, name: 'Germany'}, {value: 234, name: 'Poland'}, {value: 135, name: 'Denmark'}, {value: 948, name: 'Hungary'}, {value: 251, name: 'Portugal'}, {value: 147, name: 'France'}, {value: 202, name: 'Netherlands'} ] } ] }; // // Infographic donut options // // Data style var dataStyle = { normal: { label: {show: false}, labelLine: {show: false} } }; // Placeholder style var placeHolderStyle = { normal: { color: 'rgba(0,0,0,0)', label: {show: false}, labelLine: {show: false} }, emphasis: { color: 'rgba(0,0,0,0)' } }; // Set options infographic_donut_options = { // Add title title: { text: 'Are you happy?', subtext: 'Utrecht, Netherlands', x: 'center', y: 'center', itemGap: 10, textStyle: { color: 'rgba(30,144,255,0.8)', fontSize: 19, fontWeight: '500' } }, // Add tooltip tooltip: { show: true, formatter: "{a} <br/>{b}: {c} ({d}%)" }, // Add legend legend: { orient: 'vertical', x: document.getElementById('infographic_donut').offsetWidth / 2, y: 30, x: '55%', itemGap: 15, data: ['60% Definitely yes','30% Could be better','10% Not at the moment'] }, // Add series series: [ { name: '1', type: 'pie', clockWise: false, radius: ['75%', '90%'], itemStyle: dataStyle, data: [ { value: 60, name: '60% Definitely yes' }, { value: 40, name: 'invisible', itemStyle: placeHolderStyle } ] }, { name: '2', type:'pie', clockWise: false, radius: ['60%', '75%'], itemStyle: dataStyle, data: [ { value: 30, name: '30% Could be better' }, { value: 70, name: 'invisible', itemStyle: placeHolderStyle } ] }, { name: '3', type: 'pie', clockWise: false, radius: ['45%', '60%'], itemStyle: dataStyle, data: [ { value: 10, name: '10% Not at the moment' }, { value: 90, name: 'invisible', itemStyle: placeHolderStyle } ] } ] }; // // Nightingale roses with hidden labels options // rose_diagram_hidden_options = { // Add title title: { text: 'Employee\'s salary review', subtext: 'Senior front end developer', x: 'center' }, // Add tooltip tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: +{c}$ ({d}%)" }, // Add legend legend: { x: 'left', y: 'top', orient: 'vertical', data: ['January','February','March','April','May','June','July','August','September','October','November','December'] }, // 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'] }, restore: { show: true, title: 'Restore' }, saveAsImage: { show: true, title: 'Same as image', lang: ['Save'] } } }, // Enable drag recalculate calculable: true, // Add series series: [ { name: 'Increase (brutto)', type: 'pie', radius: ['15%', '73%'], center: ['50%', '57%'], roseType: 'radius', // Funnel width: '40%', height: '78%', x: '30%', y: '17.5%', max: 450, itemStyle: { normal: { label: { show: false }, labelLine: { show: false } }, emphasis: { label: { show: true }, labelLine: { show: true } } }, data: [ {value: 440, name: 'January'}, {value: 260, name: 'February'}, {value: 350, name: 'March'}, {value: 250, name: 'April'}, {value: 210, name: 'May'}, {value: 350, name: 'June'}, {value: 300, name: 'July'}, {value: 430, name: 'August'}, {value: 400, name: 'September'}, {value: 450, name: 'October'}, {value: 330, name: 'November'}, {value: 200, name: 'December'} ] } ] }; // // Nightingale roses with visible labels options // rose_diagram_visible_options = { // Add title title: { text: 'Employee\'s salary review', subtext: 'Senior front end developer', x: 'center' }, // Add tooltip tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: +{c}$ ({d}%)" }, // Add legend legend: { x: 'left', y: 'top', orient: 'vertical', data: ['January','February','March','April','May','June','July','August','September','October','November','December'] }, // 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'] }, restore: { show: true, title: 'Restore' }, saveAsImage: { show: true, title: 'Same as image', lang: ['Save'] } } }, // Enable drag recalculate calculable: true, // Add series series: [ { name: 'Increase (brutto)', type: 'pie', radius: ['15%', '73%'], center: ['50%', '57%'], roseType: 'area', // Funnel width: '40%', height: '78%', x: '30%', y: '17.5%', max: 450, sort: 'ascending', data: [ {value: 440, name: 'January'}, {value: 260, name: 'February'}, {value: 350, name: 'March'}, {value: 250, name: 'April'}, {value: 210, name: 'May'}, {value: 350, name: 'June'}, {value: 300, name: 'July'}, {value: 430, name: 'August'}, {value: 400, name: 'September'}, {value: 450, name: 'October'}, {value: 330, name: 'November'}, {value: 200, name: 'December'} ] } ] }; // // Lasagna options // lasagna_donut_options = { // Add title title: { text: 'Browser statistics', subtext: 'Based on shared research', x: 'center' }, // Add tooltip tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, // Add legend legend: { x: 'left', orient: 'vertical', data: ['Chrome','Firefox','Safari','IE9+','IE8-'] }, // Enable drag recalculate calculable: false, // Add series series: (function () { var series = []; for (var i = 0; i < 30; i++) { series.push({ name: 'Browser', type: 'pie', itemStyle: { normal: { label: { show: i > 28 }, labelLine: { show: i > 28, length: 20 } } }, radius: [i * 3.6 + 40, i * 3.6 + 43], center: ['50%', '55%'], data: [ {value: i * 128 + 80, name: 'Chrome'}, {value: i * 64 + 160, name: 'Firefox'}, {value: i * 32 + 320, name: 'Safari'}, {value: i * 16 + 640, name: 'IE9+'}, {value: i * 8 + 1280, name: 'IE8-'} ] }) } return series; })() }; // // Pie timeline options // var idx = 1; pie_timeline_options = { // Add timeline timeline: { x: 10, x2: 10, data: [ '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', { name:'2014-06-01', symbol: 'emptyStar2', symbolSize: 8 }, '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', { name:'2014-12-01', symbol: 'star2', symbolSize: 8 } ], label: { formatter: function(s) { return s.slice(0, 7); } }, autoPlay: true, playInterval: 3000 }, // Set options options: [ { // Add title title: { text: 'Browser statistics', subtext: 'Based on shared research', x: 'center' }, // Add tooltip tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, // Add legend legend: { x: 'left', orient: 'vertical', data: ['Chrome','Firefox','Safari','IE9+','IE8-'] }, // 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%', width: '50%', funnelAlign: 'left', max: 1700 } } }, restore: { show: true, title: 'Restore' }, saveAsImage: { show: true, title: 'Same as image', lang: ['Save'] } } }, // Add series series: [{ name: 'Browser', type: 'pie', center: ['50%', '50%'], radius: '60%', data: [ {value: idx * 128 + 80, name: 'Chrome'}, {value: idx * 64 + 160, name: 'Firefox'}, {value: idx * 32 + 320, name: 'Safari'}, {value: idx * 16 + 640, name: 'IE9+'}, {value: idx++ * 8 + 1280, name: 'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] }, { series: [{ name: 'Browser', type: 'pie', data: [ {value: idx * 128 + 80, name:'Chrome'}, {value: idx * 64 + 160, name:'Firefox'}, {value: idx * 32 + 320, name:'Safari'}, {value: idx * 16 + 640, name:'IE9+'}, {value: idx++ * 8 + 1280, name:'IE8-'} ] }] } ] }; // // Multiple donuts options // // Top text label var labelTop = { normal: { label: { show: true, position: 'center', formatter: '{b}\n', textStyle: { baseline: 'middle', fontWeight: 300, fontSize: 15 } }, labelLine: { show: false } } }; // Format bottom label var labelFromatter = { normal: { label: { formatter: function (params) { return '\n\n' + (100 - params.value) + '%' } } } } // Bottom text label var labelBottom = { normal: { color: '#eee', label: { show: true, position: 'center', textStyle: { baseline: 'middle' } }, labelLine: { show: false } }, emphasis: { color: 'rgba(0,0,0,0)' } }; // Set inner and outer radius var radius = [60, 75]; // Add options multiple_donuts_options = { // Add title title: { text: 'The Application World', subtext: 'from global web index', x: 'center' }, // Add legend legend: { x: 'center', y: '56%', data: ['GoogleMaps', 'Facebook', 'Youtube', 'Google+', 'Weixin', 'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'] }, // Add series series: [ { type: 'pie', center: ['10%', '32.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 46, itemStyle: labelBottom}, {name: 'GoogleMaps', value: 54,itemStyle: labelTop} ] }, { type: 'pie', center: ['30%', '32.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 56, itemStyle: labelBottom}, {name: 'Facebook', value: 44,itemStyle: labelTop} ] }, { type: 'pie', center: ['50%', '32.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 65, itemStyle: labelBottom}, {name: 'Youtube', value: 35,itemStyle: labelTop} ] }, { type: 'pie', center: ['70%', '32.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 70, itemStyle: labelBottom}, {name: 'Google+', value: 30,itemStyle: labelTop} ] }, { type: 'pie', center: ['90%', '32.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name:'other', value:73, itemStyle: labelBottom}, {name:'Weixin', value:27,itemStyle: labelTop} ] }, { type: 'pie', center: ['10%', '82.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 78, itemStyle: labelBottom}, {name: 'Twitter', value: 22,itemStyle: labelTop} ] }, { type: 'pie', center: ['30%', '82.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 78, itemStyle: labelBottom}, {name: 'Skype', value: 22,itemStyle: labelTop} ] }, { type: 'pie', center: ['50%', '82.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 78, itemStyle: labelBottom}, {name: 'Messenger', value: 22,itemStyle: labelTop} ] }, { type: 'pie', center: ['70%', '82.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name: 'other', value: 83, itemStyle: labelBottom}, {name: 'Whatsapp', value: 17,itemStyle: labelTop} ] }, { type: 'pie', center: ['90%', '82.5%'], radius: radius, itemStyle: labelFromatter, data: [ {name:'other', value:89, itemStyle: labelBottom}, {name:'Instagram', value:11,itemStyle: labelTop} ] } ] }; // Apply options // ------------------------------ basic_pie.setOption(basic_pie_options); basic_donut.setOption(basic_donut_options); nested_pie.setOption(nested_pie_options); infographic_donut.setOption(infographic_donut_options); rose_diagram_hidden.setOption(rose_diagram_hidden_options); rose_diagram_visible.setOption(rose_diagram_visible_options); lasagna_donut.setOption(lasagna_donut_options); pie_timeline.setOption(pie_timeline_options); multiple_donuts.setOption(multiple_donuts_options); // Resize charts // ------------------------------ window.onresize = function () { setTimeout(function (){ basic_pie.resize(); basic_donut.resize(); nested_pie.resize(); infographic_donut.resize(); rose_diagram_hidden.resize(); rose_diagram_visible.resize(); lasagna_donut.resize(); pie_timeline.resize(); multiple_donuts.resize(); }, 200); } } ); });