您好,登錄后才能下訂單哦!
上篇文章給大家介紹了 在 webpack 中使用 ECharts的實例詳解 ,可以點擊查看。
1. 使用NPM安裝(全局引入)
執行下面的命令:
npm install echarts--save
引入echarts模塊
在Vue項目的main.js中引入echarts模塊,即是寫入如下代碼:
import echarts from 'echarts' Vue.prototype.$echarts = echarts;
2. 按需引入
上面全局引入會將所有的echarts圖表打包,導致體積過大,我解決這一問題,可以使用require按需引入即是需要什么就引入什么:
即是:
let echarts = require('echarts/lib/echarts')
3. 直接引用
在index.html文件中全局引入,使用script標簽引入
<script src="/static/js/echarts/echarts.js"></script>
注意:src中寫入echarts的路徑;
然后再vue項目build目錄下找到webpack.base.conf.js,配置文件,在module.exports對象中添加externals屬性,然后配置echarts所在的路徑:
module.exports = { ..... externals: { // 路徑:命名空間 'echarts/dist/echarts':'echarts', } };
總結
以上所述是小編給大家介紹的在Vue中使用echarts的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。