這篇文章主要介紹vue.js引入echars的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
vue.js引入echars的方法：1、全局引入，代碼為【title:{text: 'ECharts 入門示例'}】；2、按需引入，代碼為【require('echarts/lib/component/tooltip')】。
vue.js引入echars的方法：
1.安裝echarts依賴
npm install echarts -S
2.創(chuàng)建圖表
a:全局引入
main.js頁面 import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue頁面
b:按需引入
上面全局引入會(huì)將所有的echarts圖表打包，導(dǎo)致體積過大，所以我覺得好還是按需引入。
重慶分公司
重慶分公司
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
let myChart = echarts.init(document.getElementById('myChart'))
// 繪制圖表
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}以上是“vue.js引入echars的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
