<template>
  <div style="width: 100%; height: 100%">
    <div class="commontitle">
      <div class="left">
        <span>课堂行为次数统计</span>
        <img src="/static/screen/img/titleIcon.png" alt="" />
      </div>
      <div class="right"></div>
    </div>
    <div style="width: 100%; height: 500px; margin-top: 40px">
      <div ref="chart1" style="width: 540px; height: 500px"></div>
    </div>
  </div>
</template>
  <script setup>
import * as echarts from "echarts";
const props = defineProps({
  screenData: {}
});
const statisti = ref({});
let chart1 = ref(null);
const getCharts1 = () => {
  const chart = echarts.init(chart1.value);
  let data = statisti.value.labale.map((e, i) => {
    return {
      name: e,
      value: statisti.value.value[i]
    };
  });
  let data_ = data.map(e => e.name);
  let color = ["#14C9C9", "#165DFF", "#CBE0FF", "#9FDB1D", "#C42ED1", "#F7BA1E"];
  data = data.map((e, i) => {
    e.itemStyle = {
      color: color[i % color.length]
    };
    return e;
  });
  let option = {
    textStyle: {
      color: "#fff",
      fontSize: 12
    },
    grid: {
      show: false,
      left: "12%"
    },
    tooltip: {
      show: true,
      trigger: "item" //触发类型
    },
    animation: true,
    xAxis: {
      type: "value", //坐标轴类型
      position: "top", //x 轴的位置 bottom top
      minInterval: 1,
      axisLine: {
        show: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#666",
          type: "dashed"
        }
      },
      axisTick: {
        show: true,
        inside: false
      }
    },
    yAxis: {
      type: "category",
      name: "行为",
      nameLocation: "start",
      position: "left",
      axisTick: false,
      axisLabel: {
        show: true,
        width: 100,
        overflow: "break"
      },
      data: data_
    },
    series: [
      {
        type: "bar",
        barWidth: 7,
        data
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
onMounted(() => {
  init();
});
const init = () => {
  statisti.value = props.screenData.statisti;
  getCharts1();
};
defineExpose({
  init
});
</script>
  <style lang="scss" scoped>
</style>