封装echarts,折线图

<template>
  <div :class="className" :style="{ width: width, height: height }" ref="LineVMIcharts"></div>
</template>

<script>
export default {
  name: "LineVMIcharts",
  props: {
    dataBigScreen: {
      type: Object
    },
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    currentDate: {
      type: String,
      default: ""
    },
    chartData1: {
      type: Array,
      default: () => []
    },
    xData: {
      type: Array,
      default: () => []
    },
    paddingLeft: {
      type: Number,
      default: -27
    },
    gridLeft: {
      type: Number,
      default: 16
    },
    unit:{
      type:String,
      default:"单位/万元"
    },
    seriesName:{
      type:String,
      default:"VMI下单金额"
    },
    lineColor:{
      type:String,
      default:"#3F8AFF"
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions({ xdata, series } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "rgba(255,225,255)"
              // width: 60,
              // type: "solid"
            }
          },
          padding: 0,
          borderWidth: 0,
          formatter: params => {
            const span = `<span style="font-size:18px;font-weight: bold;">${params[0].name}</span>`
            const line =
              '<div style="width:100%;height: 1px;background: rgba(255,255,255,0.5);margin: 10px 0"></div>'
            const marker1 = `<span style="display:inline-block;width:8px;height:8px;border-radius: 50%;background: ${this.lineColor};margin-right:4px"></span>`
            const html = `<div style="background-color: #012C6B; padding: 10px 16px 14px;border: none">
                ${span}<br>
                ${line}
                ${marker1}${params[0].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;
                ${params[0].value}<br>
              </div>`
            return html
          }
        },
        grid: {
          top: 36,
          left: this.gridLeft,
          right: 16,
          bottom: 18,
          containLabel: true
        },
        legend: {
          show: true,
          selectedMode: false,
          top: 2,
          right: 12,
          itemWidth: 10,
          itemHeight: 10,
          icon: "rect",
          color:'#fff',
          textStyle: {
            color: "rgba(255,255,255,0.75)",
             a: {
                verticalAlign: 'middle',
              },
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          title: {
            show: true
          },
          axisTick: {
            show: true,
            inside: true,
            alignWithLabel: true,
            lineStyle: {
              color: "#7EC3FF"
            }
          },
          axisLabel: {
            interval: "0",
            textStyle: {
              color: "rgba(204,225,241,1)",
              fontSize: "12"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(126,195,255,1)",
              width: 1,
              type: "solid"
            }
          },
          data: this.xData
        },
        yAxis: {
          type: "value",
          show: true,
          name:this.unit,
          nameTextStyle: {
            color: "rgba(255,255,255,0.75)",
            padding: [0, 0, 0, this.paddingLeft]
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.1)",
              type: "dashed"
            }
          },
          axisLabel: {
            textStyle: {
              color: "rgba(204,225,241,0.8)",
              fontSize: "12"
            }
          }
        },
        series: [
          {
            data: this.chartData1,
            type: "line",
            name: this.seriesName,
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "emptyCircle",
            cursor: "pointer",
            lineStyle: {
              color: this.lineColor,
              width: 2
            },
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 2, 2],
                color: this.lineColor
              },
              emphasis: {
                borderColor: this.lineColor, //  拐点边框颜色
                borderWidth: 0.5, //  拐点边框宽度
                color: "#fff" //hover拐点颜色定义
              }
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(63,138,255,0.3)"
                },
                {
                  offset: 1,
                  color: "rgb(63,138,255,0)"
                }
              ])
            }
          }
        ]
      })
    },
    initChart() {
      this.chart = this.$echarts.init(this.$refs.LineVMIcharts)
      this.setOptions(this.chartData)
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>