<!-- 地图 -->
<template>
  <div id="myCharts"
       :style="{ width: '100%', height: '100%' }"
       :date="date"
       :bigData="bigData"
       :sData="sData"
       :middleData="middleData"></div>
</template>

<script>
import * as echarts from "echarts";
import resize from './mixins/resize'
require('echarts/theme/dark') // echarts theme

export default {
  mixins: [resize],
  props: {
    date: {
      type: Array,
      default: () => []
    },
    bigData: {
      type: Array,
      default: () => []
    },
    middleData: {
      type: Array,
      default: () => []
    },
    sData: {
      type: Array,
      default: () => []
    },
  },
  watch: {
    "date": {
      handler (newVal, oldVal) {
        if (newVal) {
          this.date = newVal
          this.initChart()
        } else {
          this.date = oldVal
          this.initChart()
        }
      }
    },
    "bigData": {
      handler (newVal, oldVal) {
        if (newVal) {
          this.bigData = newVal
          this.initChart()
        } else {
          this.bigData = oldVal
          this.initChart()
        }
      }
    },
    "middleData": {
      handler (newVal, oldVal) {
        if (newVal) {
          this.middleData = newVal
          this.initChart()
        } else {
          this.middleData = oldVal
          this.initChart()
        }
      }
    },
    "sData": {
      handler (newVal, oldVal) {
        if (newVal) {
          this.sData = newVal
          this.initChart()
        } else {
          this.sData = oldVal
          this.initChart()
        }
      }
    },
  },
  data () {
    return {
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'dark')
      this.chart.setOption(
        {

          backgroundColor: 'rgba(0,0,0,0)',//图表整体背景颜色
          legend: {
            orient: 'horizontal',   // 水平
            icon: "circle",
            top: 'top',
            itemGap: 20,            // 间隔
            itemWidth: 20,          // 图形宽度。
            itemHeight: 20,         // 图形高度。
            borderWidth: 0,
            textStyle: {
              fontSize: 22,
              color: '#ffffff',
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                backgroundColor: '#0095ff'
              }
            },
            textStyle: {
              fontSize: 18,
              color: '#ffffff',
            }
          },
          grid: {
            top: '15%',
            left: '12%',
            right: '1%',
            bottom: '15%',
            // containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              axisLabel: {
                color: '#fff',
                textStyle: {
                  fontSize: 18,
                  color: '#ffffff',
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {       //y轴刻度线
                "show": false
              },
              boundaryGap: true,
              data: this.date,
            },
          ],

          yAxis: [
            {
              type: 'value',
              min: 0,
              // max: 140,
              // splitNumber: 4,
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)',
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#56a4cd',
                },
              },
              axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                  fontSize: 18,
                  color: '#ffffff',
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: '大笋',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                normal: {
                  color: '#00b3f4',
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 18,
                  color: '#00b3f4',
                },
              },
              itemStyle: {
                color: '#00b3f4',
                borderColor: '#fff',
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              data: this.bigData,
            },
            {
              name: '中笋',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                normal: {
                  color: '#00ca95',
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 18,
                  color: '#00ca95',
                },
              },

              itemStyle: {
                color: '#00ca95',
                borderColor: '#fff',
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              data: this.middleData,
            },
            {
              name: '小笋',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 10,
              lineStyle: {
                normal: {
                  color: '#ffde32',
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 18,
                  color: '#ffde32',
                },
              },

              itemStyle: {
                color: '#ffde32',
                borderColor: '#fff',
                borderWidth: 1,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              data: this.sData,
            }
          ],
        }
      )
    }

  }
}
</script>

<style  scoped>
</style>
