vue3+ts项目中封装单柱的柱状图

成品图

 下载echarts npm i echarts

封装组件为Barchart.vue文件 

使用组件

3d柱状图要注意创建左切面,右切面和上切面 三种颜色形成3d柱状效果 

切换 

 推荐vue3封装echarts博客地址 https://www.jb51.net/article/267642.htm

 import useResizeChart from '@/hooks/useResizeChart';

useResizeChart.ts文件

// 用于自适应 echarts 图表大小
import echarts from "@/assets/ts/echarts";
export default function useResizeChart(container: HTMLElement, chart: echarts.ECharts) {// 监听容器大小变化const resizeObserver = new ResizeObserver(entries => {// 重新设置大小chart.resize({animation: {duration: 500}});});resizeObserver.observe(container);// onBeforeUnmount(() => {// 	// 销毁前解除监听// 	resizeObserver.unobserve(container);// })}

知识点补充  

api.coord

api.coord(...)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点.

Object.assign(target,..sources)

参数;taget ==>目标对象    source==>源对象

返回值:target,即目标对象

例:

var target={name:'guxin',age:18}
var source={state:'signle',age:22}
var result=Object.assign(target,source)
console.log(target)