Skip to content

C
Coca

Phodal / Coca

通知 1
Star 0
Fork 0
C
Coca

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 92efab1f 编写于 作者: P Phodal Huang
浏览文件
操作

feat: add simple code city

上级 6e73f105
隐藏空白更改
内联 并排
Showing with 293 addition and 0 deletion
static/code-city.html 0 → 100644
浏览文件 @ 92efab1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Coca Code City</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.2/echarts-gl.min.js "></script>
</head>
<body>
<div id="main" style="width: 1440px;height:768px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get('visual.json', function (diskData) {
myChart.hideLoading();
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 2048;
var treemapChart = echarts.init(canvas);
function hierarchy(data, delimiter = ".") {
let root;
const map = new Map;
data.forEach(function find(data) {
const {name} = data;
if (map.has(name)) return map.get(name);
const i = name.lastIndexOf(delimiter);
map.set(name, data);
if (i >= 0) {
let found = find({name: name.substring(0, i), children: []});
if (found.children) {
found.children.push(data);
} else {
return data
}
data.name = name.substring(i + 1);
} else {
root = data;
}
return data;
});
return root;
}
var dMap = {}
for (let node of diskData.nodes) {
dMap[node.id] = {
name: "root." + node.id,
value: 1
}
}
for (let link of diskData.links) {
if (link.source === link.target) {
continue
}
if (!dMap[link.source]) {
dMap[link.source] = {
name: "root." + link.source,
value: 1
}
} else {
dMap[link.source].value++
}
}
var jdata = Object.values(dMap)
let data = hierarchy(jdata);
data.children.forEach(function (item, index, object) {
if (item.name === '') {
object.splice(index, 1);
}
});
var colorPalette = ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
var formatUtil = echarts.format;
let upperLabel = {
color: "#000",
show: true,
height: 10,
fontSize: 8
};
function getLevelOption() {
return [
{
colorAlpha: [0.5, 1],
itemStyle: {
borderColor: '#555',
borderWidth: 0,
gapWidth: 0
}
},
{
colorAlpha: [0.5, 1],
itemStyle: {
borderColor: '#555',
borderWidth: 1,
gapWidth: 1
}
},
{
upperLabel: upperLabel,
colorMappingBy: 'id',
colorSaturation: [0.2, 0.8],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 1,
borderWidth: 1
}
},
{
upperLabel: upperLabel,
colorMappingBy: 'id',
itemStyle: {
borderColorSaturation: 0.9,
gapWidth: 1
}
},
{
upperLabel: upperLabel,
colorMappingBy: 'id',
itemStyle: {
borderColorSaturation: 0.8,
gapWidth: 1
}
},
{
upperLabel: upperLabel,
borderColor: '#fff',
itemStyle: {
borderColorSaturation: 0.9,
gapWidth: 1
}
}
];
}
function colorMappingChange(value) {
var levelOption = getLevelOption(value);
chart.setOption({
series: [{
levels: levelOption
}]
});
}
treemapChart.setOption({
title: {
left: 'center'
},
tooltip: {
formatter: function (info) {
var value = info.value;
var treePathInfo = info.treePathInfo;
var treePath = [];
for (var i = 1; i < treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name);
}
return [
'<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('.')) + '</div>',
'Call ' + formatUtil.addCommas(value) + ' ',
].join('');
}
},
series: [
{
name: "coca",
type: 'treemap',
visibleMin: 1200,
width: 1200,
height: 768,
label: {
position: 'insideTopLeft',
formatter: function (params) {
var arr = [
'{name|' + params.name + '}',
];
return arr;
},
rich: {
name: {
fontSize: 12,
color: '#fff'
}
}
},
itemStyle: {
borderColor: '#fff'
},
visualDimension: 2,
levels: getLevelOption(),
data: data.children
}
]
});
var treemapData = treemapChart.getModel().getSeriesByIndex(0).getData();
var tree = treemapData.tree;
echarts.registerMap('treemap', {
type: 'FeatureCollection',
features: treemapData.mapArray(function (idx) {
var itemLayout = treemapData.getItemLayout(idx);
if (itemLayout && itemLayout.height && itemLayout.width && !itemLayout.invisible) {
return {
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[itemLayout.x, 2048 - itemLayout.y],
[itemLayout.x + itemLayout.width, 2048 - itemLayout.y],
[itemLayout.x + itemLayout.width, 2048 - itemLayout.y - itemLayout.height],
[itemLayout.x, 2048 - itemLayout.y - itemLayout.height]
]]
},
properties: {
name: treemapData.getName(idx)
}
}
}
}).filter(function (item) {
return !!item;
})
});
var regions = treemapData.mapArray(function (idx) {
var itemLayout = treemapData.getItemLayout(idx);
if (itemLayout && itemLayout.height && itemLayout.width && !itemLayout.invisible) {
return {
height: tree.getNodeByDataIndex(idx).depth + 1,
name: treemapData.getName(idx)
// itemStyle: {
// areaColor: treemapData.getItemVisual(idx, 'color')
// }
};
}
}).filter(function (item) {
return !!item;
});
myChart.setOption({
geo3D: {
silent: true,
map: 'treemap',
instancing: true,
regions: regions,
aspectScale: 1,
lambertMaterial: {
detailTexture: treemapChart
},
projectUVOnGround: true,
postEffect: {
enable: true,
screenSpaceAmbientOcclusion: {
enable: true,
radius: 3,
intensity: 1.5
},
depthOfField: {
enable: true,
blurRadius: 3
}
},
viewControl: {
minBeta: -Infinity,
maxBeta: Infinity
}
},
series: []
});
window.addEventListener('resize', function () {
myChart.resize();
});
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或