<template>
  <ModelBox name='3-1'>
    <div class='line-rate'>
      <div class='legend-box'>
        <div class='legend-item' v-for='(item, index) in legendArr' :key='index'>
          <span class='dot' :style='{backgroundColor: item.color,"--dot-color": item.color}'></span>
          <span class='name'>{{item.name}}</span>
        </div>
      </div>
      <div id='lineRate' style='width: 584px; height: 270px;'></div>
    </div>
  </ModelBox>
</template>
<script>
import * as echarts from 'echarts';
import ModelBox from './ModelBox.vue';
export default {
  name: 'LineRate',
  components: {
    ModelBox
  },
  data() {
    return {
      legendArr:[
        {color:'#FFCE6A', name:'A1'},
        {color:'#21CECD', name:'A2'},
        {color:'#77B4FD', name:'A3'},
        {color:'#29BDFA', name:'A4'},
        {color:'#5A7DDA', name:'A5'},
        {color:'#FFB49D', name:'A6'},
        {color:'#C5A6FC', name:'A7'},
        {color:'#7164FF', name:'A8'},
        {color:'#98B0C7', name:'A9'},
        {color:'#5D7092', name:'A10'}
      ]
    }
  },
  mounted() {
    this.getChart()
  },
  methods: {
    init() {

    },
    getChart() {
      var chartDom = document.getElementById('lineRate');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: ['#FFCE6A', '#21CECD', '#77B4FD', '#29BDFA', '#5A7DDA', '#FFB49D', '#C5A6FC', '#7164FF', '#98B0C7', '#5D7092'],
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 32,
          left: 10,
          right: 15,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show:true,
            lineStyle:{
              color: 'rgba(0,0,0,0.45)'
            }
          },
          data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          },
          axisLine: {
            show:false,
            lineStyle:{
              color: 'rgba(0,0,0,0.45)'
            }
          }
        },
        series: [
          {
            name: 'A1',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            data: [82, 13, 10, 33, 90, 23, 71]
          },
          {
            name: 'A2',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            data: [22, 38, 59, 23, 99, 33, 31]
          },
          {
            name: 'A3',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            data: [15, 43, 20, 95, 89, 33, 41]
          },
          {
            name: 'A4',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            data: [32, 33, 30, 33, 39, 33, 32]
          },
          {
            name: 'A5',
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            data: [82, 93, 90, 93, 29, 33, 32]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>
<style lang='scss' scoped>
.line-rate {
  position: relative;
  .legend-box {
    width: 280px;
    height: 35px;
    position: absolute;
    right: 0;
    top:-20px;
    display: flex;
    flex-flow: row wrap;
    .legend-item {
      width: 55px;
      .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
        position: relative;
      }
      .dot::before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 2px;
        background-color: var(--dot-color);
        position: absolute;
        top:3px;
        left: -3px;
      }
      .name{
        font-size: 14px;
        color: #8C8C8C;
      }
    }
  }
}
</style>