vue3中echarts怎么封装
这篇“vue3中echarts怎么封装”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中echarts怎么封装”文章吧。
成都创新互联公司专业成都做网站、网站设计,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文发稿等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。
思路结合项目需求,针对不同类型的图表,配置基础的默认通用配置,例如x/y,label,图例等的样式
创建图表组件实例(不要使用id
,容易重复,还需要操作dom
,直接用ref
获取当前组件的el
来创建图表),提供type
(图表类型),和options
(图表配置)两个必要属性
根据传入type
,加载默认的图表配置
深度监听传入的options
,变化时更新覆盖默认配置,更新图表
提供事件支持,支持echart
事件按需绑定交互
注意要确保所有传入图表组件的options数组都是shallowReactive
类型,避免数组量过大,深度响应式导致性能问题
结合项目需求,针对不同类型的图表,配置基础的默认通用配置,例如x/y,label,图例等的样式
创建图表组件实例(不要使用id
,容易重复,还需要操作dom
,直接用ref
获取当前组件的el
来创建图表),提供type
(图表类型),和options
(图表配置)两个必要属性
根据传入type
,加载默认的图表配置
深度监听传入的options
,变化时更新覆盖默认配置,更新图表
提供事件支持,支持echart
事件按需绑定交互
注意要确保所有传入图表组件的options数组都是shallowReactive
类型,避免数组量过大,深度响应式导致性能问题
目录结构
├─v-charts
│ │ index.ts // 导出类型定义以及图表组件方便使用
│ │ type.d.ts // 各种图表的类型定义
│ │ useCharts.ts // 图表hooks
│ │ v-charts.vue // echarts图表组件
│ │
│ └─options // 图表配置文件
│ bar.ts
│ gauge.ts
│ pie.ts
组件代码
v-charts.vue
useCharts.ts
import { ChartType } from "./type";
import * as echarts from "echarts/core";
import { ShallowRef, Ref } from "vue";
import {
TitleComponent,
LegendComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent
} from "echarts/components";
import { BarChart, LineChart, PieChart, GaugeChart } from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
const optionsModules = import.meta.glob<{ default: echarts.EChartsCoreOption }>("./options/**.ts");
interface ChartHookOption {
type?: Ref
type.d.ts
/*
* @Description:
* @Version: 2.0
* @Autor: GC
* @Date: 2022-03-02 10:21:33
* @LastEditors: GC
* @LastEditTime: 2022-06-02 17:45:48
*/
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts'
import { XAXisComponentOption, YAXisComponentOption } from 'echarts';
import { ECElementEvent, SelectChangedPayload, HighlightPayload, } from 'echarts/types/src/util/types'
import {
TitleComponentOption,
TooltipComponentOption,
GridComponentOption,
DatasetComponentOption,
AriaComponentOption,
AxisPointerComponentOption,
LegendComponentOption,
} from 'echarts/components';// 组件
import {
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineSeriesOption,
PieSeriesOption,
FunnelSeriesOption,
GaugeSeriesOption
} from 'echarts/charts';
type Options = LineECOption | BarECOption | PieECOption | FunnelOption
type BaseOptionType = XAXisComponentOption | YAXisComponentOption | TitleComponentOption | TooltipComponentOption | LegendComponentOption | GridComponentOption
type BaseOption = echarts.ComposeOption
options/bar.ts
import { BarECOption } from "../type";
const options: BarECOption = {
legend: {},
tooltip: {},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
// type: "dashed",
color: "#C8D0D7"
}
},
axisTick: {
show: false
},
axisLabel: {
color: "#7D8292"
}
},
yAxis: {
type: "value",
alignTicks: true,
splitLine: {
show: true,
lineStyle: {
color: "#C8D0D7",
type: "dashed"
}
},
axisLine: {
lineStyle: {
color: "#7D8292"
}
}
},
grid: {
left: 60,
bottom: "8%",
top: "20%"
},
series: [
{
type: "bar",
barWidth: 20,
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#62A5FF" // 0% 处的颜色
},
{
offset: 1,
color: "#3365FF" // 100% 处的颜色
}
]
}
}
// label: {
// show: true,
// position: "top"
// }
}
]
};
export default options;
项目中使用
index.vue
/hooks/useStatisDeviceByUserObject.ts
export const useStatisDeviceByUserObject = () => {
// 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式,避免大量数据导致性能问题
const options = chartsOptions
使用时输入@可以看到组件支持的所有事件:
以上就是关于“vue3中echarts怎么封装”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
标题名称:vue3中echarts怎么封装
本文路径:http://pwwzsj.com/article/igjsih.html