repo-frontend/src/view/chartBox.vue

<template>
  <div style="width: 100%">
    <v-chart :options="polar" :style="'width: ' + width + ';height:' + height + ';'" />
  </div>
</template>
<script>
import ECharts from "vue-echarts"; // 在 webpack 环境下指向 components/ECharts.vue
import echarts from "echarts";

export default {
  props: {
    symbol: {
      type: String,
      default: "",
    },
    period: {
      type: String,
      default: "1day",
    },
    count: {
      type: Number,
      default: 7,
    },
    color: {
      type: String,
      default: "up",
    },
    width: {
      type: String,
      default: "150px",
    },
    height: {
      type: String,
      default: "50px",
    },
    useTestData: {
      type: Boolean,
      default: false,
    },
  },
  name: "ChartBox",
  data() {
    console.log("颜色", this.color);
    return {
      books: ["book0", "book1"],
      msg: "this is BookList",
      polar: {
        animation: true,
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          splitLine: false,
          show: false,
        },
        yAxis: {
          type: "value",
          splitLine: false,
          show: false,
        },
        series: [
          {
            data: [120, 132, 101, 134, 90, 230, 210],
            type: "line",
            symbol: "none",
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)", // 0% 处的颜色，修复透明度值
                    },
                    {
                      offset: 0.7,
                      color:
                        this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            itemStyle: {
              normal: {
                color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线点的颜色
                lineStyle: {
                  color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线的颜色
                  width: 0.4,
                },
              },
            },
          },
        ],
      },
    };
  },
  components: {
    "v-chart": ECharts,
  },
  methods: {
    updateChart() {
      // 更新图表颜色
      this.polar.series[0].itemStyle.normal.color =
        this.color == "up" ? "#00f0ff" : "#ff494a";
      this.polar.series[0].itemStyle.normal.lineStyle.color =
        this.color == "up" ? "#00f0ff" : "#ff494a";
      this.polar.series[0].areaStyle.normal.color.colorStops[0].color =
        this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)";
      this.polar.series[0].areaStyle.normal.color.colorStops[1].color =
        this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)";
    },
  },
  watch: {
    color(val) {
      this.updateChart();
    },
  },
  created() {
    this.updateChart();
  },
  mounted() {
    if (this.useTestData) {
      console.log("使用测试数据");
      return;
    }

    // 如果没有提供symbol，则使用测试数据
    if (!this.symbol) {
      console.warn("Chart Warning: No symbol provided, using test data");
      return;
    }

    let that = this;
    let now = parseInt(new Date().valueOf() / 1000);
    let start = now - 3600 * 24 * 7;
    this.$http
      .get("/api/currency/new_timeshar", {
        params: {
          symbol: this.symbol + "/USDC",
          from: start,
          to: parseInt(new Date().valueOf() / 1000),
          period: this.period,
        },
      })
      .then((res) => {
        if (res.data && res.data.data && res.data.data.length > 0) {
          let rsp = res.data;
          let invoke = rsp.data.reverse().slice(0, this.count).reverse();
          let data = [];
          let data1 = [];
          invoke.forEach((x) => {
            data.push(x.id);
            data1.push(x.close);
          });

          // 确保data1中有数据再进行处理
          if (data1.length > 0) {
            let min = Math.min.apply(null, data1);
            for (let i = 0; i < data1.length; i++) {
              data1[i] = data1[i] - min;
            }
            console.log("data=====", data);
            that.polar.xAxis.data = data;
            that.polar.series[0].data = data1;
          } else {
            console.error("Chart Error: No data points found");
          }
        } else {
          console.error("Chart Error: Invalid or empty response data");
        }
      })
      .catch((error) => {
        console.error("Chart Error:", error);
      });
  },
};
</script>