<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>
<script>
import echarts from "echarts"
import resize from "./mixins/resize"
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100px",
    },
    height: {
      type: String,
      default: "100px",
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        //标题
        title: {
          text: "粮食种类",
          x: "center",
          textStyle: {
            fontSize: 14,
            color: "blue",
          },
        },
        tooltip: {
          // 相对位置，放置在容器正中间
          position: ["50%", "50%"],
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          left: "80%",
          bottom: "20",
          //图例标记的图形宽度
          //  itemWeight:'10px',
          data: ["玉米", "稻谷", "小麦", "大豆"],
        },

        xAxis: {
          type: "category",
          data: ["玉米", "稻谷", "小麦", "大豆"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            name: "储存状态",
            type: "bar",

            data: [5, 20, 36, 10],
          },
        ],
      })
    },
  },
}
</script>