使用echarts制作動態折線圖

有沒有大神知道vue中如何使用echarts制作動態折線圖，并且橫軸為當前時間。
折線為兩條，折線圖資料每5秒請求回來一個值動態添加到折線資料中

uj5u.com熱心網友回復：

看下api檔案就可以了，另外你這個每五秒發送一次請求，需要動態渲染，說實話互動不友好

uj5u.com熱心網友回復：

<template>
<div id="WorkView">
<button @click="drawWorkViewChartByCondition">點擊按鈕開始影片</button>
<chart ref="chart1" :options="option" :auto-resize="true" style="width:1100px;height:1000px;"></chart>
</div>
</template>

<script>

import echarts from 'echarts'
import Vue from 'vue'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

export default {
  name: 'WorkView',
  data() {
    return {
      option: {}
    }
  },
  methods: {
    drawWorkViewChartByCondition() {


        // 指定圖表的配置項和資料
        this.option = {
            tooltip: {              //設定tip提示
                trigger: 'axis'
            },
            legend: {               //設定區分（哪條線屬于什么）
                data:['平均成績','學生成績']
            },
            color: ['#8AE09F', '#FA6F53'],       //設定區分（每條線是什么顏色，和 legend 一一對應）
            xAxis: {                //設定x軸
                type: 'category',
                boundaryGap: false,     //坐標軸兩邊不留白
                data: ['2019-1-1', '2019-2-1', '2019-3-1', '2019-4-1', '2019-5-1', '2019-6-1', '2019-7-1', '2019-8-1', '2019-9-1',],
                name: 'DATE',           //X軸 name
                nameTextStyle: {        //坐標軸名稱的文字樣式
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                },
                axisLine: {             //坐標軸軸線相關設定。
                    lineStyle: {
                        color: '#FA6F53',
                    }
                }
            },
            yAxis: {
                name: 'SALES VOLUME',
                nameTextStyle: {
                    color: '#FA6F53',
                    fontSize: 16,
                    padding: [0, 0, 10, 0]
                },
                axisLine: {
                    lineStyle: {
                        color: '#FA6F53',
                    }
                },
                type: 'value'
            },
            series: [
              {
                name: '平均成績',
                data:  [],
                type: 'line',               // 型別為折線圖
                lineStyle: {                // 線條樣式 => 必須使用normal屬性
                    normal: {
                        color: '#8AE09F',
                    }
                },
              },
              {
                name: '學生成績',
                data: [],
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#FA6F53',
                    }
                },
              }
          ]
        };

        var index1 = 200;
        var index2 = 300;
        var _this = this;

        window.setInterval(function(){
          index1 += 10;
          index2 += 10;
          _this.option.series[0].data.push(index1);
          _this.option.series[1].data.push(index2);
        }, 5000);




    }
  }
}

</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/152735.html

標籤：其他

上一篇：求大神指點我這個代碼哪邊有錯誤嗎

下一篇：Extjs下載問題