基于Vue+echarts編寫一個折線圖
以下是在Vue中使用ECharts創(chuàng)建折線圖的示例代碼:
1.安裝 ECharts:
npm install echarts --save
2.導入 ECharts:
import echarts from 'echarts'
3.在 Vue 組件中創(chuàng)建一個 div 元素,用于放置圖表:
<template> <div id="chart" style="height: 300px;"></div> </template>
4.在 Vue 組件的 mounted()
方法中,使用 ECharts 創(chuàng)建折線圖:
export default { mounted () { // 基于準備好的dom,初始化echarts實例 const myChart = echarts.init(document.getElementById('chart')) // 指定圖表的配置項和數據 const option = { title: { text: '折線圖示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["周一","周二","周三","周四","周五","周六","周日"] }, yAxis: {}, series: [{ name: '銷量', type: 'line', data: [5, 20, 36, 10, 10, 20, 8] }] } // 使用剛指定的配置項和數據顯示圖表 myChart.setOption(option) } }
5.運行 Vue 應用程序,查看折線圖效果如下
在Vue中使用ECharts動態(tài)設置X軸,您可以使用Vue的生命周期方法在組件初始化后或在數據變化時重新設置X軸。 下面是一個示例代碼片段,其中 xAxisData
是您要動態(tài)設置的X軸數據,將在組件的props中進行傳遞,也可以在組件中進行定義。
<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
更新時設置X軸。同時,我們在 initChart()
方法中初始化圖表,并在 setOption()
方法中設置圖表選項。
注意,我們還將ECharts實例保存在了組件的 data
對象中,以便我們可以在 setOption()
方法中使用該實例更新圖表。
到此這篇關于基于Vue+echarts編寫一個折線圖的文章就介紹到這了,更多相關Vue echarts折線圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Element-ui tree組件自定義節(jié)點使用方法代碼詳解
本文通過實例代碼給大家介紹了Element-ui tree組件自定義節(jié)點使用方法 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴格開發(fā),去掉vue-cli安裝時的eslint或修改配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04