基于Vue+echarts編寫一個(gè)折線圖
以下是在Vue中使用ECharts創(chuàng)建折線圖的示例代碼:
1.安裝 ECharts:
npm install echarts --save
2.導(dǎo)入 ECharts:
import echarts from 'echarts'
3.在 Vue 組件中創(chuàng)建一個(gè) div 元素,用于放置圖表:
<template> <div id="chart" style="height: 300px;"></div> </template>
4.在 Vue 組件的 mounted()
方法中,使用 ECharts 創(chuàng)建折線圖:
export default { mounted () { // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 const myChart = echarts.init(document.getElementById('chart')) // 指定圖表的配置項(xiàng)和數(shù)據(jù) const option = { title: { text: '折線圖示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["周一","周二","周三","周四","周五","周六","周日"] }, yAxis: {}, series: [{ name: '銷量', type: 'line', data: [5, 20, 36, 10, 10, 20, 8] }] } // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表 myChart.setOption(option) } }
5.運(yùn)行 Vue 應(yīng)用程序,查看折線圖效果如下
在Vue中使用ECharts動(dòng)態(tài)設(shè)置X軸,您可以使用Vue的生命周期方法在組件初始化后或在數(shù)據(jù)變化時(shí)重新設(shè)置X軸。 下面是一個(gè)示例代碼片段,其中 xAxisData
是您要?jiǎng)討B(tài)設(shè)置的X軸數(shù)據(jù),將在組件的props中進(jìn)行傳遞,也可以在組件中進(jìn)行定義。
<template> <div id="chart" style="height: 300px;"></div> </template> <script> import echarts from 'echarts' export default { props: { xAxisData: { type: Array, default: () => [] } }, data() { return { chart: null } }, mounted() { this.initChart() }, updated() { this.setOption() }, methods: { initChart() { this.chart = echarts.init(this.$el) this.setOption() }, setOption() { const option = { xAxis: { type: 'category', data: this.xAxisData }, ... } this.chart.setOption(option) } } } </script>
在此示例代碼中,我們在組件的 updated
生命周期方法中更新圖表,以便在 xAxisData
更新時(shí)設(shè)置X軸。同時(shí),我們在 initChart()
方法中初始化圖表,并在 setOption()
方法中設(shè)置圖表選項(xiàng)。
注意,我們還將ECharts實(shí)例保存在了組件的 data
對象中,以便我們可以在 setOption()
方法中使用該實(shí)例更新圖表。
到此這篇關(guān)于基于Vue+echarts編寫一個(gè)折線圖的文章就介紹到這了,更多相關(guān)Vue echarts折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue設(shè)置頁面超時(shí)15分鐘自動(dòng)退出登錄的方法詳解
當(dāng)用戶登錄后,如果長時(shí)間未操作頁面這個(gè)時(shí)候需要自動(dòng)退出登錄回到登錄頁面,本文將給大家介紹一下vue設(shè)置頁面超時(shí)15分鐘自動(dòng)退出登錄的方法,感興趣的同學(xué)可以自己動(dòng)手試一下2023-10-10Element UI 自定義正則表達(dá)式驗(yàn)證方法
今天小編就為大家分享一篇Element UI 自定義正則表達(dá)式驗(yàn)證方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Element-ui tree組件自定義節(jié)點(diǎn)使用方法代碼詳解
本文通過實(shí)例代碼給大家介紹了Element-ui tree組件自定義節(jié)點(diǎn)使用方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
在開發(fā)中我們處理數(shù)據(jù)時(shí)會(huì)遇到數(shù)據(jù)更新了,但視圖并沒有更新,這種情況往往是數(shù)據(jù)嵌套層數(shù)過多導(dǎo)致的問題,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法,需要的朋友可以參考下2022-11-11Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04