<template>
    <div ref="chart" class="item" style="height: 330px; width: 224px" />
  </template>
  
  <script>
  import * as echarts from 'echarts'
  export default {
    data() {
      return {
        chart: null,
        timer: '',
        dataList: [],
      }
    },
    // props: {
    //   list: {
    //     type: Array,
    //     default: [],
    //   },
    // },
    // watch: {
    //   list: {
    //     handler(val) {
    //       this.$nextTick(() => {
    //         const chartDom = this.$refs.chart;
    //         // 初始化图表实例
    //         this.chart = echarts.init(chartDom);
    //         this.initChart(val);
    //       });
    //     },
    //     immediate: true,
    //     deep: true,
    //   },
    // },
  
    methods: {
      initChart() {
        const option = {
          color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
          // textStyle: {
          //   color: '#fff',
          //   fontSize: 16,
          // },
  
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
          },
          grid: {
            left: '-34%',
            right: '4%',
            bottom: '0%',
            top:'5%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            // 设置x轴显示几段
            // min: 0,
            // max: 100,
            interval: 0,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: 'transparent',
              },
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              verticalAlign: 'top',
              align: 'left',
              padding: [-25, 0, 40, 6],
              textStyle: {
                fontSize: 14,
                color: '#1089E7',
                // fontFamily: 'Source Han Sans CN',
              },
            },
            data: ['鸳鸯消防站', '翠云消防站', '龙头寺消防站', '礼嘉消防站', '奥园消防站', '大竹林消防站'],
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#e0e0e0',
              },
            },
            inside: true,
            //   textStyle: {
            //     color: '#000',
            //   },
          },
          series: [
            {
              type: 'bar',
              itemStyle: {
                color: '#739FA8', // 定义柱形的背景色
                borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
              },
              barGap: '-100%', //设置柱形重合的重要步骤
              data: [100, 100, 100, 100, 100, 100],
              animation: false, // 关闭动画效果
              barWidth: '18px', // 设置柱形宽度
            },
            {
              type: 'bar',
              data: [65, 75, 33, 34, 45, 66, 77],
              barWidth: '15px',
              barGap: '-90%', //设置柱形重合的重要步骤
              itemStyle: {
                borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
                color: function (params) {
                  var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016']
                  return colorList[params.dataIndex]
                },
              },
            },
          ],
        }
        this.chart.setOption(option)
        //自适应图表
        window.onresize = this.chart.resize
      },
    },
    mounted() {
      const chartDom = this.$refs.chart
      //   // 初始化图表实例
      this.chart = echarts.init(chartDom)
      this.initChart()
    },
  }
  </script>
  
  <style scoped lang="less"></style>
  