tmr-group-admin/src/componentChart/HorizontalBarChart.vue

<template>
  <div ref="chart"  style="width:100%;height:385px;"  />
</template>
<script>
import * as echarts from 'echarts';
import { GetDataByName } from '@/api/common'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
require('echarts/theme/macarons')

export default {
  name: 'HorizontalBarChart',
  props: {
    

    chartData: {
      type: Object,
      required: true
    },
    //   chartOpt: {
    //   type: Object,
    //   required: false
    // },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler: function (chartData) {
        this.renderChart(chartData)
      }
    },
    // schema: {
    //   deep: true,
    //   handler: function () {
    //     this.renderChart(this.data)
    //   }
    // }
  },
  mounted() {
    this.renderChart(this.chartData)
    this.$on('resized', this.handleResize)
    window.addEventListener('resize', this.handleResize)
  },


  // created() {
  //   this.renderChart(this.chartData)
  // },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    renderChart(chartData) {
      const option =  {
        title: { text: '' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartData.legendArr, right: 10, show: true, type: 'scroll' },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },

         xAxis: {type: 'value', name: 'kg'},
        yAxis: [
          { type: 'category',data:chartData.xAxisArr }
           
        ],

       
         series: function (e) {
            var serie = [];
            for (var i = 0; i < chartData.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartData.legendArr[i],
                  data: chartData.dataArr[i],
                  type: 'bar',
                  emphasis: { label: { show: true, position: 'inside' } },
                }
             

              serie.push(item);
            }


            console.log(serie)

            return serie;
          }()
      
      }
      setTimeout(() => {
        if (!this.chart) {
          this.chart = echarts.init(this.$refs.chart, 'macarons')
        }
        this.chart.clear()
        this.chart.setOption(option)
        // if (this.chartOpt) {
        //   this.chart.setOption(this.chartOpt)
        // }
 
        this.chart.setOption(this.chartOpt)
       
      }, 0)
    }
  }
}
</script>