义乌便宜自适应网站建设厂家,大兴模版网站建设哪家好,西安网页设计培训学校,西安网站建设第一品牌记录 vue3Ts 项目中#xff0c;按需引入echarts并进行二次封装使用。
1、安装#xff1a;npm i echarts 2、新增按需引入配置文件#xff1a;echartsConfig.ts
// 引入 echarts 核心模块#xff0c;核心模块提供了 echarts 使用必须要的接口。
import * as echarts from …记录 vue3Ts 项目中按需引入echarts并进行二次封装使用。
1、安装npm i echarts 2、新增按需引入配置文件echartsConfig.ts
// 引入 echarts 核心模块核心模块提供了 echarts 使用必须要的接口。
import * as echarts from echarts/core;// 引入内置组件组件后缀都为Component
import {TitleComponent,TooltipComponent,GridComponent,PolarComponent,AriaComponent,ParallelComponent,LegendComponent,RadarComponent,ToolboxComponent,DatasetComponent, // 数据集组件DataZoomComponent,VisualMapComponent,TimelineComponent,CalendarComponent,GraphicComponent,TransformComponent, // 数据转换器组件(filter, sort)
} from echarts/components;// 引入渲染器echarst默认使用canvas渲染引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer, SVGRenderer } from echarts/renderers;// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from echarts/features;// 引入图表类型后缀都为Chart
import {BarChart,LineChart,PieChart,MapChart,RadarChart,PictorialBarChart,
} from echarts/charts;// 注册必须的组件
echarts.use([// 内置组件TitleComponent,TooltipComponent,GridComponent,PolarComponent,AriaComponent,ParallelComponent,LegendComponent,RadarComponent,ToolboxComponent,DatasetComponent,DataZoomComponent,VisualMapComponent,TimelineComponent,CalendarComponent,GraphicComponent,TransformComponent,// 渲染器CanvasRenderer,SVGRenderer,// 特性LabelLayout,UniversalTransition,// 图表BarChart,LineChart,PieChart,MapChart,RadarChart,PictorialBarChart,
]);export default echarts;3、封装成hooksuseEcharts.ts
import {Ref,shallowRef,unref,onMounted,onDeactivated,onBeforeUnmount,
} from vue;import echarts from /components/baseEcharts/config;export type EChartsCoreOption echarts.EChartsCoreOption;const useEcharts (elRef: RefHTMLDivElement, options: EChartsCoreOption) {const charts shallowRefecharts.ECharts();const setOptions (options: EChartsCoreOption) {charts.value charts.value.setOption(options);};// 初始化const initCharts (themeColor?: Arraystring) {const el unref(elRef);if (!el || !unref(el)) {return;}charts.value echarts.init(el);if (themeColor) {options.color themeColor;}setOptions(options);};// 重新窗口变化时重新计算const resize () {charts.value charts.value.resize();};onMounted(() {window.addEventListener(resize, resize);});// 页面keepAlive时不监听页面onDeactivated(() {window.removeEventListener(resize, resize);});onBeforeUnmount(() {window.removeEventListener(resize, resize);});return {initCharts,setOptions,resize,};
};export { useEcharts };4、封装成基础组件baseEcharts.vue
templatediv:style{width: width,height: height,}refechartsRef/
/templatescript setup langts
import { ref, onMounted, watch, PropType } from vue;
import { useEcharts, EChartsCoreOption } from ./useEchart.ts; // 引入hooksconst props defineProps({options: { type: Object as PropTypeEChartsCoreOption, required: true },height: { type: String, default: 100% },width: { type: String, default: 100% },themeColors: { type: Array as PropTypestring[], default: () [] },
});const echartsRef ref();const { setOptions, initCharts } useEcharts(echartsRef, props.options);watch(() props.options,(nVal) {let targetOptions: EChartsCoreOption {};if (props.themeColors props.themeColors.length 0) {targetOptions { ...nVal };targetOptions.color props.themeColors;} else {targetOptions { ...nVal };}setOptions(targetOptions);}
);onMounted(() {initCharts();
});
/script5、使用示例useExample.vue
templateBaseEcharts :optionsoptions height300px /
/templatescript langts setup
import BaseEcharts from /components/baseEcharts/index.vue;const options {title: {text: 使用示例,subtext: 二级标题,subTextStyle: {fontSize: 16,fontWeight: normal,left: center,y: center,},},tooltip: {trigger: axis,axisPointer: {lineStyle: {width: 1,color: #008000,},},},grid: {left: 1%,right: 1%,bottom: 1%,top: 60px,containLabel: true,},xAxis: {type: category,data: [1月, 2月, 3月, 4月, 5月, 6月, 7月],axisLabel: {interval: 0,rotate: 30,},},yAxis: {axisLabel: {formatter: (val: number) {return val;},},},series: [{name: 收入,type: bar,stack: Total,data: [200, 301, 402, 503, 604, 705, 806],},{name: 支出,type: line,stack: Total,data: [100, 210, 1020, 230, 20, 250, 60],},],
};
/script
