tuanfeng-pc-admin/src/views/dashboard/components/DiagramsChart.vue

<template>
  <div ref="chartsWrapperRef" class="diagrams-chart-container" :style="{ width: containerWidth }"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    statisticalData: { type: Object, default: () => {} },
    chartTitle: { type: String, default: '' }
  },
  data() {
    return {
      instance: null,
      chartData: {},
      containerWidth: 700
    }
  },
  mounted() {
    this.init()
  },

  watch: {
    statisticalData: {
      handler(newValue) {
        this.chartData = newValue
        this.updataCharData()
      },
      immediate: true,
      deep: true
    },

    containerWidth: {
      handler() {
        if (this.instance) {
          this.resize()
        }
      },

      immediate: true
    }
  },

  methods: {
    init() {
      this.instance = echarts.init(this.$refs.chartsWrapperRef)
      this.instance.setOption({
        title: { subtext: this.chartTitle },
        grid: { left: '7%', right: '3%', top: '20%', bottom: '9%' },
        tooltip: {
          trigger: 'axis',
          showDelay: 10,
          padding: 0,
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(225, 228, 255, 0)' },
                { offset: 1, color: '#E1E4FF' }
              ])
            }
          },
          formatter(options) {
            return `
              <div style="
              padding: 0;
              border: 1px solid #f4f8ff;
              padding: 8px 16px;
              background:  linear-gradient(180deg, rgba(238, 245, 255, 0.6) 0%, rgba(219, 233, 253, 0.6) 100%);
              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
              border-radius: 4px;
              color: #3d3d3d;
              font-size: 16px;
              font-weight: bold
             ">${options[0].value}</div>
            `
          }
        },
        xAxis: {
          offset: 5,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { color: '#A4A4A4', fontSize: 14 },
          data: []
        },
        yAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#A4A4A4', fontSize: 14 },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#F3F4F8"
            }
          }
        },
        series: [
          {
            zlevel: 100,
            name: '销量',
            type: 'bar',
            data: [],
            barWidth: '24px',
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#188df0' },
                { offset: 1, color: '#495FFF' }
              ])
            }
          }
        ]
      })
    },

    updataCharData(xData1, yData1) {
      if (!this.instance || !this.instance.setOption || typeof this.chartData !== 'object') {
        return
      }
      const xData = xData1 || Object.keys(this.chartData)
      const yData = yData1 || Object.values(this.chartData)
      this.instance.setOption({
        xAxis: {
          data: xData
        },
        series: [
          {
            zlevel: 100,
            name: '销量',
            type: 'bar',
            data: yData,
            barWidth: '24px',
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#188df0' },
                { offset: 1, color: '#495FFF' }
              ])
            }
          }
        ]
      })
    },

    resize() {
      this.containerWidth = this.$parent.$el.clientWidth
      this.updataCharData()
      this.instance.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.diagrams-chart-container {
  /* width: 700px; */
  height: 265px;
}
</style>