project-neic/src/components/focus/multiple-line-chart.vue

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

<script>
  import * as echarts from "echarts";

  export default {
    name: "multiple-line-chart",
    componentName: "multiple-line-chart",
    watch: {
      'list': {
        deep: true,
        handler: function (json) {
          this.initChart()
        }
      }
    },
    props: {
      width: {
        type: String,
        default: "100%",
      },
      height: {
        type: String,
        default: "13.889vh",
      },
      // 数据
      list: {
        type: Array,
        default: () => [
          {
            title: "有功设定限值(MW)",
            yAxisIndex: 0,
            value: [],
          },
          {
            title: "实发有功(MW)",
            yAxisIndex: 0,
            value: [],
          },
        ],
      },
      colors: {
        type: Array,
        default: () => ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"]
      },
      // 单位
      units: {
        type: Array,
        default: () => ["(MW)", "(风速)"],
      },
      showLegend: {
        type: Boolean,
        default: false,
      },
      hoverType: {
        type: String,
        default: "item",
      },
    },
    data() {
      return {
        id: "",
        chart: null,
        // colors: ["#ffffff", "#ffffff"],
      };
    },
    computed: {
      datas() {
        return this.list.map((t) => {
          return t.value;
        });
      },
      legend() {
        return this.list.map((t) => {
          return t.title;
        });
      },
      xdata() {
        if (this.list.length > 0)
          return this.list[0].value.map((t) => {
            return t.text;
          });
        return [];
      },
      series() {
        let result = [];
        this.list.forEach((value, index) => {
          result.push({
            name: value.title,
            type: "line",
            smooth: true,
            showSymbol: false,
            zlevel: index,
            lineStyle: {
              normal: {
                color: this.colors[index],
                width: 1,
              },
            },
            itemStyle: {
              normal: {
                color: this.colors[index],
              },
            },
            tooltip: {
              show: true,
              position: [10, 10],
            },
            yAxisIndex: value.yAxisIndex,
            data: value.value.map((t) => {
              return t.value;
            }),
          });
        });

        return result;
      },
      yAxis() {
        let result = [];
        this.units.forEach((value, index) => {
          result.push({
            type: "value",
            name: value,
            axisLabel: {
              formatter: "{value}",
              fontSize: 14,
            },
            axisLine: {
              show: false,
            },
            //分格线
            splitLine: {
              show: index == 0,
              lineStyle: {
                color: '#606769',
                type: "dashed",
              },
            },
          });
        });

        return result;
      },
    },
    methods: {
      hexToRgba(hex, opacity) {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      },
      resize() { },
      initChart() {
        let chart = echarts.init(this.$el);

        let option = {
          color: this.colors,
          tooltip: {
            trigger: this.hoverType,
            axisPointer:
              this.hoverType != "item"
                ? {
                  type: "cross",
                }
                : {},
            backgroundColor: "rgba(0,0,0,0.4)",
            borderColor: '#606769',
            textStyle: {
              fontSize: 16,
              color: "#4B55AE",
            },
          },
          legend: {
            show: this.showLegend,
            data: this.legend,
            right: 56,
            icon: "circle",
            itemWidth: 6,
            inactiveColor: '#606769',
            textStyle: {
              color: '#B3BDC0',
              fontSize: 12,
            },
          },
          grid: {
            top: 32,
            left: 40,
            right: 40,
            bottom: 24,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLabel: {
                interval: 60,
                showMinLabel: true,
                showMaxLabel: true,
                formatter: "{value}",
                fontSize: 14,
                textStyle: {
                  color: '#606769',
                },
              },
              axisLine: {
                show: false,
              },
              data: this.xdata,
            },
          ],
          yAxis: this.yAxis,
          series: this.series,
          // series: [
          //   {
          //     name: this.list[0].title,
          //     type: "line",
          //     smooth: true,
          //     showSymbol: false,
          //     zlevel: 0,
          //     lineStyle: {
          //       normal: {
          //         color: "#4B55AE",
          //         width: 1,
          //       },
          //     },
          //     tooltip: {
          //       show: true,
          //       position: [10, 10],
          //     },
          //     yAxisIndex: this.list[0].yAxisIndex,
          //     data: this.list[0].value.map((t) => {
          //       return t.value;
          //     }),
          //   },
          //   {
          //     name: this.list[1].title,
          //     type: "line",
          //     smooth: true,
          //     showSymbol: false,
          //     zlevel: 1,
          //     lineStyle: {
          //       normal: {
          //         color: "#05BB4C",
          //         width: 1,
          //       },
          //     },
          //     tooltip: {
          //       show: true,
          //       position: [10, 10],
          //     },
          //     yAxisIndex: this.list[1].yAxisIndex,
          //     data: this.list[1].value.map((t) => {
          //       return t.value;
          //     }),
          //   }
          // ],
        };
        chart.clear();
        chart && option && chart.setOption(option);
        this.resize = function () {
          chart.resize();
        };
        window.addEventListener("resize", this.resize);
        chart.resize();
      },
    },
    created() {
      this.$nextTick(() => {
        this.id = "pie-chart-photo";
      });
    },
    mounted() {
      this.$nextTick(() => {
        this.$el.style.width = this.width;
        this.$el.style.height = this.height;
        this.initChart();
      });
    },
    updated() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    unmounted() {
      window.removeEventListener("resize", this.resize);
    },
  };
</script>

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