在vue中使用echarts的方法以及可能遇到的問題
更新時間：2022年09月06日 10:50:22 作者：銀-河
Echarts是一個與框架無關(guān)的JS圖表庫,但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問題的相關(guān)資料,需要的朋友可以參考下
1、安裝
npm install echarts --save
2、在vue中引入（全局引入）
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、在vue中的使用
需要用到echart的地方先設(shè)置一個div的id、寬高
提示：
可以在一個頁面中引入多個數(shù)據(jù)報表模板
使用div進行位置的排版放置
4、模板代碼放在哪個位置
重點注意：其中const option = { }就是我們需要引進echart圖表的代碼
<template>
<div>
<div ref="chart" style="width:50%;height:376px"></div>
</div>
</template>
要在mounted生命周期函數(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、完整的一個vue頁面實例：
<template>
<div>
<div ref="chart" style="width:50%;height:376px"></div>
<div ref="chart1" style="width:50%;height:376px"></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、實現(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
總結(jié)
到此這篇關(guān)于在vue中使用echarts的方法以及可能遇到問題的文章就介紹到這了,更多相關(guān)vue中使用echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強行將data寫成對象的可能性，需要的朋友可以參考下2022-09-09
Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vuex實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
VUE2.0+Element-UI+Echarts封裝的組件實例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了Vue實現(xiàn)路由跳轉(zhuǎn)和嵌套，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中可以綁定多個事件嗎，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue element中axios下載文件（后端Python）
這篇文章主要介紹了vue element中axios下載文件（后端Python）的實例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇vue動態(tài)設(shè)置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解Vue中的Props與Data細(xì)微差別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03