HZH8997
HZH8997
  • 发布:2023-04-04 14:31
  • 更新:2024-01-18 22:41
  • 阅读:1435

编译成小程序报错【[vite]: Rollup failed to resolve import "tslib" from】vue3 基础js模版

分类:uni-app

刚创建的项目,基础 js 模板,然后引入了 插件市场的 echarts插件,下面是按 插件教程 写的,然后h5正常运行绘制

编译到小程序中报错,已上传附件

**
14:20:53.853 [vite]: Rollup failed to resolve import "tslib" from "/Users/huangruichang/Documents/code/uniapp/test/node_modules/echarts/lib/core/echarts.js".

14:20:53.857 This is most likely unintended because it can break your application at runtime.

14:20:53.858 If you do want to externalize this module explicitly add it to

14:20:53.869 build.rollupOptions.external

**

<template>  
    <view class="content">  
        <view><l-echart ref="chart" @finished="init"></l-echart></view>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    // 方式一:自定义包  
    // 使用插件内提供的echarts.min  
    // 或在官网自定义包:https://echarts.apache.org/zh/builder.html  
    // import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'  

    // // 方式二:全量包  
    // // 如果你使用 npm 安装了 echarts  
    // import * as echarts from 'echarts'  

    // 方式三:按需引入  
    // 按需引入 开始  
    import * as echarts from 'echarts/core';  
    import {  
        LineChart,  
        BarChart  
    } from 'echarts/charts';  
    import {  
        TitleComponent,  
        TooltipComponent,  
        GridComponent,  
        DatasetComponent,  
        TransformComponent,  
        LegendComponent  
    } from 'echarts/components';  
    // 标签自动布局,全局过渡动画等特性  
    import {  
        LabelLayout,  
        UniversalTransition  
    } from 'echarts/features';  
    // 引入 Canvas 渲染器,注意引入 CanvasRenderer 是必须的一步  
    import {  
        CanvasRenderer  
    } from 'echarts/renderers';  

    // 按需引入 注册必须的组件  
    echarts.use([  
        LegendComponent,  
        TitleComponent,  
        TooltipComponent,  
        GridComponent,  
        DatasetComponent,  
        TransformComponent,  
        LineChart,  
        BarChart,  
        LabelLayout,  
        UniversalTransition,  
        CanvasRenderer  
    ]);  
    //-------------按需引入结束------------------------  

    export default {  
        data() {  
            return {  
                option: {  
                    tooltip: {  
                        trigger: 'axis',  
                        axisPointer: {  
                            type: 'shadow'  
                        },  
                        confine: true  
                    },  
                    legend: {  
                        data: ['热度', '正面', '负面']  
                    },  
                    grid: {  
                        left: 20,  
                        right: 20,  
                        bottom: 15,  
                        top: 40,  
                        containLabel: true  
                    },  
                    xAxis: [{  
                        type: 'value',  
                        axisLine: {  
                            lineStyle: {  
                                color: '#999999'  
                            }  
                        },  
                        axisLabel: {  
                            color: '#666666'  
                        }  
                    }],  
                    yAxis: [{  
                        type: 'category',  
                        axisTick: {  
                            show: false  
                        },  
                        data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],  
                        axisLine: {  
                            lineStyle: {  
                                color: '#999999'  
                            }  
                        },  
                        axisLabel: {  
                            color: '#666666'  
                        }  
                    }],  
                    series: [{  
                            name: '热度',  
                            type: 'bar',  
                            label: {  
                                normal: {  
                                    show: true,  
                                    position: 'inside'  
                                }  
                            },  
                            data: [300, 270, 340, 344, 300, 320, 310],  
                        },  
                        {  
                            name: '正面',  
                            type: 'bar',  
                            stack: '总量',  
                            label: {  
                                normal: {  
                                    show: true  
                                }  
                            },  
                            data: [120, 102, 141, 174, 190, 250, 220]  
                        },  
                        {  
                            name: '负面',  
                            type: 'bar',  
                            stack: '总量',  
                            label: {  
                                normal: {  
                                    show: true,  
                                    position: 'left'  
                                }  
                            },  
                            data: [-20, -32, -21, -34, -90, -130, -110]  
                        }  
                    ]  
                },  
            };  
        },  
        // 组件能被调用必须是组件的节点已经被渲染到页面上  
        // 1、在页面mounted里调用,有时候mounted 组件也未必渲染完成  
        mounted() {  
            // init(echarts, theme?:string, opts?:{}, chart => {})  
            // echarts 必填, 非nvue必填,nvue不用填  
            // theme 可选,应用的主题,目前只支持名称,如:'dark'  
            // opts = { // 可选  
            //  locale?: string  // 从 `5.0.0` 开始支持  
            // }  
            // chart => {} , callback 返回图表实例  
            this.$refs.chart.init(echarts, chart => {  
                chart.setOption(this.option);  
            });  
        },  
        // 2、或者使用组件的finished事件里调用  
        methods: {  
            async init() {  
                // chart 图表实例不能存在data里  
                const chart = await this.$refs.chart.init(echarts);  
                chart.setOption(this.option)  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>
2023-04-04 14:31 负责人:无 分享
已邀请:
HZH8997

HZH8997 (作者)

下图是h5的,没问题

3***@qq.com

3***@qq.com

同样的问题,请问解决了吗

  • julytian

    npm install tslib试下,安装这些缺失的依赖包

    2024-04-22 11:24

要回复问题请先登录注册