您好,登錄后才能下訂單哦!
這篇文章給大家介紹使用vue與echarts怎么實(shí)現(xiàn)一個(gè)數(shù)據(jù)可視化功能,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
1) 最直接的方法是在 ECharts 的官方網(wǎng)站中挑選適合您的版本進(jìn)行下載,不同的打包下載應(yīng)用于不同的開(kāi)發(fā)者功能與體積的需求,或者您也可以直接下載完整版本;開(kāi)發(fā)環(huán)境建議下載源代碼版本,包含了常見(jiàn)的錯(cuò)誤提示和警告。
2) 也可以在 ECharts 的 GitHub 上下載最新的 release 版本,解壓出來(lái)的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫(kù)。
3) 或者通過(guò) npm 獲取 echarts,npm install echarts --save,詳見(jiàn)“在 webpack 中使用 echarts”
由 cdn 引入,你可以在 cdnjs,npmcdn 或者國(guó)內(nèi)的 bootcdn 上找到 ECharts 的最新版本。
npm install echarts --save
2.1全局引入main.js中配置(不推薦使用,會(huì)導(dǎo)致包過(guò)大,冗余多)
import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //掛載在原型,組件內(nèi)使用直接this.$echarts調(diào)用
2.2組件內(nèi)按需引入 ( 推薦使用 )
這種方式很簡(jiǎn)單,在需要引入圖表的組件引入,例如如下引入柱狀圖。
//在組件引入基本模板 let echarts = require("echarts/lib/echarts"); //在組件引入柱狀圖組件 require("echarts/lib/chart/bar");
3.全局引入為例,在組件中使用示例
<template> <div class="view-content"> <div id="myChart" :></div> </div> </template> <script> export default { name: 'Echarts', data() { return { } }, mounted() { this.drawLine(); }, methods: { drawLine() { // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 繪制圖表配置 let option = { tooltip: {}, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: {}, series: [{ name: '銷(xiāo)量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 窗口大小自適應(yīng)方案 myChart.setOption(option); setTimeout(function() { window.onresize = function() { myChart.resize(); } }, 200) } } } </script> <style lang="scss" scoped> </style>
關(guān)于使用vue與echarts怎么實(shí)現(xiàn)一個(gè)數(shù)據(jù)可視化功能就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。