Vue按需引入Echarts，并从V4版本升级到V5版本

2022-1-25 前端达人

一、原本的V4版本按需引入: main.js页面

import Echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line' Vue.prototype.echarts = Echarts 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

二、升级版本

！！！注意：要先删除插件，再重新安装插件，要不然是没效果的（我就说咋没效果）

删除echarts

npm uninstall echarts --save 


    
        1

再重新安装echarts

npm install echarts --save 


    
        1

三、按需处理

在main.js页面

参考官方：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

import * as Echarts from 'echarts/core'; import { BarChart, PieChart, LineChart } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from 'echarts/renderers'; Echarts.use([BarChart, PieChart, LineChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer, LegendComponent]) Vue.prototype.echarts = Echarts 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

四、成功

文章来源：csdn 作者:木木木小罗

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

« JavaScript制作贪吃蛇小游戏几个超火的在线编程网站，别错过 »

Vue按需引入Echarts，并从V4版本升级到V5版本

分类

日历

链接

个人资料

存档