echarts封装使用

1、封装一个折线图表

<!-- 折线图 -->
<template>
    <div ref="chartContainer1" style=" height: 400px;"></div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, Ref, watch, nextTick} from 'vue'
import echarts from '@/echart/echarts'
// 导入所需要的组件
import { ToolboxComponent } from 'echarts/components';
// 注册组件
echarts.use([ToolboxComponent]);
const chartContainer1 = ref()
let chart: echarts.ECharts|null = null
const emit = defineProps(['chartsList'])
const chartOptions:Ref<any> = ref({})
watch(()=> emit.chartsList,(newValue) => {
    chartOptions.value = newValue
    chart= echarts.init(chartContainer1.value)
    series.value = chartOptions.value.series
    updateChartData()
})
onMounted(() => {
    chart= echarts.init(chartContainer1.value)
    updateChartData()
    window.addEventListener('resize', () => {
        chart?.resize()
    })
})
const legendData = ref(chartOptions.value.legendData)
const grid = ref(chartOptions.value.grid)
const series = ref(chartOptions.value.series)
function updateChartData() {
    const option = {
        tooltip: chartOptions.value.tooltip,
        legend: {
            data: legendData.value
        },
        grid: grid.value,
        toolbox: chartOptions.value.toolbox,
        xAxis: chartOptions.value.xAxis,
        yAxis:chartOptions.value.yAxis,
        series: series.value
    }
    option && chart?.setOption(option)
}
</script>
  
<style lang="less" scoped></style>

2、在组件中调用

<template>
    <echarts-line :chartsList="chartsList" ></echarts-line>
</template>

<script setup lang='ts'>
import EchartsLine from "@/components/VisualizationEchartsLine.vue"
const chartsList = ref()
class ChartOptions {
    public xAxisData: Ref<string[]>;
    public grid: object;
    public toolbox: object;
    public tooltip: object;
    public xAxis: object;
    public yAxis: object;
    public legendData: Ref<string[]>;
    public series: Ref<object[]>;
    constructor() {
        this.xAxisData = ref(getMonthDays(timeSlot.value[0], timeSlot.value[1]));
        this.grid = {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        };
        this.toolbox = {
            feature: {
                saveAsImage: { show: true, title: "下载" },
            },
            right: '30px',
            top: '15px'
        };
        this.tooltip = {
            trigger: 'axis',
        };
        this.xAxis = {
            type: 'category',
            boundaryGap: false,
            data: this.xAxisData.value,
        };
        this.yAxis = {
            type: 'value',
            minInterval: 1,
            axisLabel: {
                formatter: '{value}'
            }
        };
        this.legendData = ref([]);
        this.series = ref([]);
    }

}

//接下来就是实例化对象
const addSeriesData = () => {
    const seriesData = new ChartOptions();
    const time = ['2023-12-21','2023-09-12',.....];//存储日期的数组
    const dataMap: Record<string, any> = new Map(); // 这里使用 Map 替换对象，可以更方便、可读地处理键
    // 将数据按照每个用户和日期存储到 Map 中
    const echartsData = ref([//根据日期返回的具体数据
{date: '2023-09-18', user_id: 6, gen_count: 47, name: 'pyl'}
{date: '2023-09-18', user_id: 5, gen_count: 52, name: 'sqy'}
{date: '2023-09-18', user_id: 4, gen_count: 13, name: 'wdg'}
{date: '2023-09-15', user_id: 6, gen_count: 49, name: 'pyl'}
{date: '2023-09-15', user_id: 5, gen_count: 62, name: 'sqy'}
{date: '2023-09-15', user_id: 4, gen_count: 26, name: 'wdg'}
{date: '2023-09-15', user_id: 2, gen_count: 7, name: 'lfh'}
{date: '2023-09-14', user_id: 5, gen_count: 52, name: 'sqy'}
{date: '2023-09-14', user_id: 4, gen_count: 30, name: 'wdg'}
{date: '2023-09-14', user_id: 2, gen_count: 9, name: 'lfh'}
{date: '2023-09-13', user_id: 4, gen_count: 17, name: 'wdg'}
{date: '2023-09-13', user_id: 2, gen_count: 2, name: 'lfh'}
{date: '2023-09-13', user_id: 1, gen_count: 2, name: 'admin'}])
    for (let data of echartsData.value) {
        const key = `${data.name}-${data.date}`;
        const count: string[] = Object.keys(data).filter(key => key.includes('_count'))//这一步根据自己需要筛选
        dataMap[key] = data[count[0]];
    }
    for (const user of userList.value) {
        seriesData.series.value.push({
            name: user.name,
            type: "line",
            data: []
        })
        seriesData.legendData.value.push(user.name)//在这里添加echarts所需要的series值和用户数据名
    }
    // 遍历每个用户，为每个用户生成数组
    for (let userList of seriesData.series.value) {
        const values = [];
        // 遍历当前月份的每一天，如果有数据则取出，否则默认为 0
        for (let day of time) {
            const key = `${(userList as any).name}-${day}`;
            const count = dataMap[key] || 0;
            values.push(count);
        }
        // 将结果添加到对应用户的 data 数组中
        (userList as any).data = values;
    }
    chartsList.value = seriesData;//在这赋值需要传给子组件的值
};
</script>

<style lang="less" scoped>
</style>