<template>
  <div class="index-container">
    <el-card class="data-card">
      <div :id="chartId" :style="{width: '100%', height: '300px'}" class="chart-container"></div>
      <el-tooltip
        v-if="helpTip"
        class="item"
        :effect="tipType||'dark'"
        :content="helpTip"
        placement="top-end"
      >
        <i class="help el-icon-question"></i>
      </el-tooltip>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: ["data", "helpTip", "tipType", "chartId"],
  components: {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.chartId));
      // 绘制图表
      myChart.setOption(this.data);
    }
  }
};
</script>

<style lang="less" scoped>
.index-container {
  .data-card {
    border-radius: 5px;
    position: relative;
    .help {
      position: absolute;
      right: 15px;
      top: 15px;
      color: #cccccc;
      font-size: 20px;
      cursor: pointer;
      &:hover {
        color: #aaaaaa;
      }
    }
  }
}
</style>