fd_dwgz_zhyw/src/views/HealthControl/energyEfficAnalyse/powerHotAnalyse/components/current-scatter-chart.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@tools/util";
import partten from "@/helper/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,
      color: [
        "#05bb4c",
        "#4b55ae",
        "#fa8c16",
        "#f8de5b",
        "#1a93cf",
        "#c531c7",
        "#bd3338",
      ],
      theme: "dark",
    };
  },
  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() {},
    initChart() {
      const that = this;
      echarts.registerTheme("chartTheme", chartTheme);
      let myChart = echarts.init(
        document.getElementById(this.id),
        "chartTheme"
      );
      that.chart = myChart;
      //指定图表的配置项和数据
      const option = {
        //标题
        title: {
          text: that.chartTitle,
          left: 440,
          top: 4,
          textStyle: {
            fontSize: 14,
            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
          },
        },
        // backgroundColor:
        //   that.theme === "dark"
        //     ? "rgba(0,0,0,0.4)"
        //     : "rgba(255,255,255,0.5)",
        //工具箱
        color: [
          "#3D54BE",
          "rgb(255,0,0)",
          "#a1a1a1",
          "#0098d9",
          "#FF8700",
          "#005eaa",
          "#cda819",
          "#32a487",
        ],
        toolbox: {
          show: true,
          x: "right",
          position: [10, 10],
          // backgroundColor:'rgba(0,0,0,0.4)',
          borderColor: "#ccc",
          textStyle: {
            fontSize: 16,
            color: "#ccc",
          },
          iconStyle: {
            borderColor: "#ccc",
          },
          emphasis: {
            iconStyle: {
              borderColor: "#ccc",
            },
          },
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
          },
          backgroundColor: "rgba(0,0,0,0.4)",
          borderColor: partten.getColor("gray"),
          textStyle: {
            fontSize: util.vh(16),
            color: "#fff",
          },
          formatter(params) {
            return params.value.x
              ? `${params.seriesName}<br />光照：${params.value.x} W/m²<br />功率：${params.value.y} kW<br />温度：${params.value.s} ℃`
              : `${params.name}`;
          },
        },
        brush: {
          seriesIndex: [1, 2],
          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: 16,
          color: that.theme === "dark" ? "#fff" : "#000",
        },
        //图例-每一条数据的名字
        legend: {
          show: that.showLegend,
          data: that.seriesData.map((i) => i.name),
          right: "120",
          top: "5",
          // icon: "circle",
          itemWidth: 6,
          inactiveColor:
            that.theme === "dark" ? partten.getColor("gray") : "#838383",
          textStyle: {
            color:
              that.theme === "dark" ? partten.getColor("grayl") : "#838383",
            fontSize: 12,
          },
        },
        visualMap: [
          {
            type: "continuous",
            min: -40,
            max: 60,
            dimension: 2,
            orient: "vertical",
            right: 4,
            top: 50,
            itemHeight: 600,
            text: ["60", "-40"],
            textStyle: {
              color: "#ccc",
            },
            calculable: false,
            range: [-40, 60],
            inRange: {
              color: [
                "#000",
                "rgb(75,11,106)",
                "rgb(133,33,106)",
                "rgb(176,49,92)",
                "rgb(210,70,69)",
                "rgb(235,100,42)",
                "rgb(247,126,21)",
                "rgb(252,183,28)",
                "rgb(249,252,156)",
              ],
            },
            outOfRange: {
              color: ["#eee", "#eee"],
            },
          },
        ],
        grid: {
          top: 48,
          left: 40,
          right: 50,
          bottom: 24,
          containLabel: true,
        },
        //x轴
        xAxis: [
          {
            name: "光照",
            nameTextStyle: {
              color: "#838383",
            },
            type: "value",
            boundaryGap: false,
            data: that.xAxisData || [],
            min: 0,
            max: "dataMax",
            // interval: 1,
            axisLabel: {
              formatter: "{value}",
            },
            splitLine: {
              show: false,
            },
            textStyle: {
              color: that.theme === "dark" ? partten.getColor("gray") : "#000",
            },
          },
        ],
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: [
          {
            splitLine: { show: false },
            position: "left",
            min: 0,
            name: "kW",
            nameTextStyle: {
              color: "#838383",
            },
          },
          {
            splitLine: { show: false },
            position: "right",
            min: 0,
          },
        ],
        animation: true,
        dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
        //数据-data是最终要显示的数据
        series: that.seriesData,
      };

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

      window.addEventListener("resize", that.resize);
      myChart.setOption(option);
      if (that.brushSelected) {
        myChart.dispatchAction({
          type: "takeGlobalCursor",
          // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
          key: "brush",
          brushOption: {
            seriesIndex: [2, 3],
            yAxisIndex: 0,
            transformable: true,
            throttleType: "debounce",
            throttleDelay: 1000,
            removeOnClick: true,
            brushType: "polygon",
            brushMode: "multiple",
            brushStyle: {
              borderWidth: 1,
              color: "rgba(255,36,36,0.2)",
              borderColor: "#ff2424",
            },
          },
        });
      }
      myChart.off("brushSelected");
      myChart.on("brushSelected", (params) => {
        console.log(params);
        that.$emit("getSelected", params.batch || []);
      });
      myChart.off("click");
      myChart.on("click", (params) => {
        if (params.componentType === "markArea") {
          myChart.dispatchAction({
            type: "brush",
            areas: [
              {
                xAxisIndex: 0,
                brushType: "lineX",
                coordRange: [params.data.coord[0][0], params.data.coord[1][0]],
              },
            ],
          });
        }
      });
    },
  },
  created() {
    this.id = "chart-" + util.newGUID();
  },
  mounted() {
    // this.$nextTick(() => {
    this.$el.style.width = this.width;
    this.$el.style.height = this.height;
    this.initChart();
    if (this.chart) {
      this.chart.resize();
    }
    // });
  },
  updated() {
    // console.log('update')
    let myChart = echarts.init(document.getElementById(this.id));
    myChart.dispose();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  unmounted() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

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