<template>
  <div>
    <container2 title="经营总体走势">
      <div style="height:100%;width:100%;" ref="chart"></div>
    </container2>
  </div>

</template>

<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "../components/container2/index.vue";


import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
  mixins: [resize],
  name: 'right2',
  components: {
    scalseBox,
    bigScreenHead,
    rocketTit,
    container2,
  },
  data () {
    return {
      chart: null,
      option: {
        backgroundColor: '',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: '10',
          data: ['XX零件收入占比', 'XY零件收入占比'],
          textStyle: {
            color: '#fff'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
          splitLine: {
            show: false//不显示网格线
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false//不显示网格线
          },
          splitArea: {
            show: false//不显示网格区域
          },
          axisLabel: {
            formatter: "{value}%"
          },
          min: 0,
          max: 100
        },
        series: [
          {
            name: 'XX零件收入占比',
            type: 'line',
            data: [55, 30, 45, 35, 55, 60, 60],
            smooth: false,
            lineStyle: {
              color: 'rgba(78, 187, 147, 1)'
            },
            areaStyle: {//区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
                }, {
                  offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: 'XY零件收入占比',
            type: 'line',
            data: [45, 70, 50, 65, 45, 35, 40],
            smooth: false,
            lineStyle: {
              color: 'rgba(16,148,249, 1)'
            },
            areaStyle: {//区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
                }, {
                  offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },

        ]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.chart.setOption(this.option);
    }
  }
}
</script>

<style lang="scss" scoped>
.num {
  font-size: 30px;
  font-family: Roboto-Black, Roboto;
  font-weight: 900;
  color: #f6d97e;
  line-height: 35px;
  //   margin-right: 3px;
}
.num2 {
  font-size: 30px;
  font-family: Roboto-Black, Roboto;
  font-weight: 900;
  color: rgba(16, 152, 255, 1);
  line-height: 35px;
}
</style>