SocialNetworks_duan/src/views/GroupEvolution/component/groupShow.vue

<template>
  <div class="groupShow-component">
    <img :src="title" alt="" class="title" />
    <div class="chart-besides-container">
      <div class="chart-item" v-for="item in chartTitleList" :key="item.id">
        <div class="chart-item-title">
          <div class="diamond"></div>
          <div class="title-font">{{ item.name }}</div>
        </div>
        <div class="chart-container" id="container1" v-if="item.id == 1"></div>
        <div class="chart-container" id="container2" v-else-if="item.id == 2"></div>
        <div class="chart-container" id="container3" v-else></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted } from "vue"
import * as echarts from "echarts"
const chartTitleList = [
  { id: 1, name: "头部自媒体 增量速率" },
  { id: 2, name: "官方媒体 增量速率" },
  { id: 3, name: "普通自媒体 增量速率" }
]
let chartInstance1 = null
let chartInstance2 = null
let chartInstance3 = null
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  chartsData: {
    type: Object,
    default: () => {}
  }
})

const optionHandle = ({ xAxis, yAxis, data }, flag) => {
  const lineColors = {
    "头部自媒体 增量速率": "#2AB8FD",
    "官方媒体 增量速率": "#01D7DA",
    "普通自媒体 增量速率": "#FFDA09"
  }
  return {
    tooltip: {
      trigger: "axis"
    },
    grid: {
      left: "0",
      right: "4%",
      bottom: "20%",
      top: "8%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      data: xAxis,
      axisLabel: {
        color: "#94C1EC"
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      nameLocation: "end",
      data: yAxis,
      max: Math.max(...yAxis),
      min: 0,
      nameTextStyle: {
        color: "#B6D6F7",
        fontSize: 13,
        align: "left",
        padding: [0, 0, 0, -28] // 负值让文字更靠左
      },
      axisLabel: {
        color: "#94C1EC"
      },
      type: "value",
      splitLine: {
        show: true, // 是否显示分割线
        lineStyle: {
          color: ["rgba(57, 69, 106, 0.86)"], // 分割线颜色，可以使用数组实现交替颜色
          width: 1, // 分割线宽度
          type: "dotted" // 分割线类型
        }
      }
    },
    series: [
      {
        type: "line",
        stack: "Total",
        symbolSize: 10, // 圆点大小
        symbol: "circle",
        color: lineColors[flag],
        lineStyle: {
          color: lineColors[flag],
          width: 1 // 设置线条宽度为3像素
        },
        itemStyle: {
          color: "#061a2f",
          borderColor: lineColors[flag], // 使用线条颜色作为边框色
          borderWidth: 1
        },
        data: data
      }
    ]
  }
}

const initCharts = () => {
  chartInstance1 = echarts.init(document.getElementById("container1"))
  chartInstance2 = echarts.init(document.getElementById("container2"))
  chartInstance3 = echarts.init(document.getElementById("container3"))
  chartInstance1.setOption(optionHandle(props.chartsData.topSelfMedia, "头部自媒体 增量速率"))
  chartInstance2.setOption(optionHandle(props.chartsData.officialMedia, "官方媒体 增量速率"))
  chartInstance3.setOption(optionHandle(props.chartsData.ordinaryMedia, "普通自媒体 增量速率"))
}

onMounted(() => {
  initCharts()
})
</script>

<style scoped lang="less">
.groupShow-component {
  width: 100%;
  height: 100%;
  .title {
    margin-top: -7px;
  }
  .chart-besides-container {
    padding: 0px 16px;

    width: 100%;
    height: 500px;

    .chart-item {
      width: 100%;
      height: 150px;

      .chart-item-title {
        display: flex;
        align-items: center;
        margin: 8px 0;
        .diamond {
          width: 6px;
          height: 6px;
          background-color: #fff;
          margin-right: 10px;
          box-shadow: 0 4px 8px rgb(0, 123, 255);
        }
        .title-font {
          color: #fff;
          font-family: "PingFang SC";
          font-size: 16px;
        }
      }
      .chart-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>