LineSimple.vue 3.3 KB
Newer Older
shabai517's avatar
shabai517 committed
1
<template>
shabai517's avatar
shabai517 committed
2 3
  <div>
        <chart class="line-simple" :options="options" :auto-resize="true"></chart>
shabai517's avatar
shabai517 committed
4
  </div>
5

shabai517's avatar
shabai517 committed
6 7 8 9
</template>
<script>
export default {
  data: function () {
10
    //let data =
shabai517's avatar
shabai517 committed
11
    return {
shabai517's avatar
shabai517 committed
12 13
      lineYearApi:'http://ves-pg-41:9020/stats/SUBMISSIONS_PER_YEAR',
      lineMonthApi:'http://ves-pg-41:9020/stats/SUBMISSIONS_PER_MONTH',
shabai517's avatar
shabai517 committed
14 15
      options: {
        title: {
16
          text: 'Public submission',
shabai517's avatar
shabai517 committed
17 18 19 20 21
          textStyle:{
            fontSize:14,
            fontWeight:'normal',
          },
          padding:[10,0,0,10]
shabai517's avatar
shabai517 committed
22 23 24 25
        },
        tooltip: {
            trigger: 'axis'
        },
shabai517's avatar
shabai517 committed
26 27 28 29 30
        grid:{
          left:'12%',
          top: 70,
          right:'12%'
        },
shabai517's avatar
shabai517 committed
31 32 33
        xAxis: {
            type: 'category',
            boundaryGap: false,
shabai517's avatar
shabai517 committed
34 35 36 37 38 39 40 41 42 43 44 45
            name:'Years',
            nameLocation:'end',
            /*offset:10,*/
            nameGap:8,
            nameTextStyle:{
              align:'right',
              /*color:'red',*/
              verticalAlign:'top'
            },
            axisLabel:{
              margin:20,
            }
shabai517's avatar
shabai517 committed
46 47
        },
        yAxis: {
shabai517's avatar
shabai517 committed
48 49 50 51 52 53 54 55 56
            name:'Num',
            nameLocation:'end',
            /*offset:-10,*/
            nameGap:8,
            nameTextStyle:{
              align:'middle',
              /*color:'red',*/
              verticalAlign:'top'
            },
shabai517's avatar
shabai517 committed
57 58
            splitLine: {
                show: false
shabai517's avatar
shabai517 committed
59 60 61
            },
            axisLabel:{
              margin:15,
shabai517's avatar
shabai517 committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
            }
        },
        /*
        toolbox: {
            left: 'center',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },*/
        /*
        dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
shabai517's avatar
shabai517 committed
80
        }],*/
shabai517's avatar
shabai517 committed
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
        /*
        visualMap: {
            top: 10,
            right: 10,
            pieces: [{
                gt: 0,
                lte: 50,
                color: '#096'
            }, {
                gt: 50,
                lte: 100,
                color: '#ffde33'
            }, {
                gt: 100,
                lte: 150,
                color: '#ff9933'
            }, {
                gt: 150,
                lte: 200,
                color: '#cc0033'
            }, {
                gt: 200,
                lte: 300,
                color: '#660099'
            }, {
                gt: 300,
                color: '#7e0023'
            }],
            outOfRange: {
                color: '#999'
            }
        },*/
        series: [
              {
shabai517's avatar
shabai517 committed
115
                  name:'SUBMISSIONS_PER_YEAR',
shabai517's avatar
shabai517 committed
116
                  type:'line',
shabai517's avatar
shabai517 committed
117
                  data:[0,0]
shabai517's avatar
shabai517 committed
118 119 120 121 122 123
              }
        ]
      }
    }
  },
  methods:{
shabai517's avatar
shabai517 committed
124
      setOptions(data){
shabai517's avatar
shabai517 committed
125 126 127 128 129 130 131 132
        let xValue = [];
        let yValue = [];
        for(let i=0; i<data.length; i++){
          xValue.push(data[i].key);
          yValue.push(data[i].value);
        }
        this.options.xAxis.data = xValue;
        this.options.series[0].data = yValue;
shabai517's avatar
shabai517 committed
133 134 135 136
    }
  },
  created(){
    this.$bus.$on('show-simple-line', this.setOptions);
shabai517's avatar
shabai517 committed
137
  },
shabai517's avatar
shabai517 committed
138 139 140
  beforeCreate:function(){
    this.$bus.$off('show-simple-line');
  }
shabai517's avatar
shabai517 committed
141 142 143
}
</script>

shabai517's avatar
shabai517 committed
144 145
<style>
.echarts.line-simple  {
shabai517's avatar
shabai517 committed
146 147 148
  height: 400px !important;
  width: auto !important;
}
149
</style>