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">
  <div role="group" aria-label="Basic example" class="btn-group btn-group-zoom">
    <!---->
    <button type="button" class="btn" @click="setPeriod(5)">
    5D</button>
    <button type="button" class="btn" @click="setPeriod(30)">
    1M</button>
    <button type="button" class="btn" @click="setPeriod(180)">
    6M</button>
    <button type="button" class="btn" @click="setPeriod(365)">
    1Y</button>
    <button type="button" class="btn" @click="setPeriod(1825)">
    5Y</button>
    <button type="button" class="btn">MAX</button>
    <!---->
    <button type="button" class="btn" @click="createLineChart()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.3 841.9" enable-background="new 0 0 595.3 841.9" width="26" height="26"><path d="M142.5 447.4c-102.74 102.74-83.44 83.44 0 0m399-186.2l-70.9 94.6H370.1l-136 159.6-91.6-112.3-38.5 41.4L6.5 542l41.4 41.4 94.6-94.6 91.6 112.3 162.6-186.2h103.5l88.7-118.2z" opacity="1"></path><!----></svg>
    </button>
    <!---->
    <button type="button" class="btn" @click="createCandlestickChart()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" enable-background="new 0 0 595.3 841.9" width="26" height="26"><path d="M16 3v3h-2v12h2v5h1v-5h2V6h-2V3h-1zM9 4v5H7v11h2v3h1v-3h2V9h-2V4H9z" opacity="1"></path><!----></svg>
    </button>
    <!---->
    <button type="button" class="btn" @click="createLineChart('area')">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.3 841.9" enable-background="new 0 0 595.3 841.9" width="26" height="26"><path d="M453.8 360.2l-92.1 6L234 517.7l-86.2-86.1L5.2 514.7v118.9h585.3V268.1z" opacity="0.3"></path><path d="M234 508.8c-156 222.067-78 111.033 0 0zm309-276.3l-71.3 95.1h-101L236.9 488l-92.1-112.9-38.6 41.6-101 98.1 41.6 41.6 95.1-95.1L234 574.2 397.4 387h104l89.1-118.9z"></path></svg>
  ...

JavaScript

// 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: [],
    upColor: '#ec0000',
    upBorderColor: '#8A0000',
    downColor: '#00da3c',
    downBorderColor: '#008F28',
    selectedChart: 'candlestick',
    period: 98,
    hasOption: false,
  },
  created() {
    var self = this
    axios
      .get(this.url)
      .then((response) => {

        this.financials = response.data.historical;
        this.createCandlestickChart();

      })
      .catch((error) => {
       console.log(error)
      })

    axios
      .get(this.urlLine)
      .then((response) => {

        this.financialsLine = response.data.historical;

      })
      .catch((error) => {
       console.log(error)
      })
  },

  methods: {

    createCandlestickChart() {

      this.selectedChart = 'candlestick';

      let data = this.splitData([...this.financials]);

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['MA5', 'MA10', 'MA20', 'MA30']
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data.categoryData,
          scale: true,
          boundaryGap: true,
          axisLine: {
            onZero: false
          },
          splitLine: {
            show: false
          },
          splitNumber: 20,
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          },
  ...