<template>
  <div  style="height: 100%; width: 100%">
    <div id="mains1"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { quyuPlan } from "@/api/yingji/keyEnterprise.js";
export default {
  data() {
    return {
      load1: true,
      arr1: [],
      arr2:[]
    };
  },
  mounted() {
    this.$nextTick(() => {
      // this.getData();
      this.init();
    });
  },
  methods: {
    getData() {
      this.load1 = true;
      quyuPlan().then((res) => {
        res.data.forEach((value, index) => {
          this.arr1.push(value.deptName);
          this.arr2.push(value.count)
        });
        this.init();
        this.load1 = false;
      });
    },
    init() {
      var chartDom = document.getElementById("mains1");
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          show: true,
          text: "各区域执法计划",
          textStyle: {
            color: "#3D434D",
            fontSize: 16,
          },
          left: 34,
          top: 15,
        },
        tooltip: {
          // show:false,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(237,240,242,0.5)",
              //   opacity: 0.1,
              //   shadowColor: "rgba(237,240,242,0.5)",
              //   shadowBlur: 10,
            },
          },
          showContent: false,
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: this.arr1,
            data: [
              "苏州",
              "张家港市",
              "常熟市",
              "太仓市",
              "昆山市",
              "吴江区",
              "吴中区",
              "姑苏区",
              "相城区",
              "工业园区",
              "高新区",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              fontSize: "13px",
              fontFamily: "Alibaba PuHuiTi",
              fontWeight: 500,
              color: "#525966",
            },
            axisLine: {
              lineStyle: {
                color: "#B6C3D9",
              },
            },
            z: 1000,
          },
        ],
        yAxis: [
          {
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
              },
              show: true, //隐藏或显示
            },
            axisLabel: {
              show: true,
              fontSize: "13px",
              fontFamily: "Alibaba PuHuiTi",
              fontWeight: 500,
              color: "#525966",
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 28,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "#FF8B02",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#FFA70F",
                },
              ]),
            },
            z: 100,
            data: [700, 400, 600, 300, 580, 250, 490, 200, 390, 460, 90],
            // data: this.arr2,
            //高亮的效果
            emphasis: {
              label: {
                show: true,
                formatter: "{c}",
                position: "top",
                fontSize: 14,
                color: "#FF8C03",
                fontWeight: "bold",
                fontFamily: "Alibaba PuHuiTi",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
#mains1 {
  height: 100%;
  width: 100%;
}
</style>