uniapp引入echarts图表（兼容H5端和微信小程序）

1、引入echarts组件

在Dcloud插件市场下载echarts插件https://ext.dcloud.net.cn/plugin?id=4899
文档描述支持vue2、vue3，我这里使用的vue3
下载插件压缩包解压后会得到一下几个文件

image.png

选择插件components文件夹下中的所有文件复制到自己项目的components文件夹内

image.png

选择插件static文件夹下中的echarts.min.js和ecStat.min.js复制到自己项目的static文件夹内

image.png

由于发布小程序的主包大小不超多1.5M,建议在echarts官网（https://echarts.apache.org/zh/builder.html）下载中定制自己项目所需用到的图表类型，我的项目只用到折线图和饼图，所以我只定制了这两种，点击下载就得到了echarts.min.js，最后将下载的echarts.min.js替换原插件中的echarts.min.js

image.png

我的目录结构如下：
src文件：

image.png

components文件：

image.png

static文件：

image.png

2、封装自定义echarts组件

image.png

在components文件夹下创建cusEcharts文件夹，里面创建一个index.vue文件同于封装echarts组件，内容如下：
注：H5端和小程序引入echarts方式不同，小程序只支持require方式引入，H5端使用npm安装

npm install echarts@^5.3.3 -s

<!-- 图表组件 -->
<template>
    <view class="chart_content_item">
        <LEchart ref="chartRef"></LEchart>
    </view>
</template>

<script lang="ts" setup>
    import LEchart from "@/components/l-echart/l-echart.vue"
    import { ref, onMounted, watch } from "vue"
    // #ifdef H5
    import * as echarts from 'echarts'
    // #endif
    // #ifdef MP-WEIXIN
    const echarts = require('../../static/echarts.min.js')
    // #endif
    const chartRef = ref()
    const props = defineProps({
        option: {
            type: Object
        }
    })
    onMounted(() => {
        setTimeout(() => {
            if (!chartRef.value) return
            chartRef.value.init(echarts, chart => {
                chart.setOption(props.option)
            })
        }, 300)
    })
    watch(() => props.option, (newVal, oldVal) => {
        if (chartRef.value) {
            chartRef.value.init(echarts, chart => {
                chart.setOption(newVal)
            })
        }
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
    .chart_content_item {
        width: 100%;
        height: 100%;
    }
</style>

在同目录下新建一个option.ts配置文件（这里引入echarts是项目中有渐变需求，没有可以不用引入）
我这里数据配置用的是数据集的格式，可以根据自己喜欢配置


// #ifdef H5
import * as echarts from 'echarts'
// #endif
// #ifdef MP-WEIXIN
const echarts = require('../../static/echarts.min')
// #endif

//折线图配置
export const lineOption = {
    legend: {
        show: true,
        data: [] as any[],
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        confine: true,
        axisPointer: {
            type: 'line',
            snap: true
        },
        textStyle: {
            textShadowColor: "transparent",
            textShadowBlur: 5,
        }
    },
    grid: {
        left: '3%',
        right: '5%',
        top: '20%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisTick: {
            show: true,
            inside: true
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#707070'
            }
        },
        axisLabel: {
            textStyle: {
                color: "#A8ADCF"
            }
        }
    },
    yAxis: {
        type: 'value',
        name: "",
        nameTextStyle: {
            color: "#A8ADCF"
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#707070'
            }
        },
        axisLabel: {
            textStyle: {
                color: "#A8ADCF"
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: 'rgba(112, 112, 112, 0.2)'
            }
        }
    },
    dataset: {
        source: [] as any[],
    },
    series: [
        {
            type: "line",
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: "#35ADFD",
                width: 1.5,
            },
            areaStyle: {
                show: true,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                        offset: 0,
                        color: 'rgba(31, 215, 236, 0.1)'
                    },
                    {
                        offset: 0.5,
                        color: 'rgba(83, 169, 255, 0.1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(208, 222, 255, 0.1)'
                    }
                ])
            },
        }
    ],
    color: ['#83bff6']
}

// 饼图配置
export const pieOption = {
    color: ['#009DFF', "#22E4FF", "#3BFFD0", "#04e38a", "#9dff86"],
    tooltip: {
        trigger: 'item',
        show: true
    },
    legend: {
        type: "scroll",
        top: "bottom",
        bottom: 0,
        itemWidth: 6,
        itemHeight: 6,
        icon: "circle", // 图例图形
        itemGap: 20,
    },
    dataset: {
        source: [] as any[]
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '63%'],
            center: ['50%', '48%'],
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'outside',
                formatter: '{d}%',
            },
        }
    ]
}