ts+ vue3 项目的echarts图表二次封装

最新推荐文章于 2024-11-14 04:20:07 发布

原创最新推荐文章于 2024-11-14 04:20:07 发布 · 249 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍如何在Vue3项目中通过npm安装echarts，并进行二次封装，提升图表组件的复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm下载echarts

npm install echarts --save

<script setup lang='ts'>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
// 引入自定义ehcats样式的方法
import { getEchartsColor } from '../../utils/getColor';
// 接收父组件传递的数据
let props: any = defineProps({
    // Y轴的数据
    echartsY: {
        type: Array
    },
    // X轴的数据
    ehcartsX: {
        type: Array
    },
    // 标签的id
    ids: {
        type: String,
        default: 'main'
    },
    // 样式类型
    type: {
        type: Boolean,
        default: false
    }
})
// 初始化的数据
let myCharts: any = ref('')

// 使用watch来处理异步的数据,点击的内容发生改变,拿到新的数据渲染页面
watch(() => props, (val: any) => {
    getOption(val)
}, {
    deep: true,
})
// 自定义方法获取echarts数据
let getOption = (objs: any) => {
    let option = {
        xAxis: {
            // X轴显示的数据
            data: objs.ehcartsX,
            axisTick: {
                show: false // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false // 不显示坐标轴线
            },
            axisLabel: {
                show: false // 不显示坐标轴上的文字
            },
            splitLine: {
                show: false // 不显示网格线
            }
        },
        //提示信息
        tooltip: {
            //坐标轴的指示器
            axisPointer: {
                type: 'cross'
            },
        },
        yAxis: [
            {
                axisTick: {
                    show: false // 不显示坐标轴刻度线
                },
                axisLine: {
                    show: false // 不显示坐标轴线
                },
                axisLabel: {
                    show: false // 不显示坐标轴上的文字
                },
                splitLine: {
                    show: false // 不显示网格线
                }
            }
        ],
        grid: [ //布局
            {
                top: '30',
                bottom: '10',
                left: '20',
                right: '0',
            }
        ],
        series:
            {
                type: 'line',
                showSymbol: false,
                //Y轴上的数据
                data: objs.echartsY,
                //区域背景颜色
                areaStyle: {
                    shadowColor: getEchartsColor(objs.type),
                    // 颜色透明度
                    opacity: 0.03,
                },
                // 线条的颜色
                color: getEchartsColor(objs.type),
                lineStyle: {
                    // 设置线条粗细
                    width: 1.5
                },
            }
};
myCharts.value.setOption(option); //调用数据
}


onMounted(() => {
    let dom = document.getElementById(props.ids) //获取到id
    if (dom) {
        myCharts.value = echarts.init(dom) //初始化echarts
        getOption(props) //进来页面显示的数据
    }
})

</script>

<template>
    <div :id="props.ids" style="width:100%;height:100%;"></div>
</template>

<style scoped lang='scss'></style>