Backups Created:
/home/japatmex/public_html/wp-content/edit-wolf.php
Savvy
W
olf -
MANAGER
Edit File: columns_thermometer.js
/* ------------------------------------------------------------------------------ * * # Echarts - Thermometer column example * * Demo JS code for thermometer column chart [light theme] * * ---------------------------------------------------------------------------- */ // Setup module // ------------------------------ var EchartsColumnsThermometerLight = function() { // // Setup module components // // Thermometer column chart var _columnsThermometerLightExample = function() { if (typeof echarts == 'undefined') { console.warn('Warning - echarts.min.js is not loaded.'); return; } // Define element var columns_thermometer_element = document.getElementById('columns_thermometer'); // // Charts configuration // if (columns_thermometer_element) { // Initialize chart var columns_thermometer = echarts.init(columns_thermometer_element); // // Chart config // // Options var columns_thermometer_options = { // Global text styles textStyle: { fontFamily: 'Roboto, Arial, Verdana, sans-serif', fontSize: 13 }, // Chart animation duration animationDuration: 750, // Setup grid grid: { left: 10, right: 10, top: 35, bottom: 0, containLabel: true }, // Add legend legend: { data: ['Actual', 'Forecast'], itemHeight: 8, itemGap: 20, selectedMode: false }, // Add tooltip tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.75)', padding: [10, 15], textStyle: { fontSize: 13, fontFamily: 'Roboto, sans-serif' }, axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(0,0,0,0.025)' } }, formatter: function (params) { return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + '<br/>' + params[1].seriesName + ': ' + (params[1].value + params[0].value); } }, // Horizontal axis xAxis: [{ type: 'category', data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim', 'Maersk', 'Hanjin', 'Nyk'], axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { show: true, lineStyle: { color: '#eee', type: 'dashed' } } }], // Vertical axis yAxis: [{ type: 'value', boundaryGap: [0, 0.1], axisLabel: { color: '#333' }, axisLine: { lineStyle: { color: '#999' } }, splitLine: { lineStyle: { color: '#eee' } }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.015)'] } } }], // Add series series: [ { name: 'Actual', type: 'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: '#FF7043', barBorderColor: '#FF7043', barBorderWidth: 6, label: { show: true, position: 'insideTop' } } }, data: [260, 200, 220, 120, 100, 80, 130, 230, 90] }, { name: 'Forecast', type: 'bar', stack: 'sum', itemStyle: { normal: { color: '#f5f5f5', barBorderColor: '#FF7043', barBorderWidth: 6, label: { show: true, position: 'top', formatter: function (params) { for (var i = 0, l = columns_thermometer_options.xAxis[0].data.length; i < l; i++) { if (columns_thermometer_options.xAxis[0].data[i] == params.name) { return columns_thermometer_options.series[0].data[i] + params.value; } } }, textStyle: { color: '#FF7043' } } } }, data: [40, 80, 50, 80,80, 70, 60, 90, 120] } ] }; // Set options columns_thermometer.setOption(columns_thermometer_options); } // // Resize charts // // Resize function var triggerChartResize = function() { columns_thermometer_element && columns_thermometer.resize(); }; // On sidebar width change var sidebarToggle = document.querySelector('.sidebar-control'); sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize); // On window resize var resizeCharts; window.addEventListener('resize', function() { clearTimeout(resizeCharts); resizeCharts = setTimeout(function () { triggerChartResize(); }, 200); }); }; // // Return objects assigned to module // return { init: function() { _columnsThermometerLightExample(); } } }(); // Initialize module // ------------------------------ document.addEventListener('DOMContentLoaded', function() { EchartsColumnsThermometerLight.init(); });