随笔分类 - 前端可视化
【前端可视化】Canvas 下载图片添加背景色因为缩放导致比例不同问题
摘要：比例不同是因为缩放导致的，缩放导致绘图中心发生改变，我们需要把填充的背景色的范围扩大（根据缩放比例来），同时背景色要绘制在现有画布的后面，防止重叠遮挡。 感觉一个小下载，需要注意的事项还是挺多的，记录下，希望能帮助到其他人，里面的一些 API 请参考 MDN 文档。 下面的参考代码，自己根据自己实际
【前端可视化】Canvas 绘制图层覆盖了怎么办？
摘要：`ctx.globalCompositeOperation = 'destination-over';` >Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type
【前端可视化】大屏scale适配vue3 hooks封装
摘要：body样式 body { position: relative; width: 1920px; height: 1080px; box-sizing: border-box; // scale 缩放中心 左上角 transform-origin: left top; } useScalePage.
【前端可视化】ECharts中国地图+散点图demo
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
【前端可视化】前端大屏适配方案
摘要：方案一：rem 单位+动态设置 html 的 font-size 动态设置 html 根字体的大小和 body 字体大小（使用 lib_flexible.js） 将设计稿的宽（1920）平均分成 24 等份，每一份 80px； html 根字体大小就设置为 80px，即 1rem = 80px，24
【前端可视化】ECharts 实现响应式图表
摘要：响应式图片的实现步骤: 1.图表只设置高度，宽度设置为100% 或 不设置。 2.监听窗口的resize事件，即监听窗口尺寸的变化（需节流）。 3.当窗口大小改变时，然后调用 echartsInstance.resize 改变图表的大小。 另外需要注意的是：在容器节点被销毁时，可以调用 echart
【前端可视化】SVG 学习知识点
摘要：基本概念和语法 SVG 的定义和历史 SVG 是==可缩放矢量图形（Scalable Vector Graphics）==的缩写，它是一种用于描述二维矢量图形的 XML 标记语言。与传统的栅格图像不同，SVG 图像可以无限缩放而不会失真，同时也支持交互和动画等特性。 SVG 最早于 1999 年由
【前端可视化】3d-force-graph 3d力导向图（知识图谱相关）配置和使用
摘要：效果图 文档 可以先去官网看看文档或者看看我下面的参考博客，把基本配置看懂（英语差的同学可以看下面的翻译）。 3d-force-graph使用及相关设置 github.com/vasturiano/3d-force-graph 3d-force-graph:文档翻译 配置 // 初始化 3d fun
【前端可视化】ECharts 关系图力导图（知识图谱）类型配置
摘要：记录下 效果图 配置项 let myChart: any = null; const categories = [ { name: "错误码", }, { name: "原因", }, { name: "设备", }, { name: "用户操作", }, { name: "现象", }, ]; /
【前端可视化】Canvas 和 SVG 区别
摘要：可扩展性 SVG 是基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小不会失真. Canvas 是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化(模糊) 因此SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。 渲染能力 当 SVG 很复
【前端可视化】Echarts 实现环形饼图外层带阴影效果配置
摘要：效果展示 实现代码 原理主要还是用两个饼图嵌套，外侧做阴影，内层放数据。配置比较复杂，怕下次遇到就做个记录吧。 initEcharts() { const myChart = echarts.init(this.$refs.chart) const userScore = this.userScor
【前端可视化】Echarts 报错：[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
摘要：错误原因 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化， 利用Vue中的ref和$refs 来代替document.getElementById（）获取该图形容器对象 <div id="mian" ref="chart" ></div> .... var myChart =
【前端可视化】ECharts 报错：Cannot read property getAttribute of null 报错
摘要：由于把echarts放到页面的一个弹出框组件中，故在页面初始化的过程中，charts这时候不在页面节点中，就会导致这一问题，所以只需简单的添加this.$nextTick(function(){})函数，将图表初始化放到这个函数中就能解决问题
