<template>
  <div style="background: #f0f4fa;border-radius: 8px" class="mv10 p10">
    <div :id="echartsId" style="width: 100%;height: 100%"></div>
  </div>
</template>
<script>
import '@/assets/js/business-common'
import uuid from 'uuid'
export default {
  name: 'overveiw',
  data() {
    return {
      echartsId: 'main-' + uuid()
    }
  },
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        }
      },
      required: true
    }
  },
  watch: {},
  components: {},
  filters: {},
  methods: {
    // 设置网格线
    echartsSetGrid() {
      return {
        left: '10%',
        right: '10%',
        bottom: '10%',
        top: '20%',
        backgroundColor: '#f9f9f9', // 设置网格背景色
        borderWidth: 1 // 可选：去掉边框
      }
    },
    // 设置tooltip
    echartsSetTooltip() {
      return {
        trigger: 'axis',
        backgroundColor: 'rgba(255,255,255,0.9)',
        borderColor: '#ccc',
        textStyle: {
          color: '#333'
        },
        formatter: params => {
          return (
            `${params[0].axisValue} ${params[0].marker}<br/>` +
            params.map(p => `${p.seriesName}：${p.value}`).join('<br/>')
          )
        }
      }
    },
    // 设置渐变色
    echartsSetSeriesColor(colors) {
      // 魔改了  areaStyle  如果是一个list    [{offset:'1',color:'#AAA'}]  就获取 [0].color  如果list包含两个  就是渐变色  如果color 单纯为一个颜色  就直接渲染颜色
      if (!colors) {
        return ''
      }
      if (colors.length > 1 && colors[0].color) {
        return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colors)
      }
      return colors[0].color ? colors[0].color : colors
    },
    //  显示纵向网格线（默认是显示的）
    echartsSetXAxisLine() {
      return {
        show: true, // 显示纵向网格线（默认是显示的）
        lineStyle: {
          width: 1,
          type: 'slide' // 可选：虚线
        }
      }
    },
    // 画图
    drawEcharts() {
      let myChart = this.$echarts.init(document.getElementById(this.echartsId))
      let option = {
        ...this.options,
        title: {
          ...this.options.title,
          textStyle: {
            fontSize: 13
          }
        },
        xAxis: {
          ...this.options.xAxis,
          type: 'category',
          data:
            this.options.xAxis.data.length > 0
              ? this.options.xAxis.data
              : [new Date().format('yyyy-MM-dd')],
          splitLine: this.echartsSetXAxisLine()
        },
        yAxis: {
          type: 'value',
          ...this.options.yAxis
        },
        tooltip: this.echartsSetTooltip(),
        grid: this.echartsSetGrid(),
        series: this.options.series.map(item => {
          return {
            ...item,
            areaStyle: {
              color:
                item.areaStyle && item.areaStyle.color
                  ? this.echartsSetSeriesColor(item.areaStyle.color)
                  : null
            },
            type: 'line',
            data: item.data.length > 0 ? item.data : [0]
          }
        })
      }
      myChart.setOption(option)
    }
  },
  created() {},
  mounted() {
    this.drawEcharts()
  },
  computed: {}
}
</script>
<style scoped lang="scss"></style>
