Vue+Echarts實(shí)現(xiàn)繪制動態(tài)折線圖
1 引入Echarts
1.1 安裝
使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
注:本文安裝Echarts版本為:“echarts”: “5.2.1”
1.2 引入
安裝完成以后,可以將echarts全部引入,這樣一來,我們可以在該頁面使用echarts所有組件;引入代碼如下:
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用請見:在Vue項(xiàng)目中引入 ECharts
2 動態(tài)折線圖
2.1 基本折線圖
折線圖得基本引入使用見:vue引入Echarts畫折線圖
2.2 動態(tài)折線圖
動態(tài)折線圖分兩種,一種為動渲染靜態(tài)數(shù)據(jù),產(chǎn)生動態(tài)變化得動畫效果的折線圖,另一種為動態(tài)渲染動態(tài)數(shù)據(jù)產(chǎn)生折線圖;一下給出我國人口總數(shù)20年變化示例。如圖所示:
實(shí)現(xiàn)以上效果最重要的就是利用Echarts中的動畫屬性animation;并使用animationDuration控制動畫時間;配置項(xiàng)代碼如下:
const optionFree = { xAxis: { data: this.xData }, yAxis: { name: "人口(萬)", min: "120000", max: "150000" }, animation: true, animationDuration: 20000, series: [ { data: this.populationData, type: "line", smooth: true, endLabel: { show: true } } ] };
以上動圖效果中還是用了endLabel屬性控制在折線最后展示數(shù)值。
補(bǔ)充
除了上文的實(shí)現(xiàn)方法,小編還為大家整理了更多動態(tài)折線圖的實(shí)現(xiàn)方法,希望對大家有所幫助
實(shí)現(xiàn)代碼
<template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 實(shí)時數(shù)據(jù)數(shù)組 date: [], yieldRate: [], yieldIndex: [], // 折線圖echarts初始化選項(xiàng) echartsOption: { legend: { data: ['實(shí)際收益率', '大盤收益率'], }, xAxis: { name: '時間', nameTextStyle: { fontWeight: 600, fontSize: 18 }, type: 'category', boundaryGap: false, data: this.date, // 綁定實(shí)時數(shù)據(jù)數(shù)組 }, yAxis: { name: '實(shí)際收益率', nameTextStyle: { fontWeight: 600, fontSize: 18 }, type: 'value', scale: true, boundaryGap: ['15%', '15%'], axisLabel: { interval: 'auto', formatter: '{value} %' } }, tooltip: { trigger: 'axis', }, series: [ { name:'實(shí)際收益率', type:'line', smooth: true, data: this.yieldRate, // 綁定實(shí)時數(shù)據(jù)數(shù)組 }, { name:'大盤收益率', type:'line', smooth: true, data: this.yieldIndex, // 綁定實(shí)時數(shù)據(jù)數(shù)組 } ] } } }, mounted () { this.myChart = echarts.init(document.getElementById('myChart'), 'light'); // 初始化echarts, theme為light this.myChart.setOption(this.echartsOption); // echarts設(shè)置初始化選項(xiàng) setInterval(this.addData, 3000); // 每三秒更新實(shí)時數(shù)據(jù)到折線圖 }, methods: { // 獲取當(dāng)前時間 getTime : function() { var ts = arguments[0] || 0; var t, h, i, s; t = ts ? new Date(ts * 1000) : new Date(); h = t.getHours(); i = t.getMinutes(); s = t.getSeconds(); // 定義時間格式 return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s); }, // 添加實(shí)時數(shù)據(jù) addData : function() { // 從接口獲取數(shù)據(jù)并添加到數(shù)組 this.$axios.get('url').then((res) => { this.yieldRate.push((res.data.actualProfitRate * 100).toFixed(3)); this.yieldIndex.push((res.data.benchmarkProfitRate * 100).toFixed(3)); this.date.push(this.getTime(Math.round(new Date().getTime() / 1000))); // 重新將數(shù)組賦值給echarts選項(xiàng) this.echartsOption.xAxis.data = this.date; this.echartsOption.series[0].data = this.yieldRate; this.echartsOption.series[1].data = this.yieldIndex; this.myChart.setOption(this.echartsOption); }); } } } </script> <style> // 設(shè)定寬高,不然超出windows會顯示不出來 #myChart{ width: 100%; height: 500px; margin: 0 auto; } </style>
要注意的有三點(diǎn):
- mounted中init并setOption初始化echarts
- echartsOption里的data綁定數(shù)組
- setInterval中要更新數(shù)組并重新將數(shù)組賦值給echarts選項(xiàng)
到此這篇關(guān)于Vue+Echarts實(shí)現(xiàn)繪制動態(tài)折線圖的文章就介紹到這了,更多相關(guān)Vue Echarts繪制動態(tài)折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue報錯:TypeError:?Cannot?create?property?‘xxxx‘?on的解決
這篇文章主要介紹了Vue報錯:TypeError:?Cannot?create?property?‘xxxx‘?on的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型
本文主要介紹了vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容
這篇文章主要給大家介紹了關(guān)于el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗(yàn)證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下2023-10-10關(guān)于vue-cli 3配置打包優(yōu)化要點(diǎn)(推薦)
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue組件之間通信方式實(shí)例總結(jié)【8種方式】
這篇文章主要介紹了vue組件之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js的8種組件通信方式與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02