vue中使用echarts的方法實(shí)例詳解
更新時(shí)間：2023年05月10日 09:13:16 作者：Mr.Aholic
這篇文章主要介紹了vue中使用echarts的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue中使用echarts的包安裝、引入、生命周期函數(shù)元素掛載等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
1、安裝
npm install echarts --save
2、在vue中引入（全局引入）
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、在vue中的使用
需要用到echart的地方先設(shè)置一個(gè)div的id、寬高
提示：
可以在一個(gè)頁面中引入多個(gè)數(shù)據(jù)報(bào)表模板
使用div進(jìn)行位置的排版放置
4、模板代碼放在哪個(gè)位置
重點(diǎn)注意：其中const option = { }就是我們需要引進(jìn)echart圖表的代碼
<template>
<div>
<div ref="chart"></div>
</div>
</template>要在mounted生命周期函數(shù)中實(shí)例化echarts對象。確保dom元素已經(jīng)掛載到頁面中。
mounted(){
this.getEchartData()
},
methods: {
getEchartData() {
const chart = this.$refs.chart
if (chart) {
const myChart = this.$echarts.init(chart)
const option = {...}
myChart.setOption(option)
window.addEventListener("resize", function() {
myChart.resize()
})
}
this.$on('hook:destroyed',()=>{
window.removeEventListener("resize", function() {
myChart.resize();
});
})
}
}5、完整的一個(gè)vue頁面實(shí)例：
<template>
<div>
<div ref="chart"></div>
<div ref="chart1"></div>
</div>
</template>
<script>
export default {
data() {
},
mounted() {
this.getEchartData()
this.getEchartData1()
},
methods: {
getEchartData() {
const chart = this.$refs.chart
if (chart) {
const myChart = this.$echarts.init(chart)
const option = { legend: {},
tooltip: {},
dataset: {
source: [
['訂單', 43.3, 85.8],
['訂單1', 83.1, 73.4],
['訂單2', 86.4, 65.2],
['訂單3', 72.4, 53.9],
['訂單4', 82.4, 53.9],
['訂單5', 42.4, 53.9],
['訂單6', 72.4, 53.9],
['訂單7', 72.4, 53.9]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [ { type: 'bar' }, { type: 'bar' }]}
myChart.setOption(option)
window.addEventListener("resize", function() {
myChart.resize()
})
}
this.$on('hook:destroyed',()=>{
window.removeEventListener("resize", function() {
myChart.resize();
});
})
},
getEchartData1() {
const chart1 = this.$refs.chart1
if (chart1) {
const myChart = this.$echarts.init(chart1)
const option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]
}
]
}
myChart.setOption(option)
window.addEventListener("resize", function() {
myChart.resize()
})
}
this.$on('hook:destroyed',()=>{
window.removeEventListener("resize", function() {
myChart.resize();
});
})
},
},
watch: {},
created() {
}
}
</script>6、實(shí)現(xiàn)效果
7、可能遇到的問題，下載不成功。使用
cnpm install echarts --save
8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts
修改引入的方式
// 引入echarts import *as echarts from 'echarts' Vue.prototype.$echarts = echarts
您可能感興趣的文章:
相關(guān)文章
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們2023-08-08
vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
這篇文章主要介紹了使用Vue逐步實(shí)現(xiàn)Watch屬性詳解，watch對象中的value分別支持函數(shù)、數(shù)組、字符串、對象，較為常用的是函數(shù)的方式，當(dāng)想要觀察一個(gè)對象以及對象中的每一個(gè)屬性的變化時(shí)，便會(huì)用到對象的方式2022-08-08
我們在開發(fā)過程中，有時(shí)會(huì)遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下，本文就介紹了vue如何根據(jù)url下載非同源文件，感興趣的可以了解一下2021-06-06
解決vue加scoped后就無法修改vant的UI組件的樣式問題
這篇文章主要介紹了解決vue加scoped后就無法修改vant的UI組件的樣式問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識,文中的示例代碼簡潔易懂,對我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12
詳解Vue組件之間的數(shù)據(jù)通信實(shí)例
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue中v-for循環(huán)選中點(diǎn)擊的元素并對該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對該元素添加樣式操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07