<template>
  <div ref="chart" class="item" style="height: 330px" />
</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 = {
        tooltip: {
          axisPointer: {
            type: 'shadow',
          },
        },
        
        grid: {
          //   top: '15%',
          left: '15%',
          bottom: '10%',
        },
        xAxis: {
          data: ['两江支队', '鸳鸯支队', '大竹林站', '礼嘉站', '翠云站', '龙头寺站'],
          axisLine: {
            lineStyle: {
              color: '#0177d4',
            },
          },
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 0,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: '（升）',
          nameTextStyle: {
            color: '#fff',
            fontSize: 16,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0177d4',
            },
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            color: '#fff',
            fontSize: 16,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#0177d4',
            },
          },
          //   interval: 500,
          //   max: 5000,
        },
        series: [
          {
            type: 'bar',
            barWidth: 18,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00b0ff',
                    },
                    {
                      offset: 0.8,
                      color: '#7052f4',
                    },
                  ],
                  false
                ),
              },
            },
            data: [25, 325, 164, 254, 757, 211],
          },
        ],
      }

      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>
