vue3+ts+echarts+vite工具+数字滚动器+请求数据动态创建图形页面

使用到的插件:echarts和数字滚动器

npm install --save echarts

npm install vue3-count-to

注意事项

1. 需要使用import * as echarts from ‘echarts’，不能使用 import echarts from ‘echarts’，否则会报错

2. 引入数字滚动器后报红，可以不管，也可以在env.d.ts文件中添加一条代码

/// <reference types="vite/client" />
declare module "js.cookie"
declare module "vue3-count-to"

具体代码

<template>
    <div class="both" style="padding: 0px 40px;margin-top: 30px;">
        <div class="main">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="box-bg">
                        <div class="elicon">
                            <el-icon :size="40" color="#40C9C6">
                                <Grid />
                            </el-icon>
                            <div hidden-xs-only hidden-sm-only hidden-sm-and-down>
                                <div>商品数量</div>
                                <!-- 数字滚动器 -->
                                <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
                            </div>
                        </div>
                        <div class="elicon">
                            <el-icon :size="40" color="#36A3F7">
                                <ChatDotSquare />
                            </el-icon>
                            <div>
                                <div>未发货单</div>
                                <count-to :startVal="0" :endVal="waitStockCounts" :duration="3000"></count-to>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 柱形图 -->
                <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                    <div id="columnChart" ref="column"></div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row>
                <!-- 折线图 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <div id="lineChart" ref="line"></div>
                </el-col>
                <!-- 饼状图 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <div id="pieChart" ref="pie"></div>
                </el-col>
                <!-- 饼状图2 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <div id="pieCharts" ref="pies"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Grid, ChatDotSquare } from '@element-plus/icons-vue';
//注意：需要使用import * as echarts from ‘echarts’，不能使用 import echarts from ‘echarts’，否则会报错
import * as echarts from 'echarts'//引入echarts插件
import { CountTo } from 'vue3-count-to'//引入数字滚动器
import { ref, onBeforeUnmount, onMounted } from 'vue';
import { post } from '@/http';//引入封装好的axios
type EChartsOption = echarts.EChartsOption//获取图形类型
console.log(echarts,"echarts");

//定义数据
const quantity = ref()//商品数量
const waitStockCounts = ref()  //未发货单
let column: echarts.ECharts | undefined = undefined
let line: echarts.ECharts | undefined = undefined
let pie: echarts.ECharts | undefined = undefined
let pies: echarts.ECharts | undefined = undefined

// 定义方法
const initData = () => {
    let data = {//请求传递的数据
        _gp: 'admin.dashboard',
        _mt: 'integral'
    }
    post(data).then((res) => {//请求
        console.log(res);
        let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data//结构赋值
        quantity.value = goodsCount//获取商品数量
        waitStockCounts.value = waitStockCount//获取未发货
        // 柱形图
        let columnChart = document.getElementById('columnChart')!;//获取节点，需要加！
        column = echarts.init(columnChart);
        // 折线图
        let lineChart = document.getElementById('lineChart')!;
        line = echarts.init(lineChart);
        // 饼状图
        let pieChart = document.getElementById('pieChart')!;
        pie = echarts.init(pieChart);
        // 饼状图2
        let pieCharts = document.getElementById('pieCharts')!;
        pies = echarts.init(pieCharts);

        // 柱形图
        let columnOption: EChartsOption = {
            title: {//表格标题属性
                text: '七日订单',//标题
                subtext: '订单数',//副标题
                left: 'left'//位置
            },
            legend: {//图例属性
                data: ['订单数'],//图例名称
                left: 'right'//位置
            },
            xAxis: {//x轴属性
                type: 'category',//类型：可选value、category、time、log具体可看官网配置项
                data: daysOrder[0]//日期
            },
            yAxis: {//y轴属性
                type: 'value'//类型
            },
            series: [
                {
                    name: '订单数',
                    type: 'bar',//表的类型：可选柱状图、饼图、线形图
                    barWidth: '40%',//柱子大小
                    color: ['#3EA6F7'],//柱子颜色
                    emphasis: { focus: 'series' },
                    data: daysOrder[1]//数据
                },
            ]
        };
        // 折线图
        let lineOption: EChartsOption = {
            title: {
                text: '7日成交金额',
                subtext: '订单数',
                left: 'left'
            },
            legend: {
                data: ['订单数'],
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: daysSum[0]    //日期
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单数',
                    type: 'line',
                    emphasis: {
                        focus: 'series'
                    },
                    data: daysSum[1]    //数据
                },
            ]
        };
        //饼状图
        let pieOption = {
            title: {
                text: '订单地区分布',
                left: 'left'
            },
            legend: {
                data: ['地区分布'],
                left: 'right'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: area,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        //饼状图2
        let pieOptions = {
            title: {
                text: '订单渠道分布',
                left: 'left'
            },
            tooltip: {//提示框组件
                trigger: 'item'//触发类型：可选item(数据项图形触发)、axis(坐标轴触发)、none(什么都不触发)
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: channel,
                    emphasis: {//高亮状态的扇区和标签样式
                        itemStyle: {//每个扇区样式
                            shadowBlur: 10,//图形阴影的模糊大小
                            shadowOffsetX: 0,//阴影水平方向上的偏移距离
                            shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
                        }
                    }
                }
            ]
        };
        // 柱形图
        columnOption && column.setOption(columnOption);
        // 折线图
        lineOption && line.setOption(lineOption);
        //饼状图
        pieOption && pie.setOption(pieOption);
        //饼状图2
        pieOptions && pies.setOption(pieOptions);
        window.onresize = function () {
            // echarts图表自适应resize方法
            if (column && line && pie && pies) {
                column.resize();
                line.resize();
                pie.resize();
                pies.resize();
            }

        };
    }).catch((err) => {

    });
}

onMounted(() => {
    initData()
})

onBeforeUnmount(() => {//用于解决echarts插件带来页面空白的bug问题
    if (column) {
        column.dispose()
        column = undefined
    }
    if (line) {
        line.dispose()
        line = undefined
    }
    if (pie) {
        pie.dispose()
        pie = undefined
    }
    if (pies) {
        pies.dispose()
        pies = undefined
    }
})
</script>

<style lang="less" scoped>
.box-bg {
    height: 340px;

    .elicon {
        height: 80px;
        padding: 0px 20px;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 0px 20px 0px #e3e2e2;
    }
}

// 柱形图
#columnChart {
    width: 80%;
    margin: auto;
    height: 340px;
}

// 折线图
#lineChart {
    width: 100%;
    height: 300px;
}

// 饼图
#pieChart {
    width: 100%;
    height: 300px;
}

// 饼图2
#pieCharts {
    width: 100%;
    height: 300px;
}
</style>