0byt3m1n1
Path:
C:
/
wamp64
/
www
/
cpms_new
/
gentelella-1.3.0
/
vendors
/
echarts
/
test
/
[
Home
]
File: treemap-option.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Option View</title> <script src="esl.js"></script> <script src="config.js"></script> <style type="text/css"> body { margin: 0; } html, body, #option-view-chart { height: 100%; } </style> </head> <body> <div id="option-view-chart"></div> <script src="./lib/jquery.min.js"></script> <script> var echarts; var formatUtil; var chart; require([ 'echarts', 'echarts/util/format', 'echarts/component/tooltip', 'echarts/component/legend', 'echarts/chart/treemap' ], function (ec, format) { echarts = ec; formatUtil = format; chart = echarts.init($('#option-view-chart')[0]); chart.showLoading(); $.getJSON('./data/option-view.json', initEcharts); }); function convert(source, target, basePath) { for (var key in source) { var path = basePath ? (basePath + '.' + key) : key; if (key.match(/^\$/)) { } else { target.children = target.children || []; var child = { name: path }; target.children.push(child); convert(source[key], child, path); } } target.value = source.$count || 1; } function initEcharts(rawData) { chart.hideLoading(); var data = {}; convert(rawData, data, ''); chart.setOption({ title: { text: '配置项查询分布', left: 'center' }, tooltip: {}, series: [{ name: 'option', type: 'treemap', visibleMin: 300, data: data.children, leafDepth: 1, nodeClick: 'link', itemStyle: { normal: { // gapWidth: 1 // borderWidth: 1 } }, levels: [ {}, { colorSaturation: [0.2, 0.7] } ] }] }); } $(window).resize(function () { chart && chart.resize(); }) </script> </body> </html>