<template>
  <div>
    <div ref="histogramChart" style="padding: 0px;" :style="{ width: width, height: height }" />
  </div>
</template>

<script>
export default {
  props: {
    titletext: { // 标题名称
      type: String,
      default: ''
    },
    optiondata: { // 数据
      type: Array,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      myChart: []
    }
  },
  watch: {
    optiondata: function() {
      this.initializationData()
    }
  },
  mounted() {
    this.initializationData()
  },
  methods: {
    initializationData() {
      var myChart = this.$echarts.init(this.$refs.histogramChart)
      myChart.clear()
      this.myChart = myChart
      var xAxisData = ['2022-4-14', '2022-4-15', '2022-4-16', '2022-4-17', '2022-4-18', '2022-4-19', '2022-4-20']
      // var legendData = ['热热热/风力', 'DDS25/风力', 'SXJ900型架桥机/风力', 'TLJ900型架桥机/风力', '热热热/风速', 'DDS25/风速', 'SXJ900型架桥机/风速', 'TLJ900型架桥机/风速']

      var legendData = ['热热热', 'DDS25', 'SXJ900型架桥机', 'TLJ900型架桥机']

      var seriesData = [
        {
          name: '热热热',
          data: [220, 100, 151, 70, 110, 120, 100],
          type: 'bar'
        }, {
          name: 'DDS25',
          data: [120, 200, 120, 90, 88, 222, 80],
          type: 'bar'
        }, {
          name: 'SXJ900型架桥机',
          data: [120, 200, 130, 100, 100, 211, 98],
          type: 'bar'
        }, {
          name: 'TLJ900型架桥机',
          data: [120, 200, 140, 110, 90, 123, 120],
          type: 'bar'
        }, {
          name: '热热热',
          yAxisIndex: 1,
          data: [20, 10, 11, 7, 14, 12, 10],
          type: 'line'
        }, {
          name: 'DDS25',
          yAxisIndex: 1,
          data: [10, 15, 21, 19, 15, 25, 21],
          type: 'line'
        }, {
          name: 'SXJ900型架桥机',
          yAxisIndex: 1,
          data: [10, 14, 25, 12, 11, 24, 22],
          type: 'line'
        }, {
          name: 'TLJ900型架桥机',
          yAxisIndex: 1,
          data: [10, 13, 26, 11, 12, 23, 25],
          type: 'line'
        }

      ]
      // if (this.optiondata.length > 0) {

      // }
      this.myEcharts(xAxisData, legendData, seriesData)
    },
    myEcharts(xAxisData, legendData, seriesData) {
      // 基于准备好的dom，初始化echarts实例
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(datas) {
            let res = datas[0].name + '<br/>'
            for (const i in datas) {
              const dw = datas[i].componentSubType === 'bar' ? 'm/h' : 'm/s'
              const bz = datas[i].componentSubType === 'bar' ? '/风力' : '/风速'
              const color = datas[i].componentSubType === 'bar' ? '#3e72c5' : '#17a2b8' // '#3e72c5', '#17a2b8'
              res += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + ';"></span>' + datas[i].seriesName + bz + '：' + datas[i].value + ' ' + dw + '<br/>'
            }
            return res
          }
        },
        grid: {
          top: '10%',
          left: '25%',
          right: '7%',
          bottom: '15%'
        },
        toolbox: {

        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: xAxisData
        },
        legend: {
          data: legendData,
          orient: 'vertical',
          left: 'left',
          padding: [
            10, // 上
            10, // 右
            5, // 下
            23 // 左
          ]
        },
        dataZoom: [
          {
            type: 'slider', // 数据滑块
            start: 0,
            end: 100,
            minSpan: 5, // 5min
            height: 25,
            bottom: '0%',
            dataBackground: {
              lineStyle: {
                color: '#95BC2F'
              },
              areaStyle: {
                color: '#95BC2F',
                opacity: 1
              }
            }
          },
          {
            type: 'inside'// 使鼠标在图表中时滚轮可用
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '风力',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} m/h'
            }
          },
          {
            type: 'value',
            name: '风速',
            alignTicks: true,
            splitLine: {
              // 网格线
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value} m/s'
            }
          }],
        series: seriesData,
        color: ['#3e72c5', '#17a2b8', '#20c997', '#00c0ef', '#0066FF', '#5599FF', '#33CCFF', '#9F88FF', '#99BBFF', '#00BBFF']
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>
