<template>
  <div>
    <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
  </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'

export default {
  data() {
    return {
      chart: null
    }
  },
  mixins: [echartMixins],
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById('bottomLeftChart'))
      //  ----------------------------------------------------------------
      let category = [
        'TULE',
        'EMPI',
        'LIS',
        'HIS',
        'EMR',
        'ZSJ',
        'HIS_SYNC2',
        'YYGH',
        'ZSJTB',
        'PACS',
        'HIS_SYNC',
        'TUL'
        // "垫江",
        // "丰都",
        // "奉节",
        // "合川",
        // "江津区",
        // "开州",
        // "南川",
        // "彭水",
        // "黔江",
        // "石柱",
        // "铜梁",
        // "潼南",
        // "巫山",
        // "巫溪",
        // "武隆",
        // "秀山",
        // "酉阳",
        // "云阳",
        // "忠县",
        // "川东",
        // "检修"
      ]
      let lineData = [
        18092,
        20728,
        24045,
        28348,
        32808,
        36097,
        39867,
        44715,
        48444,
        50415,
        56061,
        56061
        //59521,
        // 67560,
        // 18092,
        // 20728,
        // 24045,
        // 28348,
        // 32808,
        // 36097,
        // 39867,
        // 44715,
        // 48444,
        // 50415,
        // 36097,
        // 39867,
        // 44715,
        // 48444,
        // 50415,
        // 50061,
        // 32677,
        // 49521,
        // 32808
      ]
      let barData = [
        4600,
        5000,
        5500,
        6500,
        7500,
        8500,
        9900,
        12500,
        14000,
        21500,
        23200,
        24450
        // 25250,
        // 33300,
        // 4600,
        // 5000,
        // 5500,
        // 6500,
        // 7500,
        // 8500,
        // 9900,
        // 22500,
        // 14000,
        // 21500,
        // 8500,
        // 9900,
        // 12500,
        // 14000,
        // 21500,
        // 23200,
        // 24450,
        // 25250,
        // 7500
      ]
      let rateData = []
      for (let i = 0; i < 12; i++) {
        let rate = barData[i] / lineData[i]
        rateData[i] = rate.toFixed(2)
      }

      let option = {
        title: {
          text: '',
          x: 'center',
          y: 0,
          textStyle: {
            color: '#B4B4B4',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.1)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#7B7DDC'
            }
          }
        },
        legend: {
          data: ['成功次数', '调用次数', '成功率'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0%'
        },
        grid: {
          x: '8%',
          width: '88%',
          y: '4%'
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },

            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            name: '成功率',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#F02FC2'
              }
            },
            data: rateData
          },

          {
            name: '成功次数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#3EACE5' }
                ])
              }
            },
            data: barData
          },

          {
            name: '调用次数',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(156,107,211,0.8)' },
                  { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
                  { offset: 1, color: 'rgba(156,107,211,0.2)' }
                ])
              }
            },
            z: -12,

            data: lineData
          }
        ]
      }
      this.chart.setOption(option)
    }
  },
  destroyed() {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>
</style>
