fd_dwgz_zhyw_nx/src/views/economicsOperation/stationAnalyse/angleAnalysis/components/current-scatter-chart.vue

<template>
  <div class="chart" :id="id" :style="`width:${width}; height:${height}`"></div>
</template>

<script>
import util from "@tools/util";
import partten from "@tools/partten";
import * as echarts from "echarts";
import chartTheme from "./current-scatter-chart.json";

export default {
  name: "currentScatterChart",
  props: {
    // 图表宽度
    width: {
      type: String,
      default: "100%",
    },
    // 图表高度
    height: {
      type: String,
      default: "350px",
    },
    // 图表主标题
    chartTitle: {
      type: String,
      default: "自定义图表组件",
    },
    // X 轴配置项
    xAxisData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // Y 轴配置项
    yAxisData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dataSet: {
      type: String,
      default: "",
    },
    // 图表核心数据
    seriesData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示图表图例
    showLegend: {
      type: Boolean,
      default: true,
    },
    // 是否默认采用笔刷模式
    brushSelected: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      theme: "light",
      color: [],
      linearGradientColor: [],
      chartData: [],
      markItem: {},
    };
  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    },
  },
  watch: {
    height() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    collapse(val) {
      if (this.chart) {
        setTimeout(() => {
          this.chart.resize();
        }, 300);
      }
    },
  },
  methods: {
    resize() {},

    setMarkItem(markItem) {
      this.markItem = markItem;
    },

    initChart(markItem = {}) {
      const that = this;
      document.getElementById(this.id).removeAttribute("_echarts_instance_");
      that.chart = null;
      const theme = sessionStorage.getItem("theme") === "true" ? true : false;

      this.$nextTick(() => {
        that.chartData.forEach((ele) => {
          ele.emphasis = {
            focus: "none", // 取消高亮
            itemStyle: {
              color: null, // 不改变颜色
              borderColor: null, // 不改变边框颜色
              borderWidth: 0, // 不改变边框宽度
              shadowBlur: 0, // 不添加阴影
              shadowColor: null, // 不改变阴影颜色
              opacity: 1, // 不改变透明度
            },
          };
          ele.large = true; // 开启大数据模式
          ele.progressive = 300; // 每次渲染的数据点数量
          ele.progressiveChunkMode = "sequential"; // 顺序分批渲染
          ele.silent = true;

          if (ele.name === "偏差上限") {
            ele.areaStyle = that.linearGradientColor[0];
            ele.silent = true;
          } else if (ele.name === "偏差下限") {
            ele.areaStyle = that.linearGradientColor[1];
            ele.silent = true;
          }

          if (ele.name === "实发有功" && markItem.res) {
            this.markItem = markItem;
            ele.markPoint = {
              symbolSize: 36,
              itemStyle: {
                color: this.$store.state.theme ? "#eb4d4b" : "#ff7979", // 特殊颜色
              },
              emphasis: {
                focus: "none", // 取消高亮
                silent: true, // 禁用 markPoint 的所有鼠标事件
                itemStyle: {
                  color: "#fff", // 不改变颜色
                  borderColor: null, // 不改变边框颜色
                  borderWidth: 0, // 不改变边框宽度
                  shadowBlur: 0, // 不添加阴影
                  shadowColor: null, // 不改变阴影颜色
                  opacity: 1, // 不改变透明度
                },
              },
              blur: {
                itemStyle: {
                  opacity: 1,
                },
              },
              data: [
                {
                  name: `${markItem.date} 异常点`,
                  value: ele.data[markItem.dataIndex],
                  xAxis: markItem.dataIndex, // 使用索引作为 x 坐标
                  yAxis: ele.data[markItem.dataIndex], // 使用实际值作为 y 坐标
                  label: {
                    formatter: markItem.res,
                    position: "top",
                  },
                },
              ],
            };
          }
        });
        let myChart = echarts.init(document.getElementById(this.id));
        that.chart = myChart;
        //指定图表的配置项和数据
        const option = {
          //标题
          color: this.color,
          title: {
            text: that.chartTitle,
            right: 440,
            top: 4,
            textStyle: {
              fontSize: 14,
              color: theme ? "#000" : "#fff",
            },
          },
          //工具箱
          toolbox: {
            show: false,
            x: "right",
            position: [10, 10],
            // backgroundColor:'rgba(0,0,0,0.4)',
            borderColor: theme ? "#000" : "#fff",
            textStyle: {
              fontSize: util.vh(16),
              color: theme ? "#000" : "#fff",
            },
            iconStyle: {
              borderColor: theme ? "#000" : "#fff",
            },
            emphasis: {
              iconStyle: {
                borderColor: theme ? "#000" : "#fff",
              },
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
            formatter(data) {
              const dataIndex = data[0].dataIndex;
              let label = `<p><span style="display:inline-block;width:100%">${that.xAxisData[dataIndex]}</span>`;
              data.forEach((ele, index) => {
                label += `<p>
                            <span style="background:${
                              that.color[index]
                            };margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:50%;over-flow:hidden;"></span>
                                <span>${
                                  ele.seriesName
                                }:<span style="font-weight: 700;margin-left:10px">${
                  ele.value || 0
                }</span>
                            </span>
                           </p>
                          </p>`;
              });
              return label;
            },
          },
          brush: {
            seriesIndex: [2, 3],
            yAxisIndex: 0,
            transformable: true,
            throttleType: "debounce",
            throttleDelay: 1000,
            removeOnClick: true,
            brushType: "polygon",
            brushMode: "multiple",
            brushStyle: {
              borderWidth: 1,
              borderColor: "#ff2424",
            },
          },
          dataZoom: [
            {
              type: "inside", //图表下方的伸缩条
              show: false, //是否显示
              realtime: true, //拖动时，是否实时更新系列的视图
              start: 0, //伸缩条开始位置（1-100），可以随时更改
              end: 100, //伸缩条结束位置（1-100），可以随时更改
            },
            {
              type: "slider", //图表下方的伸缩条
              show: false, //是否显示
              realtime: true, //拖动时，是否实时更新系列的视图
              start: 0, //伸缩条开始位置（1-100），可以随时更改
              end: 100, //伸缩条结束位置（1-100），可以随时更改
            },
          ],
          textStyle: {
            fontSize: util.vh(16),
            color: theme ? "#fff" : "#000",
            rich: {
              a: {
                fontSize: 15,
                width: 110,
                color: theme ? "#000" : "#fff",
              },
            },
          },
          //图例-每一条数据的名字
          legend: {
            show: that.showLegend,
            // right: 170,
            right: 70,
            type: "scroll",
            top: "5",
            icon: "circle",
            itemWidth: 6,
            inactiveColor: theme ? "#000" : "#fff",
            textStyle: {
              color: theme ? "#000" : "#fff",
              fontSize: 12,
            },
            // formatter(name) {
            //   return [`{a| ${name}}`].join(" ");
            // },
          },
          grid: {
            top: 58,
            left: 40,
            right: 48,
            bottom: 24,
          },
          //x轴
          xAxis: [
            {
              name: "时间",
              nameTextStyle: {
                color: theme ? "#000" : "#fff",
              },
              type: "category",
              boundaryGap: true,
              data: that.xAxisData || [],
              axisLabel: {
                formatter: "{value}",
                color: theme ? "#000" : "#fff",
              },
              splitLine: {
                show: false,
              },
              smooth: true,
              textStyle: {
                color: theme ? "#000" : "#fff",
              },
            },
          ],
          //y轴没有显式设置，根据值自动生成y轴
          yAxis: [
            {
              splitLine: {
                show: false,
              },
              position: "left",
              min: 0,
              name: "MW",
              nameTextStyle: {
                color: theme ? "#000" : "#fff",
              },
              axisLabel: {
                color: theme ? "#000" : "#fff",
              },
            },
            {
              splitLine: {
                show: false,
              },
              position: "left",
              min: 0,
              name: "m/s",
              nameTextStyle: {
                color: theme ? "#000" : "#fff",
              },
              axisLabel: {
                color: theme ? "#000" : "#fff",
              },
              position: "right",
            },
            {
              splitLine: {
                show: false,
              },
              position: "left",
              min: 0,
              name: "", // 另一条 MW 单位的Y轴，因为数值太大了所以单独用一条Y轴
              nameTextStyle: {
                color: theme ? "#000" : "#fff",
              },
              axisLabel: {
                color: theme ? "#000" : "#fff",
              },
            },
          ],
          animation: true,
          dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
          //数据-data是最终要显示的数据
          series: that.chartData,
        };

        that.resize = function () {
          myChart.resize();
        };

        window.addEventListener("resize", that.resize);

        if (markItem.res) {
          option.dataZoom = that.handleRowClick(markItem);
        }

        myChart.setOption(option);

        myChart.off("brushSelected");
        // myChart.on("brushSelected", (params) => {
        //   that.$emit("getSelected", params.batch || []);
        // });
        myChart.off("legendselectchanged");
      });
    },

    changeColor() {
      if (this.$store.state.theme) {
        this.color = [
          "#67c23a",
          "rgb(242.5, 208.5, 157.5)",
          "#f56c6c",
          "rgb(135, 0, 157)",
          "rgb(116, 21, 219)",
          "#205081", // 添加的深蓝色
          "rgb(169, 89, 43)", // 添加的棕色
        ];

        this.linearGradientColor = [
          {
            opacity: 0.5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "rgb(255, 0, 135)",
              },
              {
                offset: 1,
                color: "rgb(135, 0, 157)",
              },
            ]),
          },
          // {
          //   opacity: 0.5,
          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //     {
          //       offset: 0,
          //       color: "rgb(55, 162, 255)",
          //     },
          //     {
          //       offset: 1,
          //       color: "rgb(116, 21, 219)",
          //     },
          //   ]),
          // },
          {
            opacity: 1,
            color: "#fff",
          },
        ];
      } else {
        this.color = [
          "#67c23a",
          "rgb(242.5, 208.5, 157.5)",
          "#f56c6c",
          "rgb(77, 119, 255)",
          "rgb(1, 191, 236)",
          "#f2c94c", // 添加的黄色
          "rgb(153, 102, 255)", // 添加的紫色
        ];
        this.linearGradientColor = [
          {
            opacity: 0.5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "rgb(0, 221, 255)",
              },
              {
                offset: 1,
                color: "rgb(77, 119, 255)",
              },
            ]),
          },
          // {
          //   opacity: 0.5,
          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //     {
          //       offset: 0,
          //       color: "rgb(128, 255, 165)",
          //     },
          //     {
          //       offset: 1,
          //       color: "rgb(1, 191, 236)",
          //     },
          //   ]),
          // },
          {
            opacity: 1,
            color: "rgb(33,34,35)",
          },
        ];
      }
    },

    // 处理表格行点击事件
    handleRowClick(row) {
      const that = this;
      const index = row.dataIndex;
      const totalDataLength = that.chartData[1].data.length;

      // 计算点击点周围的缩放范围
      let zoomRange = 300; // 可视区域包含的数据点数量
      // let startIndex = Math.max(index - Math.floor(zoomRange / 2), 0);
      // let endIndex = Math.min(startIndex + zoomRange, totalDataLength);
      let startIndex = index - zoomRange / 2 < 0 ? 0 : index - zoomRange / 2;
      let endIndex =
        index + zoomRange / 2 > totalDataLength
          ? totalDataLength
          : index + zoomRange / 2;

      // 将百分比转换为相对于数据集的百分比
      let startPercent = parseInt((startIndex / totalDataLength) * 100);
      let endPercent = parseInt((endIndex / totalDataLength) * 100);
      return [
        {
          // type: "slider",
          type: "inside",
          show: false,
          realtime: true, //拖动时，是否实时更新系列的视图
          start: startPercent,
          end: endPercent,
        },
      ];
    },
  },
  created() {
    this.id = "chart-" + util.newGUID();
    this.changeColor();
    this.chartData = JSON.parse(JSON.stringify(this.seriesData));
  },
  mounted() {
    this.$el.style.width = this.width;
    this.$el.style.height = this.height;
    this.initChart();
  },
  updated() {
    let myChart = echarts.init(document.getElementById(this.id));
    myChart.dispose();
    this.$nextTick(() => {
      this.initChart(this.markItem);
    });
  },
  unmounted() {
    this.markItem = {};
    window.removeEventListener("resize", this.resize);
  },

  watch: {
    "$store.state.theme"() {
      this.changeColor();
      this.initChart(this.markItem);
    },
    seriesData(data) {
      this.chartData = JSON.parse(JSON.stringify(this.seriesData));
    },
  },
};
</script>

<style lang="less">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>