echarts柱状图

<template>
  <div class="cont">

    <div class="area">
      <div ref="chart1" :style="{width: '100%',  height: '2.6rem'}"></div>
    </div>

  </div>
</template>

<script>
import { getlargeScreen } from '@/service/index'

export default {
  components: {

  },
  props: {
    tabActive: {
      type: String,
      default: () => ''
    },
    realTimeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      list: [],
      tabactive: 1,
      cockpitData: [

        {
          "unit": "个",
          "areaname": "2019",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "32"
        },
        {
          "unit": "个",
          "areaname": "2020",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "23"
        },
        {
          "unit": "个",
          "areaname": "2021",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "8"
        },

        {
          "unit": "个",
          "areaname": "2022",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "121"
        },

      ],
    }
  },
  watch: {
    tabActive(val) {
      console.log('值2', val);
      this.areacodel = val
      this.getlargeScreen()
    },
    deep: true
  },
  methods: {

    //  图表初始化

    //  图表初始化
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart1)
      // ，执行echarts自带的resize方法，即可做到让echarts图表自适应

      window.addEventListener("resize", () => {
        this.chartInstance.resize();

      });

    },
    updateChart() {
      // 循环遍历出x轴的name
      const xAx = this.cockpitData.map((item) => {
        return item.areaname
      })
      const yAy = this.cockpitData.map((item) => {
        return item.value
      })
      console.log('柱状图数据', xAx, yAy);
      const option = {
        //提示框组件配置
        tooltip: {
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 12,
            color: "#000",
          },
          padding: 5,
        },
        // 图例组件
        legend: {
          align: 'right',
          right: 10,
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          itemWidth: 10,
          itemHeight: 10,
          // height: 150
          orient: 'horizontal',
          top: '10%',
        },
        //定义折线图距离左边多少右边多少的距离
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [ //定义x轴
          {
            type: 'category',
            data: xAx,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 10,
              },
            }

          }
        ],
        yAxis: [ // 定义y轴
          {
            nameTextStyle: {
              color: "#666666",
              fontSize: 14,
            },
            show: true,
            type: "value",
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: { // 坐标轴轴线相关设置
              show: false,
            },
            splitLine: { // 坐标轴在网格区域中的分隔线
              lineStyle: { //x轴网格样式设置
                color: "#12403F",
              },
            },
          },
        ],
        series: [ //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "近5年公开政务信息数量趋势",
            type: "bar", // 设置为柱状图
            barWidth: 24,
            //柱状图设置数值
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            },
            data: yAy,
          },


        ],
      }
      this.chartInstance.setOption(option)
    },


    async getlargeScreen() {
      var sw = await getlargeScreen({
        areacodel: this.areacodel
      })
      console.log(2222222, sw);
      this.list = sw.result
    },

  },
  created() {
    this.$emit('changeCity', this.city)
    // this.getData1()
    this.getlargeScreen()

  },

  mounted() {
    this.$nextTick(function () {
      this.initChart()
      this.updateChart()
    })

  },
  beforeDestroy() {
    // 页面组件销毁，移除echart自适应事件
    window.removeEventListener("resize", () => {
      this.chartInstance.resize()
    })
  }

}
</script>

<style lang="scss"  scoped>
</style>