SaaS-DataScreen/src/views/hui-jia/components/market.vue

<template>
  <div class="market-container">
    <div class="market-title">
      <img src="@/assets/images/shb.png" class="title-icon" />
      市场拓展
    </div>
    <div class="legend">
      <div class="legend-item">上月</div>
      <div class="legend-item">本月</div>
    </div>
    <div class="chart-wrap">
      <div id="marketChart" class="chart"></div>
      <div id="marketChart2" class="chart2"></div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex"
  import { api } from "@/api"
  import * as echarts from "echarts"

  export default {
    name: "MarketExpansion",
    props: {
      data: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        chartInstanceA: null,
        chartInstanceB: null,
        chartData: {
          categories: [
            "新增户数",
            "新增项目",
            "新增合同",
            "新增联系人",
            "跟进企业",
            "新增企业",
          ],
        },
      }
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
    },
    watch: {
      data: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.initChart()
          }
        },
        deep: true,
      },
    },
    mounted() {
      this.init()
      window.addEventListener("resize", this.handleResize)
    },
    beforeDestroy() {
      if (this.chartInstanceA) {
        this.chartInstanceA.dispose()
      }
      window.removeEventListener("resize", this.handleResize)
    },
    methods: {
      // 初始化组件
      init() {
        this.initChart()
      },

      // 初始化图表
      initChart() {
        this.chartInstanceA = echarts.init(
          document.getElementById("marketChart")
        )
        this.chartInstanceB = echarts.init(
          document.getElementById("marketChart2")
        )

        const lastMonthData = Object.keys(this.data)
          .map((key, index) => {
            return -this.data[key].last_month
          })
          .reverse()

        const thisMonthData = Object.keys(this.data)
          .map((key, index) => {
            return this.data[key].this_month
          })
          .reverse()

        const optionA = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(17, 28, 49, 0.9)",
            borderColor: "rgba(64, 158, 255, 0.2)",
            textStyle: {
              color: "#ffffff",
            },
            formatter: (params) => {
              // 自定义tooltip格式
              let result = params[0].name + "<br/>"
              params.forEach((item) => {
                result +=
                  item.marker +
                  item.seriesName +
                  ": " +
                  Math.abs(item.value) +
                  "<br/>"
              })
              return result
            },
          },
          grid: {
            left: "10%",
            right: "1%",
            bottom: "5%",
            top: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            axisLabel: {
              formatter: (value) => {
                if (value < 0) return -value //这里是针对取负值
                else return value
              },
            },
            show: false, // 隐藏x轴
          },
          yAxis: [
            {
              type: "category",
              data: this.chartData.categories,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "上月",
              type: "bar",
              // barMinHeight: 20,
              data: lastMonthData,
              itemStyle: {
                // 左侧渐变色：从#F66757到#FCE2B4
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: "#FCE2B4" },
                  { offset: 1, color: "#F66757" },
                ]),
                borderRadius: [20, 0, 0, 20],
              },
              label: {
                show: true,
                position: "left",
                formatter: "{c}",
                color: "#ffffff",
                fontSize: 12,
                formatter: (value) => {
                  return -value.data
                },
              },
            },
          ],
        }

        const optionB = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(17, 28, 49, 0.9)",
            borderColor: "rgba(64, 158, 255, 0.2)",
            textStyle: {
              color: "#ffffff",
            },
            formatter: (params) => {
              // 自定义tooltip格式
              let result = params[0].name + "<br/>"
              params.forEach((item) => {
                result +=
                  item.marker +
                  item.seriesName +
                  ": " +
                  Math.abs(item.value) +
                  "<br/>"
              })
              return result
            },
          },
          grid: {
            left: "1%",
            right: "10%",
            bottom: "5%",
            top: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            axisLabel: {
              formatter: (value) => {
                if (value < 0) return -value //这里是针对取负值
                else return value
              },
            },
            show: false, // 隐藏x轴
          },
          yAxis: [
            {
              type: "category",
              data: this.chartData.categories,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                color: "#a0b3d6",
                fontSize: 14,
                align: "right",
              },
            },
          ],
          series: [
            {
              name: "本月",
              type: "bar",
              // barMinHeight: 20,
              data: thisMonthData,
              itemStyle: {
                // 右侧渐变色：从#1620D4到#3AB3E3
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#3AB3E3" },
                  { offset: 1, color: "#1620D4" },
                ]),
                borderRadius: [0, 20, 20, 0],
              },
              label: {
                show: true,
                position: "right",
                formatter: "{c}",
                color: "#ffffff",
                fontSize: 12,
              },
            },
          ],
        }

        this.chartInstanceA.setOption(optionA)
        this.chartInstanceA.resize()
        this.chartInstanceB.setOption(optionB)
        this.chartInstanceB.resize()
      },

      // 处理窗口大小变化
      handleResize() {
        if (this.chartInstanceA) {
          this.chartInstanceA.resize()
        }
        if (this.chartInstanceB) {
          this.chartInstanceB.resize()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .market-container {
    background: #0d1629;
    border-radius: halfW(4);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--content-bg);
  }

  .market-title {
    border-radius: halfW(4);
    background: var(--title-bg);
    padding: halfH(4) halfW(10);
    font-size: halfW(16);
    color: var(--title-primary);
    display: flex;
    align-items: center;
  }
  .legend {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: halfH(10) halfW(20);
    font-size: halfW(14);
    font-weight: 500;
    color: #fff;
    border-bottom: 1px solid rgba(64, 158, 255, 0.2);
  }

  .chart-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .chart {
      width: 40%;
      height: 100%;
      background: var(--content-bg);
    }
    .chart2 {
      width: 60%;
      height: 100%;
      background: var(--content-bg);
    }
  }
</style>