vue3集成echarts最佳实践

安装 echarts

npm install echarts --save

两种引用方式

非虚拟 dom

import * as echarts from 'echarts';var chartDom = document.getElementById('mychart');
var myChart = echarts.init(chartDom);
var option;option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};option && myChart.setOption(option);------ tsx 或者 template<divref='pieChartRef'id={'myChart'}style={{height: "300px",width: typeof width === 'number' ? width + 'px' : width}}></div>

虚拟 dom (推荐使用)

import * as echarts from 'echarts'
const PieChart = defineComponent({name: 'PieChart',props,setup(props) {const pieChartRef: Ref<HTMLDivElement | null> = ref(null)const top10 = () => {return props.data.length>=10 ? props.data.slice(0,10) : props.data}const option = {title: {text: '分组聚合 Top 10',left: 'center',textStyle: {color:'white'},},tooltip: {trigger: 'item',backgroundColor: '#fff'},legend: {bottom: '0%',left: 'center',textStyle:{fontSize: 16,color: 'white',fontWeight: 'bold'}},series: [{type: 'pie',radius: ['35%', '60%'],center: ['50%', '40%'],avoidLabelOverlap: false,emphasis: {label: {show: true,fontSize: 30,fontWeight: 'bolder',color: 'white'}},label: {show: false,position: 'center'},labelLine: {show: false},data: top10()}]}let chart:Ref<ECharts | null>  = ref(null)const init = () => {chart.value = echarts.init(pieChartRef.value)chart.value.setOption(option)}const resize = throttle(() => {chart && chart.value.resize()}, 20)watch(() => props.data,() => {option.series[0].data= top10()chart.value.setOption(option)})onMounted(() => {init()addEventListener('resize', resize)})return { pieChartRef }},render() {const { height, width } = this// console.log(`pie prop height:${height}, width:${width}`)return (// height: typeof height === 'number' ? height + 'px' : height,// width: typeof width === 'number' ? width + 'px' : width<divref='pieChartRef'id={'myChart'}style={{height: "300px",width: typeof width === 'number' ? width + 'px' : width}}></div>)}
})

三种与 Vue3 集成方式

单组件

import { onMounted } from "vue";
import * as echarts from 'echarts'
export default {name: "data_page",setup() {onMounted(() => {//需要获取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("customerChart"));// 绘制图表myChart.setOption({title: { text: "总用户量" },tooltip: {},xAxis: {data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],},yAxis: {},series: [{name: "用户量",type: "line",data: [5, 20, 36, 10, 10, 20],},],});window.onresize = function () {//自适应大小myChart.resize();};});},components: {},mounted() {},
};

全局 provide

在 App.vue种注入

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { useOsTheme, darkTheme ,GlobalThemeOverrides} from 'naive-ui'
import * as echarts from 'echarts'provide('ec',echarts)//provide</script><template><NConfigProvider :theme="{useOsTheme}"  :theme-overrides="themeOverrides"><n-global-style/><NMessageProvider><router-view/></NMessageProvider></NConfigProvider>
</template><style lang="scss" scoped></style>

在组件中使用,这种方式可能会出现不能识别类型警告,需要加@ts-ignore

let echarts = inject("ec");//引入// @ts-ignorechart.value = echarts.init(pieChartRef.value)

全局挂载(推荐使用)

main.ts中配置如下:

import App from './App.vue'
import { createApp } from 'vue'
import './style.css'
//  echarts
import * as echarts from 'echarts'const pinia = createPinia() 
pinia.use(piniaPluginPersistedstate) const app = createApp(App)
// 挂载 echarts
app.config.globalProperties.echarts = echartsapp.mount('#app')

在 tsx 页面中使用

        const globalProperties = getCurrentInstance()?.appContext.config.globalPropertieslet chart:Ref<ECharts | null>  = ref(null)const init = () => {chart.value = globalProperties?.echarts.init(pieChartRef.value)chart.value.setOption(option)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在java中操作redis_Data

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 2.配置Redis数据源 redis:host: ${sky.redis.host}port: ${sky.redis.port}password: ${sk…

快速引流推广,快速引流推广策略分享,教你精准引流

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 在当今互联网的快速发展中&#xff0c;短视频脱颖而出&#xff0c;成为互联网的新秀&#xf…

用python做一个小游戏代码,用python制作一个小游戏

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;如何用python编写一个简单的小游戏&#xff0c;用python做一个小游戏代码&#xff0c;今天让我们一起来看看吧&#xff01; 今天呢&#xff0c;给大家展示一下Python有趣的小地方&#xff0c;展示给大家看看&#xff0c…

Ansible Playbook快速部署一主多从MySQL集群

部署目标&#xff1a; 1、快速部署一套一主两从的mysql集群 2、部署过程中支持交互式定义安装目录及监听端口号 部署清单目录结构&#xff1a; rootmaster:/opt/mysql# tree . . ├── group_vars │ └── all.yml ├── hosts ├── mysql.yml └── roles└── mys…

Client-go操作Deployment

在工作中需要对kubernetes进行自定义资源的开发&#xff0c;操作K8s的资源肯定是必不可少的。K8s原生语言是用Go编写的&#xff0c;所以在CRD中使用client-go来操作资源。本次介绍一下使用client-go来操作Deployment。 1. 创建main函数 func main() {homePath : homedir.Home…

php实现登录的例子

界面&#xff1a; 登录界面login.html代码&#xff1a; <!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"…

ARM微架构

一、流水线 二、指令流水线 指令流水线 指令流水线 指令流水线 ARM指令流水线 ARM7采用3级流水线 ARM9采用5级流水线 Cortex-A9采用8级流水线 注1&#xff1a;虽然流水线级数越来越多&#xff0c;但都是在三级流水线的基础上进行了细分 PC的作用&#xff08;取指&#xff09; …

C#图像均值和方差计算实例

本文展示图像均值和方差计算实例,分别实现RGB图像和8位单通道图像的计算方法 实现代码如下: #region 方法 RGB图像均值 直接操作内存快/// <summary>/// 定义RGB图像均值函数/// </summary>/// <param name="bmp"></param>/// <retur…

flutter开发实战-video_player视频播放功能及视频缓存

flutter开发实战-video_player视频播放功能及视频缓存 最近开发过程中video_player播放视频&#xff0c; 一、引入video_player 在pubspec.yaml引入video_player video_player: ^2.7.0在iOS上&#xff0c;video_player使用的是AVPlayer进行播放。 在Android上&#xff0c;…

python-docx常用方法总结

由于最近有任务需要自动生成word报告&#xff0c;因此学习了一些python-docx的使用方法&#xff0c;在此总结。 目前网上相关的资料不算太多&#xff0c;且大多数都很简单。有一些稍微复杂的需求往往找不到答案&#xff0c;很多想要的方法这个库似乎并没有直接提供。在git上看…

uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

首先 &#xff1a;我使用的是uniapp vue3语法&#xff1a; 问题&#xff1a; 我出现这个问题是IOS 设备发现的&#xff0c;data.boxWidth为0 代码&#xff1a; const initCreated () > {const query uni.createSelectorQuery().in(instance.proxy);const el query.select…

Dockerfile定制Tomcat镜像

Dockerfile中的打包命令 FROM &#xff1a; 以某个基础镜像作为此镜像的基础 RUN &#xff1a; RUN后面跟着linux常用命令&#xff0c;如RUN echo xxx >> xxx,注意&#xff0c;RUN 不能用于执行命令&#xff0c;因为每个RUN都是独立运行的&#xff0c;RUN 的cd对镜像中的…

PHP8的循环控制语句-PHP8知识详解

我们在上一节讲的是条件控制语句&#xff0c;本节课程我们讲解循环控制语句。循环控制语句中&#xff0c;主要有for循环、while循环、do...while循环和foreach循环。 在编写代码时&#xff0c;经常需要反复运行同一代码块。我们可以使用循环来执行这样的任务&#xff0c;而不是…

利用MMPose进行姿态估计(训练、测试全流程)

前言 MMPose是一款基于PyTorch的姿态分析开源工具箱&#xff0c;是OpenMMLab项目成员之一&#xff0c;主要特性&#xff1a; 支持多种人体姿态分析相关任务&#xff1a;2D多人姿态估计、2D手部姿态估计、动物关键点检测等等更高的精度和更快的速度&#xff1a;包括“自顶向下”…

C++中修改存储在数组中的数据

C中修改存储在数组中的数据 在前一个程序清单中&#xff0c;并未将用户定义的数据输入到数组中。给数组元素赋值的语法与给 int 变量赋值的语法很像。 例如&#xff0c;将 2016 赋给 int 变量的代码类似于下面这样&#xff1a; int thisYear; thisYear 2016;而将 2016 赋给第…

力扣初级算法(二分查找)

力扣初级算法(二分法)&#xff1a; 每日一算法&#xff1a;二分法查找 学习内容&#xff1a; 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 2.二分查找流程&…

Mageia 9 RC1 正式发布,Mandriva Linux 发行版的社区分支

导读Mageia 9 首个 RC 已发布。公告写道&#xff0c;自 2023 年 5 月发布 beta 2 以来&#xff0c;Mageia 团队一直致力于解决许多顽固问题并提供安全修复和新特性。 新版本的控制中心添加了用于删除旧内核的新功能&#xff0c;该功能在 Mageia 9 中默认自动启用&#xff0c;用…

探秘手机隐藏的望远镜功能:开启后,观察任何你想看的地方

当今的智能手机不仅仅是通信工具&#xff0c;它们蕴藏着各种隐藏的功能&#xff0c;其中之一就是让你拥有望远镜般的观察能力。是的&#xff0c;你没有听错&#xff01;今天我们将探秘手机中隐藏的望远镜功能&#xff0c;这项神奇的功能可以让你打开后&#xff0c;轻松观察任何…

Spring Boot读取yml或者properties配置信息

文章目录 Spring Boot读取yml或者properties配置信息方法一&#xff1a;Value获取基本信息&#xff0c;适用于少量信息方法二&#xff1a;通过注解ConfigurationProperties(prefix "spring.datasource")方法三&#xff1a;通过api Environment Spring Boot读取yml或…

小兔鲜项目 uniapp (1)

目录 项目架构 uni-app小兔鲜儿电商项目架构 小兔鲜儿电商课程安排 创建uni-app项目 1.通过HBuilderX创建 2.通过命令行创建 pages.json和tabBar案例 uni-app和原生小程序开发区别 用VS Code开发uni-app项目 拉取小兔鲜儿项目模板代码 基础架构–引入uni-ui组件库 操…