%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/treemap.js |
/*========================================================================================= File Name: tornado.js Description: echarts tornado chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Tornado chart // ------------------------------ $(window).on("load", function(){ // Set paths // ------------------------------ require.config({ paths: { echarts: '../../../app-assets/vendors/js/charts/echarts' } }); // Configuration // ------------------------------ require( [ 'echarts', 'echarts/chart/treemap', ], // Charts setup function (ec) { // Initialize chart // ------------------------------ var myChart = ec.init(document.getElementById('tree-map')); // Chart Options // ------------------------------ chartOptions = { // Add tooltip tooltip : { trigger: 'item', formatter: "{b}: {c}" }, // Enable drag recalculate calculable: true, // Add series series : [ { name:'Phone share', type:'treemap', itemStyle: { normal: { label: { show: true, formatter: "{b}" }, borderWidth: 1, borderColor: '#FFF' }, emphasis: { label: { show: true }, color: '#cc99cc', borderWidth: 3, borderColor: '#996699' } }, data:[ { name: 'Samsung', itemStyle: { normal: { color: '#99B898', } }, value: 6, children: [ { name: 'Galaxy S4', value: 2 }, { name: 'Galaxy S5', value: 3 }, { name: 'Galaxy S6', value: 3 }, { name: 'Galaxy Tab', value: 1 } ] }, { name: 'HTC', itemStyle: { normal: { color: '#FECEA8', } }, value: 4, children: [ { name: 'HTC M8', value: 6 }, { name: 'HTC M9', value: 6 }, { name: 'HTC M10', value: 4 } ] }, { name: 'Apple', itemStyle: { normal: { color: '#FF847C', } }, value: 4, children: [ { name: 'iPhone 5s', value: 6 }, { name: 'iPhone 6', value: 3 }, { name: 'iPhone 6+', value: 3 } ] }, { name: 'Meizu', itemStyle: { normal: { color: '#E84A5F', } }, value: 1, children: [ { name: 'MX4', itemStyle: { normal: { color: '#ccccff', } }, value: 6 }, { name: 'MX3', itemStyle: { normal: { color: '#99ccff', } }, value: 6 }, { name: 'Blue Charm note', itemStyle: { normal: { color: '#9999cc', } }, value: 4 }, { name: 'MX4 pro', itemStyle: { normal: { color: '#99cccc', } }, value: 3 } ] }, { name: 'Huawei', itemStyle: { normal: { color: '#ECE473', } }, value: 2 }, { name: 'Association', itemStyle: { normal: { color: '#F9D423', } }, value: 2 }, { name: 'ZTE', itemStyle: { normal: { color: '#F6903D', } }, value: 1, children: [ { name: 'V5', value: 16 }, { name: 'Nubian', value: 6 }, { name: 'Functional machine', value: 4 }, { name: 'Yang Qing', value: 4 }, { name: 'Star', value: 4 }, { name: "Children's Machine", value: 1 } ] } ] } ] }; // 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); } }); } ); });