Echarts financialmodelingprep API with VueJS

Echarts financialmodelingprep API with VueJS

by Financial Modeling Prep

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="app">
 <button @click="line()">line</button>
  <div id="main" style="width: 600px;height:400px;"></div>
</div>

JavaScript

var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';

// https://financialmodelingprep.com/developer/docs
var app = new Vue({
  el: "#app",
  data: {
    url: 'https://financialmodelingprep.com/api/v3/technical/company/historical-price/AAPL?apikey=demo&serietype=candle&datatype=json&serieformat=array',
    urlLine: 'https://financialmodelingprep.com/api/v3/technical/company/historical-price/AAPL?apikey=demo&serietype=line&datatype=json&serieformat=array',
    financials: [],
    financialsLine: [],
    loaded: false,
    searchQuery: '',
  },
  created: function() {
    var self = this
    axios
      .get(this.url)
      .then((response) => {

        this.financials = response.data.historical;
        
        this.createChart();
      })
      .catch((error) => {
        alert('error');
      })
      
    axios
      .get(this.urlLine)
      .then((response) => {

        this.financialsLine = response.data.historical;
        
        this.createChart();
      })
      .catch((error) => {
        alert('error');
      })
  },
  mounted() {
  
  },
  
  methods: {
  
  createChart() {
  
  
  
  


  
  	 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

    var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';


// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
var data0 = this.splitData(this.financials);



function calculateMA(dayCount) {
    var result = [];
    for (var i = 0, len = data0.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data0.values[i - j][1];
        }
        result.push(sum / dayCount);
    }
    return result;
}



option = {
    title: {
        text: '上证指数',
        left: 0
    },
    tooltip: {
       ...