vue3使用echarts,vue+echart
展示是一个强大的画图插件，在某视频剪辑软件项目中，我们常常可以引用展示来完成完成一些图表的操作，下面这篇文章主要给大家介绍了关于在Vue3中如何更优雅的使用统计图图表的相关资料，需要的朋友可以参考下
目录
前言封装思路引入模块封装功能使用例子总结
前言
在大屏可视化项目中，我们常常需要用到很多的图表组件，通常你会编写很多的选择权对图表进行渲染，以及引入它们所需的一些组件并使用echart.use。
在Vue2中我们常常把可复用的组件单独抽离出来，再通过道具、发射等方法向复用组件中传入组件所需数据，而在Vue3中我们可以将一些逻辑功能写成钩进行抽离和复用再传入到视图中，这会不仅让你的组件中的代码更加优雅而且阅读性更强。
封装思路
引入模块
我们先创建库。分时（同timesharing）文件，用于将统计图图表中所需要用到组件全部引入进来并导出。
由于引入的模块过多，所以我们把它引入的模块的代码抽离出来，增加代码的可阅读性
//lib.ts
从"电子海图/核心"导入*作为电子海图；
导入{
条形图，
折线图，
饼状图，
地图图表，
PictorialBarChart，
拉达查尔特，
散点图
}来自“电子海图/海图”；
导入{
标题组件，
工具提示组件，
网格组件，
极化分量
阿里亚组件
并行组件，
传奇组件，
雷达组件，
工具箱组件，
DataZoomComponent，
VisualMapComponent，
时间线组件，
日历组件，
图形组件
}来自e图表/组件；
echarts.use([
传奇组件，
标题组件，
工具提示组件，
网格组件，
极化分量
阿里亚组件
并行组件，
条形图，
折线图，
饼状图，
地图图表，
拉达查尔特，
PictorialBarChart，
雷达组件，
工具箱组件，
DataZoomComponent，
VisualMapComponent，
时间线组件，
日历组件，
图形组件，
散点图
]);
导出默认电子图表；
封装功能
在同级目录下创建一个useChart.ts文件，这是我们复用统计图图表钩文件。
封装功能如下：
监听图表元素变化及视图，自动重新渲染图表适应高度可传入主题、渲染模式(SVG、画布)加载效果从“vue”导入{ nextTick，onMounted，onUnmounted，Ref，unref }。
从“电子海图”导入类型{ echarts选项}；
从导入电子图表./lib ；
从"电子图形/渲染器"导入{ SVGRenderer，画布渲染器}；
从""导入{ RenderType，ThemeType } ./types ；
导出默认函数使用chart(elRef:RefHTMLDivElement，autoChartSize=false，animation: boolean=false，render: RenderType=RenderType .主题：ThemeType=ThemeType .默认){
//渲染模式
电子海图。使用(render===渲染类型.SVGRenderer？SVGRenderer : CanvasRenderer)
//echart实例
让图表实例：电子图表ECharts null=null
//初始化统计图
const initCharts=()={
const el=unref(elRef)
如果(!el ！unref(el)) {
返回
}
chartInstance=echarts.init(el，theme)；
}
//更新/设置配置
const setOption=(option:e charts option)={
nextTick(()={
如果(!图表实例){
初始化图表()；
如果(!图表实例)返回；
}
chartInstance.setOption(选项)
隐藏加载()
})
}
//获取统计图实例
函数getInstance(): echarts .ECharts null {
如果(!图表实例){
初始化图表()；
}
返回图表实例
}
//更新大小
函数resize() {
chartInstance？resize()；
}
//监听元素大小
函数watchEl() {
//给元素添加过渡
if(动画){ elref。价值。风格。transition=宽度1s，高度1s }
const resize observer=new resize observer((entries=resize()))
调整观察者的大小。观察(elref。值)；
}
//显示加载状
函数showLoading() {
如果(!图表实例){
初始化图表()；
}
chartInstance？showLoading()
}
//显示加载状
函数hideLoading() {
如果(!图表实例){
初始化图表()；
}
chartInstance？隐藏加载()
}
onMounted(()={
窗户。addevent侦听器( resize ，resize)
if(autoChartSize)watchEl()；
})
未安装(()={
窗户。removeeventlistener( resize ，resize)
})
返回{
setOption，
getInstance，
显示加载，
隐藏加载
}
}
//types.ts
导出枚举呈现类型{
SVGRenderer=SVGRenderer ，
CanvasRenderer=SVGRenderer
}
导出枚举主题类型{
光=光，
黑暗=黑暗，
默认=默认
}
有了以上封装好之后的代码，我们在组件中使用统计图图表库时将会更加简单而高效。
使用例子
//index.vue
模板
div ref= chartEl :style= { width:` 300 px `，height: `300px` }/div
/模板
脚本安装语言=ts
从“vue”导入{ onMounted，ref，Ref，computed，next tick }；
从“电子海图”导入类型{ EChartsOption }
从导入使用图表，{ RenderType，ThemeType }././useChart
从" axios "导入爱可信
const option=computedEChartsOption(()=({
//.图表选项
}))
const chartEl=refHTMLDivElement null(null)
常数{
setOption，
showLoading
}=使用chart(chartEl as RefHTMLDivElement，true，true，RenderType .主题类型：SVGRenderer .深色)
onMounted(()={
nextTick(()={
//显示装货
showLoading()
//假装有网络请求.
//渲染图表
setOption(选项。值)；
})
})
/脚本
开源代码库仓库地址（含例子):github.com/QC2168/useC…
总结
到此这篇关于在Vue3中如何更优雅的使用统计图图表的文章就介绍到这了，更多相关Vue3使用统计图图表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。