pbl-teacher-table/src/components/pages/studio/components/actLineChat.vue

<template>
  <div style="width: 95%; height: 100%; margin: 0 auto">
    <div class="actLineChatBox">
      <div>活跃度：</div>
      <div ref="chart" style="width: 410px; height: 300px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LineChart",
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = this.$echarts.init(chartDom);
      const option = {
        // title: {
        //   text: "折线图",
        // },
        tooltip: {},
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisLabel: {
            interval: 0, //全部显示x轴
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 148, 230, 100, 140, 150, 210, 210, 210, 200, 150, 170],
            type: "line",
          },
          {
            data: [150, 100, 200, 140, 100, 110, 170, 140, 120, 150, 150, 210],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.actLineChatBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 410px;
  border: 1px solid #e6e6e6;
  box-shadow: 0px 0px 5px 0px #e6e6e6;
  border-radius: 10px;
  padding: 15px 10px;
  margin-top: 20px;
}
.actLineChatBox > div:first-child {
  color: #3050c2;
  font-size: 18px;
  font-weight: bold;
}
</style>