zhgkpt-datav/app/src/views/Home/components/FireIndex/Chart.vue

<template >
  <div ref="chart" style="height: 200px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ChartComponent',
  props: {
    items: Array,
    label: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    // 初始化表格
    this.init()
  },
  watch: {
    items: {
      handler() {
        this.reload()
      },
      deep: true
    },
    label: {
      handler() {
        console.log('-------',this.label)
        this.chart.setOption({
          xAxis: {
            data: this.label
          }
        });
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
          tooltip: {
            trigger: "axis",
            formatter: "{b} : {c}",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: "rgba(0,224,255,0.46)",
            borderColor: "rgba(0,213,255, .6)",
            textStyle: {
              color: '#fff',
            }
          },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false,
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            color: '#fff',
            fontSize: 8
          },
          data: this.label
        },
        yAxis: {
          type: 'value',
          //坐标轴
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: "#4784e8",
              type: 'dashed'
            },
          },
      },
        grid: {
          right: '8px',
          top: '20px'
        },
        series: [
          {
            data: this.items,
            type: 'bar',
            barWidth: 10,
            barGap: 20,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              normal: {
                color: '#0085FF'
              },
              emphasis: {
                color: '#00E0FF'
              }
            }
          }
        ]
      })
      this.chart
    },
    reload() {
      // 重载数据
      if (this.chart) {
        this.chart.setOption({
          series: [
            {
              data: this.items
            }
          ]
        });
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>