随笔分类 - 前端数据可视化
摘要：1 前置知识 用户直接与图表内容的交互（鼠标） 用户直接与图表组件的的交互（鼠标） 代码层面控制与图表的交互，外部区域的事件统一触发图表区域的事件或者自动执行图表行为 区分事件与行为，所有事件名称均小写 绑定事件通过实例的 on 和 off 方法，代码触发用 dispatchAction 需要更进阶
阅读全文
摘要：# echarts图表的自适应有两种方案 ### 1.通过window.onresize api 监听页面视口大小改变时，自适应变化（echarts.resize()） ### 2.通过ResizeObserver api 监听组装echarts容器的大小，自适应变化（echarts.resize(
阅读全文
摘要：<template> <div ref="myChartsRef" :class="className" :style="{ height: height, width: width }" :option="option"></div> </template> <script setup lang=
阅读全文
摘要：# 如何封装一个简易的echarts组件 ## 要求实现功能 1. echarts图表要能自适应大小，并且能够岁窗口自适应resize 1. 大屏首页有很echarts图标且要不停切换，需防止内存泄漏 1. 接口定时刷新返回数据时，需要自动更新echarts 1. 需要绑定自定义的echarts图表
阅读全文
摘要：今天在项目中mounted初始化了echarts，但是像在method或者watch里修改，发现this.myChart老是获取不到，后面发现是作用域的问题。因为是在mounted钩子初始化并定义了echarts实例，所以在mounted钩外无法找到。 解决办法：把myChart（自己定义的echa
阅读全文
摘要：ECharts是什么 一个基于 JavaScript 的开源可视化图表库 ECharts 的绘图流程是怎样的？ 引入 js 库 编写渲染容器 DOM，添加 width 和 height 样式属性 获取渲染 DOM 对象 初始化 ECharts 对象 编写 option 参数 调用 setOption
阅读全文
摘要：SVG SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形 基本的 SVG 元素 你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。 <svg> 包裹并定义整个矢量图。<
阅读全文
摘要：canvas canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。 canvas标签 <canvas>标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当
阅读全文
