最近比较火的圣诞树HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>张洋</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"><style>* {box-sizing: border-box;}body {margin: 0;height: 100vh;overflow: hidden;display: flex;align-items: center;justify-content: center;background: #161616;color: #c5a880;font-family: sans-serif;}label {display: inline-block;background-color: #161616;padding: 16px;border-radius: 0.3rem;cursor: pointer;margin-top: 1rem;width: 300px;border-radius: 10px;border: 1px solid #c5a880;text-align: center;}ul {list-style-type: none;padding: 0;margin: 0;}.btn {background-color: #161616;border-radius: 10px;color: #c5a880;border: 1px solid #c5a880;padding: 16px;width: 300px;margin-bottom: 16px;line-height: 1.5;cursor: pointer;}.separator {font-weight: bold;text-align: center;width: 300px;margin: 16px 0px;color: #a07676;}.title {color: #a07676;font-weight: bold;font-size: 1.25rem;margin-bottom: 16px;}.text-loading {font-size: 2rem;}
</style><script>window.console = window.console || function (t) { };
</script><script>if (document.location.search.match(/type=embed/gi)) {window.parent.postMessage("resize", "*");}
</script></head><body translate="no"><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script><div id="overlay"><ul><li class="title">请选择音乐（作为播放背景音乐）</li><li><button class="btn" id="btnA" type="button">Snowflakes Falling Down by Simon Panrucker</button></li><li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li><li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li><li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li><li class="separator">或者</li><li><input type="file" id="upload" hidden /><label for="upload">Upload File</label></li></ul></div><script id="rendered-js">const { PI, sin, cos } = Math;const TAU = 2 * PI;const map = (value, sMin, sMax, dMin, dMax) => {return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);};const range = (n, m = 0) =>Array(n).fill(m).map((i, j) => i + j);const rand = (max, min = 0) => min + Math.random() * (max - min);const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));const randChoise = arr => arr[randInt(arr.length)];const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];let scene, camera, renderer, analyser;let step = 0;const uniforms = {time: { type: "f", value: 0.0 },step: { type: "f", value: 0.0 }};const params = {exposure: 1,bloomStrength: 0.9,bloomThreshold: 0,bloomRadius: 0.5};let composer;const fftSize = 2048;const totalPoints = 4000;const listener = new THREE.AudioListener();const audio = new THREE.Audio(listener);document.querySelector("input").addEventListener("change", uploadAudio, false);const buttons = document.querySelectorAll(".btn");buttons.forEach((button, index) =>button.addEventListener("click", () => loadAudio(index)));function init() {const overlay = document.getElementById("overlay");overlay.remove();scene = new THREE.Scene();renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);const format = renderer.capabilities.isWebGL2 ?THREE.RedFormat :THREE.LuminanceFormat;uniforms.tAudioData = {value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format)};addPlane(scene, uniforms, 3000);addSnow(scene, uniforms);range(10).map(i => {addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);});const renderScene = new THREE.RenderPass(scene, camera);const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5,0.4,0.85);bloomPass.threshold = params.bloomThreshold;bloomPass.strength = params.bloomStrength;bloomPass.radius = params.bloomRadius;composer = new THREE.EffectComposer(renderer);composer.addPass(renderScene);composer.addPass(bloomPass);addListners(camera, renderer, composer);animate();}function animate(time) {analyser.getFrequencyData();uniforms.tAudioData.value.needsUpdate = true;step = (step + 1) % 1000;uniforms.time.value = time;uniforms.step.value = step;composer.render();requestAnimationFrame(animate);}function loadAudio(i) {document.getElementById("overlay").innerHTML ='<div class="text-loading">正在下载音乐，请稍等...</div>';const files = ["https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3","https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];const file = files[i];const loader = new THREE.AudioLoader();loader.load(file, function (buffer) {audio.setBuffer(buffer);audio.play();analyser = new THREE.AudioAnalyser(audio, fftSize);init();});}function uploadAudio(event) {document.getElementById("overlay").innerHTML ='<div class="text-loading">请稍等...</div>';const files = event.target.files;const reader = new FileReader();reader.onload = function (file) {var arrayBuffer = file.target.result;listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {audio.setBuffer(audioBuffer);audio.play();analyser = new THREE.AudioAnalyser(audio, fftSize);init();});};reader.readAsArrayBuffer(files[0]);}function addTree(scene, uniforms, totalPoints, treePosition) {const vertexShader = `attribute float mIndex;varying vec3 vColor;varying float opacity;uniform sampler2D tAudioData;float norm(float value, float min, float max ){return (value - min) / (max - min);}float lerp(float norm, float min, float max){return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() {vColor = color;vec3 p = position;vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `varying vec3 vColor;varying float opacity;uniform sampler2D pointTexture;void main() {gl_FragColor = vec4( vColor, opacity );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const phases = [];const mIndexs = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const t = Math.random();const y = map(t, 0, 1, -8, 10);const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2);const [z, x] = polar(ang, map(t, 0, 1, 5, 0));const modifier = map(t, 0, 1, 1, 0);positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);colors.push(color.r, color.g, color.b);phases.push(rand(1000));sizes.push(1);const mIndex = map(i, 0, totalPoints, 1.0, 0.0);mIndexs.push(mIndex);}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));const tree = new THREE.Points(geometry, shaderMaterial);const [px, py, pz] = treePosition;tree.position.x = px;tree.position.y = py;tree.position.z = pz;scene.add(tree);}function addSnow(scene, uniforms) {const vertexShader = `attribute float size;attribute float phase;attribute float phaseSecondary;varying vec3 vColor;varying float opacity;uniform float time;uniform float step;float norm(float value, float min, float max ){return (value - min) / (max - min);}float lerp(float norm, float min, float max){return (max - min) * norm + min;}float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);}void main() {float t = time* 0.0006;vColor = color;vec3 p = position;p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);p.x += sin(t+phase);p.z += sin(t+phaseSecondary);opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );gl_PointSize = size * ( 100.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform sampler2D pointTexture;varying vec3 vColor;varying float opacity;void main() {gl_FragColor = vec4( vColor, opacity );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); }`;function createSnowSet(sprite) {const totalPoints = 300;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(sprite)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const phases = [];const phaseSecondaries = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];positions.push(x);positions.push(y);positions.push(z);color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));colors.push(color.r, color.g, color.b);phases.push(rand(1000));phaseSecondaries.push(rand(1000));sizes.push(rand(4, 2));}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3));geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));geometry.setAttribute("phaseSecondary",new THREE.Float32BufferAttribute(phaseSecondaries, 1));const mesh = new THREE.Points(geometry, shaderMaterial);scene.add(mesh);}const sprites = ["https://assets.codepen.io/3685267/snowflake1.png","https://assets.codepen.io/3685267/snowflake2.png","https://assets.codepen.io/3685267/snowflake3.png","https://assets.codepen.io/3685267/snowflake4.png","https://assets.codepen.io/3685267/snowflake5.png"];sprites.forEach(sprite => {createSnowSet(sprite);});}function addPlane(scene, uniforms, totalPoints) {const vertexShader = `attribute float size;attribute vec3 customColor;varying vec3 vColor;void main() {vColor = customColor;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = size * ( 300.0 / -mvPosition.z );gl_Position = projectionMatrix * mvPosition;}`;const fragmentShader = `uniform vec3 color;uniform sampler2D pointTexture;varying vec3 vColor;void main() {gl_FragColor = vec4( vColor, 1.0 );gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );}`;const shaderMaterial = new THREE.ShaderMaterial({uniforms: {...uniforms,pointTexture: {value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`)}},vertexShader,fragmentShader,blending: THREE.AdditiveBlending,depthTest: false,transparent: true,vertexColors: true});const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];const sizes = [];const color = new THREE.Color();for (let i = 0; i < totalPoints; i++) {const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];positions.push(x);positions.push(y);positions.push(z);color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));colors.push(color.r, color.g, color.b);sizes.push(1);}geometry.setAttribute("position",new THREE.Float32BufferAttribute(positions, 3).setUsage(THREE.DynamicDrawUsage));geometry.setAttribute("customColor",new THREE.Float32BufferAttribute(colors, 3));geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));const plane = new THREE.Points(geometry, shaderMaterial);plane.position.y = -8;scene.add(plane);}function addListners(camera, renderer, composer) {document.addEventListener("keydown", e => {const { x, y, z } = camera.position;console.log(`camera.position.set(${x},${y},${z})`);const { x: a, y: b, z: c } = camera.rotation;console.log(`camera.rotation.set(${a},${b},${c})`);});window.addEventListener("resize",() => {const width = window.innerWidth;const height = window.innerHeight;camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize(width, height);composer.setSize(width, height);},false);}
</script></body></html>

ad098a0f7466054bfb3e8e7204da66bd.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/48059.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【圣诞树代码】

【圣诞树代码】

新建一个HTML文件&#xff0c;直接复制粘贴就行。 <!DOCTYPE html> <html lang"en" ><head><meta charset"UTF-8"><title></title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/aja…
阅读更多...
【圣诞节】简单代码实现圣诞树|圣诞贺卡 | 快来为心爱的她送上专属的圣诞礼物叭~

【圣诞节】简单代码实现圣诞树|圣诞贺卡 | 快来为心爱的她送上专属的圣诞礼物叭~

圣诞节马上就要到了&#xff0c;不知道给自己喜欢的人准备什么样的惊喜吗&#xff1f;作为一名程序员&#xff0c;当然是用编程制作专属于她or他的圣诞树&#xff01; 目录 &#x1f384;圣诞树 ✨3D圣诞树 代码块 打开方式 修改位置 效果展示 ✨音乐律动圣诞树 代码块…
阅读更多...
圣诞节来了，怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~

圣诞节来了，怎能还没有圣诞树呢 快来为心爱的她送上专属的圣诞礼物叭~

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; &#x1f33b;&#x1f33b;&#x1f33b;Hello&#xff0c;大家好我叫是Dream呀&#xff0c;一个有趣的Python博主&#xff0c;小白一枚&#xff0c;多多关照&#x1f61c;&#x1f61c;&…
阅读更多...
用Python画圣诞树 ‘‘遇见’’ 圣诞老人

用Python画圣诞树 ‘‘遇见’’ 圣诞老人

这是雪程序的1.1版本。 上个版本的文章---看这里&#xff1a; 忙活半天只为了看雪--送给大家的冬至礼物https://blog.csdn.net/qq_54554848/article/details/121873955?spm1001.2014.3001.5501&#xff08;下述代码基于上个版本&#xff09; 上次我发布了--冬至礼物的博客&…
阅读更多...
圣诞节快到了，程序员应该给女友送一个线上圣诞树

圣诞节快到了，程序员应该给女友送一个线上圣诞树

我们把下载的压缩包解压&#xff0c;把exe文件放到桌面&#xff0c;双击打开即可。 桌面效果图&#xff1a; 可以打开多个圣诞树&#xff0c;如果关闭圣诞树需要鼠标右键点击exit即可。 代码如下&#xff1a; <!DOCTYPE HEML PUBLIC> <html> <head> <me…
阅读更多...
快要圣诞节啦，快去给小伙伴们分享漂亮的圣诞树吧

快要圣诞节啦，快去给小伙伴们分享漂亮的圣诞树吧

最近翻到一篇知乎&#xff0c;上面有不少用Python&#xff08;大多是turtle库&#xff09;绘制的树图&#xff0c;感觉很漂亮&#xff0c;我整理了一下&#xff0c;挑了一些我觉得不错的代码分享给大家&#xff08;这些我都测试过&#xff0c;确实可以生成喔~&#xff09; 重中…
阅读更多...
python画圣诞树【方块圣诞树、线条圣诞树、豪华圣诞树】

python画圣诞树【方块圣诞树、线条圣诞树、豪华圣诞树】

文章目录 前言【便捷源码下载处】1.方块圣诞树2.线条圣诞树3.豪华圣诞树 这篇文章主要介绍了使用Python画了一棵圣诞树的实例代码,本文通过实例代码给大家介绍的非常详细&#xff0c;对大家的学习或工作具有一定的参考借鉴价值&#xff0c;需要的朋友可以参考下 前言【便捷源码…
阅读更多...
圣诞节都到了，快使用代码画棵圣诞树吧

圣诞节都到了，快使用代码画棵圣诞树吧

&#x1f4d2; 博客首页&#xff1a;✎﹏ℳ๓敬坤的博客 &#x1f388; &#x1f60a; 我只是一个代码的搬运工 &#x1f383; &#x1f389; 欢迎来访的读者关注、点赞和收藏 &#x1f91e; &#x1f609; 有问题可以私信交流 &#x1f606; &#x1f4c3; 文章标题&#xff1…
阅读更多...
圣诞树代码 html

圣诞树代码 html

新建txt文档 <!DOCTYPE html> <html lang"en" > <head> <meta charset"UTF-8"> <title></title> <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normaliz…
阅读更多...
圣诞节来了，用Python Turtle画棵圣诞树吧

圣诞节来了，用Python Turtle画棵圣诞树吧

如何实现上图效果呢&#xff1f;让我们开始吧&#xff01; 首先&#xff0c;导入turtle和random from turtle import * import random as rd 然后&#xff0c;写一个待会儿要用到的函数&#xff0c;用于随机生成True和False def true_or_false(percent50):nrd.randint(1,10…
阅读更多...
大家都在画圣诞树，我们用代码敲一颗吧~圣诞树

大家都在画圣诞树，我们用代码敲一颗吧~圣诞树

前段时间发布的文章很多人问怎么操作的&#xff0c;今天具体说明一下&#xff1a; PS&#xff1a;如果需要下载可以点击左下角阅读全文下载代码使用更方便 具体步骤如下&#xff1a; 复制下面代码在电脑里面新建一个记事本&#xff0c;将代码复制到新建的记事本里保存记事本&am…
阅读更多...
【Python项目】圣诞节快到了，Python基于海龟（turtle）实现的圣诞树效果，是好几个哟 | 附源码

【Python项目】圣诞节快到了，Python基于海龟（turtle）实现的圣诞树效果，是好几个哟 | 附源码

前言 halo&#xff0c;包子们上午好 圣诞节快到了 今天我的好兄弟们安排了一波圣诞节的Python代码 主要是用海龟&#xff08;turtle&#xff09;画图实现的&#xff0c;非常简单的啦 话不多说&#xff0c;直接开整 相关文件 关注小编&#xff0c;私信小编领取哟&#xff01;…
阅读更多...
圣诞节到了，写一个炫酷的圣诞树和平安果，送给你最爱的人吧

圣诞节到了，写一个炫酷的圣诞树和平安果，送给你最爱的人吧

&#x1f34a; Java学习&#xff1a;Java从入门到精通总结 &#x1f34a; Spring系列推荐&#xff1a;Spring源码解析 &#x1f4c6; 最近更新&#xff1a;2021年12月16日 &#x1f34a; 个人简介&#xff1a;通信工程本硕&#x1f4aa;、阿里新晋猿同学&#x1f315;。我的…
阅读更多...
【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码

【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 前言 一年一度的圣诞节马上就要到了&#xff0c;看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享2种不同风格的圣诞树&#xff0c;…
阅读更多...
python圣诞树动态图，拿去送给你的那个TA呀

python圣诞树动态图，拿去送给你的那个TA呀

圣诞节快到了&#xff0c;最近圣诞树的绘制图比较火热&#xff0c;也很漂亮&#xff0c;今天我就整理了一下源码&#xff0c;分享给大家&#xff08;这些我都测试过&#xff0c;确实可以生成喔~&#xff09; 动态生成圣诞树 效果图&#xff08;这个是动态的&#xff09;&…
阅读更多...
圣诞节快到了，用python、turtle画棵圣诞树吧~

圣诞节快到了，用python、turtle画棵圣诞树吧~

太多python新手问怎么跑了&#xff0c;我搞了个升级版的&#xff0c;手把手教你们&#xff01;&#xff01;新版的还加了背景设置&#xff0c;大家可以看一下&#xff1a;圣诞节的python豪华版圣诞树&#xff0c;包括雪花彩灯文字背景_Ding2langdang的博客-CSDN博客小白版最新p…
阅读更多...
使用excel分类汇总数据生成饼图

使用excel分类汇总数据生成饼图

需求描述&#xff1a; 有一段数据如下图所示&#xff0c;分别统计下图中的每个字段的频率&#xff0c;并生成饼图。 处理过程&#xff1a; 首选需要将这段数据复制到excel表格当中&#xff0c;直接复制的话&#xff0c;不会自动将每个字段独自占一格。好在数据都是以‘&#…
阅读更多...
Excel的复合条饼图制作

Excel的复合条饼图制作

在工作中统计各部分占比情况的时候&#xff0c;饼图往往是最佳选择&#xff0c;它可以清楚地呈现各部分的占比&#xff0c;但是&#xff0c;单个饼图有时候是有缺陷的&#xff0c;它不能完美地显示出某一部分的具体情况&#xff0c;或者当饼图中有些数值具有较小的百分比时&…
阅读更多...
html5饼图添加百分比,饼图如何显示数据和百分比

html5饼图添加百分比,饼图如何显示数据和百分比

大家好&#xff0c;我是时间财富网智能客服时间君&#xff0c;上述问题将由我为大家进行解答。 饼图显示数据和百分比的存在方法如下&#xff1a; 1、选中表格区域的数据&#xff0c;点击插入&#xff0c;点击所有图表&#xff0c;选择饼图。 2、右击选择添加数据标签&#xff…
阅读更多...
EChart饼图文字大小调整

EChart饼图文字大小调整

原文&#xff1a;https://blog.csdn.net/xuaner8786/article/details/79241689 一、EChart图中的文字调整&#xff08;以饼图为例&#xff09; 1.图中‘1’的文字大小调整在‘legend’对象下的‘textStyle’属性里 2.图中‘2’的文字大小调整在‘tooltip’对象下的‘textStyl…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023