<style>
  @import "../../css/style.css";
</style>
<style scoped>
  @import "../../css/vue_single_line.css";
</style>
<template>
    <div class="single_line">
       <chart  class="line" :options="singleLine"></chart>
    </div>

</template>



<script>
  import eCharts from 'vue-echarts/components/ECharts'
    export default {
        data() {
            return { }
        },
      created() {  },
      computed:{
        singleLine(){
          return{
            grid: {
             left: '2%',
              right: '2%',
              bottom: '10%',
              containLabel: false
            },
            calculable : true,
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              interval: 0,
              axisTick: {
                show: false,
                inside: true,
                lineStyle: {
                  color: '#10899A'
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#06D3CD'
                }
              },
              axisLabel: {
                rotate: 8,
                color: '#06D3CD',
                fontFamily: 'PingFangSC',
                fontSize: 14,
                fontWeight: 300
              }
            },
            yAxis: {
              type: 'value',
              show: false,
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#06D3CD'
                }
              },
              axisTick: {
                lineStyle: {
                  color: '#10899A'
                },
              },
              axisLabel: {
                showMaxLabel: false,
                color: '#06D3CD',
                fontFamily: 'PingFangSC',
                fontSize: 14,
                fontWeight: 300
              }
            },
            series: [{
              data: [2300,4000,2000,3600,2003,2500, 1000],
              type: 'line',
              smooth: 0.4,
              symbol: "circle",
              symbolSize: 10,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#0635F8'
                  },
                  color: "#F7CD5D",
                  borderWidth: 1,
                  borderColor: '#fff',
                }
              },
              areaStyle: {
                normal: {
                  color: new eCharts.graphic.LinearGradient(
                    0, 0, 0, 1, [
                      {
                      offset: 0,
                      color: '#0635F8'
                    },
                      {
                        offset: 0.5,
                        color: '#72BFE3'
                      },
                      {
                        offset: 1,
                        color: 'rgba(114,191,227,0.3)'
                      }
                    ])
                }
              }
            }]
          }
        }

      }
    }

</script>