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

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)