現(xiàn)實(shí)的工作中, 數(shù)據(jù)不可能寫死的，所有的數(shù)據(jù)都應(yīng)該通過發(fā)送請(qǐng)求進(jìn)行獲取。所以本項(xiàng)目的需求是請(qǐng)求服務(wù)器獲得二維數(shù)組，并生成曲線圖。曲線圖的橫縱坐標(biāo)均從獲得的數(shù)據(jù)中取得。Echarts官方文檔：

https://ecomfe.github.io/echarts-doc/public/en/index.html

前端框架使用vue，服務(wù)器使用express搭建，交互使用axios。

一.引入vue-resource

通過npm下載vue-resource

npm install vue-resource --save

在main.js中引入vue-resource并注冊(cè)

// main.jsimport VueResource from ’vue-resource’ Vue.use(VueResource)

二.設(shè)置aysnc-lineChart-option.js

將該曲線圖的沒有數(shù)據(jù)的option抽取到async-lineChart-option.js中。

此代碼在src/echarts/aysnc-lineChart-option.js文件中，代碼如下。

export const option = { title: { text: ’曲線圖’ }, backgroundColor: ’#FBFBFB’, tooltip: { trigger:’axis’ }, xAxis: { data: [], name: ’id’ }, yAxis: {}, series: [{ name: ’data’, type: ’line’, data: [], smooth : true, itemStyle: { normal: {color: ’hotpink’ } } }]}

三.在Curve.vue中請(qǐng)求數(shù)據(jù)

　 1.從async-lineChart-option.js中引入option

2.在methods中添加drawLineChart()方法

3.在mounted()鉤子函數(shù)中調(diào)用drawBarChart()

4.添加加載動(dòng)畫，在drawLineChart()方法中添加showLoading()和hideLoading()

此代碼在src/views/Curve.vue中，代碼如下：

<script> import {option} from ’../echarts/aysnc-lineChart-option.js’ //從aysnc-lineChart-option.js中引入option export default { name: ’Curve’, mounted() { //調(diào)用drawLineChart() this.drawLineChart(); }, data () { return { } }, methods:{drawLineChart() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = this.$echarts.init(document.getElementById(’myChart’));// 繪制基本圖表myChart.setOption(option);//顯示加載動(dòng)畫myChart.showLoading();//獲取數(shù)據(jù)this.$axios.get(’/getdate’).then(res => { //將json對(duì)象的所有id數(shù)據(jù)組成一個(gè)數(shù)組 var id = []; for(let i = 0;i < res.data.length;i++){ id.push(res.data[i].id); } //將json對(duì)象中的所有data數(shù)據(jù)組成一個(gè)數(shù)組 var data = []; for(let i = 0;i < res.data.length;i++){ data.push(res.data[i].data); } setTimeout(()=>{ //為了讓加載動(dòng)畫效果明顯,這里加入了setTimeout,實(shí)現(xiàn)300ms延時(shí) myChart.hideLoading(); //隱藏加載動(dòng)畫 myChart.setOption({ xAxis: {data: id }, series: [{ data: data }] }) }, 300 )}) }, }, };</script>

四.效果圖

以上就是在vue中使用Echarts畫曲線圖的示例的詳細(xì)內(nèi)容，更多關(guān)于vue Echarts畫曲線圖的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！