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è)頁(yè)面中引入多個(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對(duì)象。確保dom元素已經(jīng)掛載到頁(yè)面中。
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頁(yè)面實(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、可能遇到的問(wèn)題，下載不成功。使用
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
您可能感興趣的文章:
- 在vue中添加Echarts圖表的基本使用教程
- 使用Vue開(kāi)發(fā)動(dòng)態(tài)刷新Echarts組件的教程詳解
- 詳解vue使用Echarts畫(huà)柱狀圖
- Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
- 詳解vue文件中使用echarts.js的兩種方式
- vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
- 在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
- 基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)
相關(guān)文章
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
基于vue3與supabase系統(tǒng)認(rèn)證機(jī)制詳解
這篇文章主要介紹了基于vue3與supabase系統(tǒng)認(rèn)證機(jī)制,,系統(tǒng)使用基于 JWT (JSON Web Token) 的認(rèn)證方式,提供了安全可靠的用戶身份管理機(jī)制,需要的朋友可以參考下2025-04-04
vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁(yè)面空白區(qū)域也隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動(dòng)到頁(yè)面底部無(wú)限加載數(shù)據(jù)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue中使用scrollTo無(wú)效的解決方法，想要使用scrollTo使當(dāng)前網(wǎng)頁(yè)滾動(dòng)到指定位置，本文就來(lái)解決一下，具有一定的 參考價(jià)值，感興趣的可以了解一下2023-08-08
vue3實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊的思路詳解
我們?cè)谧隽斜聿樵兊臅r(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過(guò)n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來(lái)呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊的思路詳解，感興趣的朋友一起看看吧2022-06-06
vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種方法實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09