可视化开发
关注
分享
扫一扫
文章平均质量分 50
Canvas、SVG、Echarts、Three.js
努力挣钱的小鑫
每天做一点，进步一点，够了！如果帮到了朋友你，希望得到你的关注！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【Three.js】SpriteMaterial 加载图片泛白，和原图片不一致
colorSpace是 Three.js 中用于处理颜色空间转换的重要属性。它主要用于调整纹理的颜色空间,以适应不同设备或渲染管道的需求。原创 2024-11-01 18:07:17 · 654 阅读 · 0 评论 -
【Three】threejs 报错：The requested module ‘three‘ does not provide an export named ‘BoxBufferGeometry‘
就行了，应该是新版本跟旧版本不太一样。原创 2024-04-11 11:45:31 · 428 阅读 · 0 评论 -
【Three】threejs 导入报错：Uncaught TypeError: Failed to resolve module specifier “three“....
【代码】threejs 导入报错：Uncaught TypeError: Failed to resolve module specifier "three"....原创 2024-04-11 11:42:24 · 1055 阅读 · 0 评论 -
【Three】前端从零开始学习 threejs：创建第一个 threejs3D 页面
/ 创建一个材质：MeshBasicMaterial是一种简单的材质，不受光照影响。// 创建一个立方体：BoxGeometry 是一个立方体的几何体。// 创建一个立方体网格：Mesh是一个物体，它由几何体和材质组成。// 创建渲染器：渲染器将场景和相机渲染到画布上。// 创建场景：场景是所有物体的容器。// 创建相机：相机是用户眼睛。// 将相机向后移动10个单位。// 将立方体网格添加到场景中。// 将相机向上移动5个单位。// 在页面中添加渲染器。// 设置渲染器的大小。// 使立方体网格旋转。原创 2024-02-18 15:03:11 · 1303 阅读 · 0 评论 -
【前端可视化】postcss-px-to-viewport 适配怎么限制最大宽度？使用 postcss-mobile-forever
自己用 nuxt3 写官网发现用 postcss-px-to-viewport 这个插件虽然能够实现基于 vw 的响应式，但是无法做到限制宽度，比如设计稿 1920p，我只想让最大缩放比例为 1920p，不能超过，就无法实现了。纯 css 的话，有两个办法，一种用 px 生成两套代码，一套移动端的 vw 视图，一套最大宽度的媒体查询代码，另一种方法是用类似 min(vw, px) 的 css 函数限制 vw 的最大值。最后可以实现移动端、桌面端和移动端横屏都有蛮好的展示效果。有大佬已经写好了插件。原创 2024-01-23 10:12:28 · 2554 阅读 · 0 评论 -
【前端可视化】ECharts 报错：Cannot read property getAttribute of null 报错
由于把echarts放到页面的一个弹出框组件中，故在页面初始化的过程中，charts这时候不在页面节点中，就会导致这一问题，所以只需简单的添加this.$nextTick(function(){})函数，将图表初始化放到这个函数中就能解决问题...原创 2020-07-20 10:24:00 · 186 阅读 · 0 评论 -
【前端可视化】大屏scale适配vue3 hooks封装
body样式body { position: relative; width: 1920px; height: 1080px; box-sizing: border-box; // scale 缩放中心 左上角 transform-origin: left top;}useScalePage.jsimport { onMounted, onUnmounted }...原创 2023-04-28 10:50:00 · 622 阅读 · 0 评论 -
【前端可视化】Canvas 和 SVG 区别
可扩展性SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真.Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化(模糊)因此SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。渲染能力当 SVG 很复杂时，它的渲染就会变得很慢，因为在很大程度上去使用 DOM 时，渲染会变得很慢口。Canvas ...原创 2022-07-11 22:33:00 · 176 阅读 · 0 评论 -
【前端可视化】Echarts 实现环形饼图外层带阴影效果配置
效果展示实现代码原理主要还是用两个饼图嵌套，外侧做阴影，内层放数据。配置比较复杂，怕下次遇到就做个记录吧。initEcharts() { const myChart = echarts.init(this.$refs.chart) const userScore = this.userScore.slice(0, this.userScore.leng...原创 2022-06-16 13:37:00 · 887 阅读 · 0 评论 -
【前端可视化】Echarts 报错：[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (readi...
错误原因出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化，利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象<div id="mian" ref="chart" ></div>....var myChart = this.$echarts.init(this.$refs.chart);...原创 2022-03-12 10:53:00 · 536 阅读 · 0 评论 -
【前端可视化】3d-force-graph 3d力导向图（知识图谱相关）配置和使用
效果图文档可以先去官网看看文档或者看看我下面的参考博客，把基本配置看懂(英语差的同学可以看下面的翻译)。3d-force-graph使用及相关设置github.com/vasturiano/3d-force-graph3d-force-graph:文档翻译配置// 初始化 3dfunction threeInit() { const relationData = _.cloneD...原创 2022-10-13 11:03:00 · 2174 阅读 · 0 评论 -
【前端可视化】前端大屏适配方案
方案一：rem 单位+动态设置 html 的 font-size动态设置 html 根字体的大小和 body 字体大小(使用 lib_flexible.js)将设计稿的宽(1920)平均分成 24 等份，每一份 80px；html 根字体大小就设置为 80px，即 1rem = 80px，24rem = 1920px(移动端推荐分为 10 份)；将 body 字体大小设置为...原创 2023-04-21 16:37:00 · 5870 阅读 · 2 评论 -
【前端可视化】ECharts 关系图力导图（知识图谱）类型配置
记录下效果图配置项let myChart: any = null;const categories = [ { name: "错误码", }, { name: "原因", }, { name: "设备", }, { name: "用户操作", }, { name: "现象", },];// 初始化分布...原创 2022-09-28 09:13:00 · 1419 阅读 · 0 评论 -
【前端可视化】SVG 学习知识点
基本概念和语法SVG 的定义和历史SVG 是可缩放矢量图形(Scalable Vector Graphics)的缩写，它是一种用于描述二维矢量图形的 XML 标记语言。与传统的栅格图像不同，SVG 图像可以无限缩放而不会失真，同时也支持交互和动画等特性。SVG 最早于 1999 年由 W3C 发布，用于在 Web 上展示矢量图形，并于 2001 年正式成为标准。在过去的二十多年中，SVG ...原创 2023-04-20 22:09:00 · 2903 阅读 · 0 评论 -
【前端可视化】ECharts 实现响应式图表
响应式图片的实现步骤:1.图表只设置高度，宽度设置为100% 或 不设置。2.监听窗口的resize事件，即监听窗口尺寸的变化(需节流)。3.当窗口大小改变时，然后调用 echartsInstance.resize 改变图表的大小。另外需要注意的是：在容器节点被销毁时，可以调用 echartsInstance.dispose 以销毁echarts的实例释放资源，避免内存泄漏。<...原创 2023-04-21 11:53:00 · 857 阅读 · 0 评论