vite3+vue3项目里面，用echarts5.0封装可视化组件的方法(一)

已于 2024-06-07 16:39:08 修改
阅读量457 收藏
点赞数
分类专栏： vue2/vue3 echarts5.0 前端框架深度研究-vben 文章标签： echarts javascript 前端
于 2022-12-10 11:23:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/128262866
版权

项目里面经常会用到可视化组件，索性就封装一个组件，首先展示下效果
请添加图片描述

技术栈

vite3+vue3+echarts5.0+@vueuse/core

基础代码

src\components\echart\bar.vue

<div ref="chartRef" :style="{ height, width }">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue3 封装ECharts组件
Huangxianlong的博客
04-26 5406
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。
如何在vue3中封装并使用echarts组件
du_aitiantian的博客
08-17 3587
在vue3中封装并使用echarts组件。
基于 Vue 3 封装一个 ECharts 图表组件
最新发布
narukeu的博客
06-10 395
在前端开发中，数据可视化是展示数据的重要方式之一。ECharts 是一个强大的开源可视化库，能够帮助我们轻松地创建各种图表。本文将介绍如何在 Vue 3 项目中使用 ECharts 封装一个图表组件。
在vue3中使用及封装echarts
qq_43730272的博客
02-23 958
在vue3中使用及封装echarts 1.获取ECharts 从npm获取 npm install echarts 2.在项目中引入ECharts（父子组件无通信） 子组件： <template> <div ref="myChart" style="width: 1000px; height: 600px;"></div> </template> <script setup> import * as echarts from 'ech
vue3 封装echarts
chao953211的博客
09-06 370
【代码】vue3 封装echarts。
Echart图组件封装
qq_45799465的博客
01-05 1183
Echart图表组件的简单封装。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vite+vue3使用模块化批量发布Mockjs接口
03-29
综上所述，"vite+vue3使用模块化批量发布Mockjs接口"是一个全面的前端开发流程，涉及到Vite的配置、Vue3的组件开发以及Mockjs的接口模拟，旨在提供一个高效、便捷的开发环境，同时保持代码的清晰结构和良好的可维护...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
例如，如果你有一个 `src/components` 目录，里面包含许多 Vue 组件，你可以使用 `import.meta.glob` 来一次性导入这些组件，无需手动列出每个文件。这样在编写应用时，可以方便地按需加载组件，实现懒加载，提高...
基于vite5+vue3的天气数据可视化管理系统源码+项目说明.zip
04-12
基于vite5+vue3的天气数据可视化管理系统源码+项目说明.zip 基于vite5+vue3的天气数据可视化管理系统源码+项目说明.zip 基于vite5+vue3的天气数据可视化管理系统源码+项目说明.zip 基于vite5+vue3的天气数据可视化...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue+echarts+datav实现的数据可视化项目模板（封装公共组件）
qq_53742640的博客
06-30 1311
基于vue2,echarts(5.0.0),datav实现的大屏数据可视化项目模板提示：以下是本篇文章正文内容，下面案例可供参考。
vue3中封装echarts
LRQQHM的博客
04-14 841
【代码】vue3中封装echarts。
Vue3和Vue2项目封装echarts
技术前端，忠于热爱 @0.活在风浪里
08-16 3257
vue2和vue3封装echarts，并写有简单例子，一看就懂，总有你要的，还在等待什么，快来一键三连抱走吧！
vue3 封装echarts组件
自由&不束缚的博客
05-19 872
vue3.0封装echarts组件
极致呈现系列之终章：Vue3中封装Echarts组件
九仞山的专栏
06-30 1107
介绍了Vue3中封装Echarts组件的方法
记录--Vue3 封装 ECharts 通用组件
林恒的博客
06-19 1401
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 按需导入的配置文件 配置文件这里就不再赘述，内容都是一样的，主打一个随用随取，按需导入。 import * as echarts from "echarts/core"; // 引入用到的图表 import { LineChart, type LineSeriesOption} from "echarts/charts"; // ...
Vue3封装Echrats组件
pizixian_的博客
08-31 1590
Vue3封装Echrats组件
vue3中封装echarts组件并实现夜间模式
Blog of Leviash
06-22 756
myClass是白天模式或者夜间模式，title为图表标题，在封装的echarts组件中传入到自己封装的baseTitle组件中，data为图表的数据，color是图表中的颜色，如果对图表颜色需求较多的话，还可以将颜色细分后来封装。饼图：圆环显示，圆环中间显示数据总数，能自定义圆环各项颜色，legend实现数据名与值的显示，并且两者颜色不一致。直方图：取消横纵坐标，悬停显示信息，数据可以有不同的颜色。
vite + vue3 创建项目，用openlayers封装一个组件MapView实现高德地图的加载
07-11
当然，我可以为您提供一个使用 Vite + Vue 3 创建项目，并使用 OpenLayers 封装一个 `MapView` 组件实现高德地图的加载的示例代码。 首先，确保您已经安装了最新版本的 Node.js。然后，按照以下步骤创建项目： 1. 打开终端并创建一个新的项目文件夹： ``` mkdir vite-vue3-openlayers cd vite-vue3-openlayers ``` 2. 初始化一个新的 npm 项目： ``` npm init -y ``` 3. 使用以下命令安装 Vite： ``` npm install create-vite@latest -g ``` 4. 使用 Vite 创建一个新的 Vue 3 项目： ``` create-vite ``` 在提示中选择 `vue-ts` 作为项目模板，并输入项目名称。 5. 进入项目文件夹： ``` cd your-project-name ``` 6. 安装 OpenLayers： ``` npm install ol --save ``` 7. 在 `src/components` 文件夹中创建一个名为 `MapView.vue` 的组件文件，并添加以下代码： ```vue <template> <div ref="mapContainer" class="map-container"></div> </template> <script> import { ref, onMounted } from 'vue' import { Map, View } from 'ol' import { Tile as TileLayer } from 'ol/layer' import { XYZ as XYZSource } from 'ol/source' export default { name: 'MapView', setup() { const mapContainer = ref(null) onMounted(() => { const map = new Map({ target: mapContainer.value, layers: [ new TileLayer({ source: new XYZSource({ url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}' }) }) ], view: new View({ center: [0, 0], zoom: 2 }) }) }) return { mapContainer } } } </script> <style scoped> .map-container { width: 100%; height: 100%; } </style> ``` 8. 在 `src/App.vue` 文件中引入并使用 `MapView` 组件： ```vue <template> <div id="app"> <h1>Hello Vite + Vue 3</h1> <MapView /> </div> </template> <script> import MapView from './components/MapView.vue' export default { components: { MapView } } </script> <style> #app { text-align: center; } </style> ``` 9. 启动开发服务器： ``` npm run dev ``` 现在，您可以在浏览器中访问 `http://localhost:3000` 查看使用 OpenLayers 封装的 `MapView` 组件加载高德地图的 Vue 3 应用程序。 请注意，这只是一个简单的示例，您可以根据自己的需求进一步调整地图的样式和行为。 祝您使用 Vite + Vue 3 和 OpenLayers 进行开发成功！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值