vue3使用Echarts柱状图，封装组件，动态渐变柱状颜色

很久没有水文了，今天来水一篇，方便自己往后更好的划水！

第一步：安装echarts

npm i echarts

第二步：在main.js引入echarts

import * as echarts from 'echarts'

app.config.globalProperties.$echarts = echarts

或者可以在组件页面引入直接使用

第三步：封装组件：barChart.vue

font-size.js  主要是为了根据屏幕设置字体大小

export function fontSize(res) {
    let clientWidth = document.documentElement.clientWidth
    if (!clientWidth) return
    let fontSize = (clientWidth / 1280)
    return res * fontSize
}
export const defaultColor = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a']
export const group = (array = [], subGroupLength = 0) => {
    let index = 0;
    const newArray = [];
    while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
    }
    return newArray;
}

第四步：如何使用：application.vue

最后看看效果图