vue封装echarts组件
2024-03-24在做数据可视化大屏页面展示时,或多或少都会用到echarts去歇一歇图表,比如饼图、柱状图、折线图等等,但是如果所有的图表代码都在vue页面中去写会造成代码冗余,同时也不便于后期拓展,所以我们要将这部分代码给写到外面,将他们进行封装。这样,我们就可以在 Vue 中使用 Echarts 图表了。当父组件渲染时,会传递配置项到子组件中,然后子组件会创建一个 Echarts 实例并渲染图表。no no no,接下来,看我操作。1. 首先,在 Vue 项目中安装 Echarts 库。将组件封装,传参为饼图颜色。_echarts封装成vue组件
vue2可视化大屏浏览器自适应响应
2024-02-21本文章主要讲述vue2开发可视化大屏,echars图形会随着浏览器窗口大小而自适应,用到了 .flexible.js 插件把屏幕分成24等分达到目的,公司需求是一个页面多个不同的图表.图表有些是相同的,所以我对图表做了个封装,以其中一个图表为例子1-把下载好的flexible.js,放在所需项目里,之后直接导入到可视化大屏页面即可2-页面分成24等分,以1920为例,1rem等于80px,把页面的px全部写为rem单位3-封装的echars代码如下,一个页面多个相同图表,就用ref的方式初始化实例,不然页面_vue2数据大屏怎么实现响应式