yudao-init/src/views/copilot/components/LineChartBase.vue

<!--
    filename: LineChartBase.vue
    author: liubin
    date: 2024-04-30 08:59:28
    description:
-->

<template>
  <chart-container class="line-chart-base">
    <div class="legend">
      <span v-for="item in legend" :key="item.label" class="legend-item"
        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
    </div>
    <div ref="elsChart" :style="{ height: '95%',width: width}"></div>
  </chart-container>
</template>

<script>
import screenfull from "screenfull";
import { debounce } from "@/utils/debounce";
import ChartContainer from "./ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
  name: "LineChartBase",
  components: {
    ChartContainer,
  },
  // mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
      default: 38,
    },
    legend: {
      type: Array,
      required: true,
    },
    // xAxis: {
    //   type: Array,
    //   required: true,
    // },
    series: {
      type: Object,
      required: true,
    },
    in: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      width: '100%',
      isFullscreen: false,
      actualOptions: null,
      options: {
        grid: {
          left: "5%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        // title: {
        //   text: 'Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:{
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
        yAxis: {
            min: function () { // 取最小值向下取整为最小刻度
              return 0
            },
            max: function (value) { // 取最大值向上取整为最大刻度
            },
            scale: true,
            type: 'value',
            name: 'kw/h',
            // max: 100,//最大值
            // min: 0,//最小值
            // interval: 20,//间隔
            nameTextStyle: {// y轴上方单位的颜色
              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
              align: "right",
              padding: [0, 0, 0, 2]
            },
            // position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                // type: 'solid',
                color: '#25528f',
                // width: '1' // 坐标线的宽度
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
              fontSize: 12,
              // formatter: '{value}'
              formatter: '{value}'
              // }
            },
            splitLine: {
              lineStyle: {
                color: '#25528f'
              }
            }
            // type: 'value'
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: colors[0]
            //   }
            // },
          },
        series: [
          {
            name: '瑞昌',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#8167F6'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#8167F6', //改变折线点的颜色
                lineStyle: {
                  color: '#8167F6' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '邯郸',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2760FF'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#2760FF', //改变折线点的颜色
                lineStyle: {
                  color: '#2760FF' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '株洲',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#5996F7'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#5996F7', //改变折线点的颜色
                lineStyle: {
                  color: '#5996F7' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '佳木斯',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#8BC566'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#8BC566', //改变折线点的颜色
                lineStyle: {
                  color: '#8BC566' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '成都',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#11FAF0'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#11FAF0', //改变折线点的颜色
                lineStyle: {
                  color: '#11FAF0' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '凯盛',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#F3C000'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#F3C000', //改变折线点的颜色
                lineStyle: {
                  color: '#F3C000' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '蚌埠',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#F38600'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 234, 153, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                color: '#F38600', //改变折线点的颜色
                lineStyle: {
                  color: '#F38600' //改变折线颜色
                }
              }
            },
            // emphasis: {
            //   focus: 'series'
            // },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
        ]
      },
    };
  },
  computed: {
    isOpen() {
      return this.$store.getters.sidebar.opened
    },
  },
  watch: {
    isOpen(val) {
      if (val === true) {
        this.width = 97 + '%'
        this.canvasReset()
        console.log(this.width)
      } else {
        this.width = 100 + '%'
        this.canvasReset()

      }
    },
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
      if (val === false && this.isOpen === true) {
        this.width = 97 + '%'
        this.canvasReset()
      } else if (val === false && this.isOpen === false) {
        this.width = 100 + '%'
        this.canvasReset()

      }
      // this.actualOptions.series.map((item) => {
      //   item.barWidth = val ? 18 : 12;
      // });
      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
      this.initChart(this.actualOptions);
    },
    series(val) {
      if (!val) {
        this.initChart(this.options);
        return;
      }
      const actualOptions = JSON.parse(JSON.stringify(this.options));
      actualOptions.xAxis.data = val.times
      actualOptions.series[0].data = val[0]
      actualOptions.series[1].data = val[1];
      actualOptions.series[2].data = val[2];
      actualOptions.series[3].data = val[3];
      actualOptions.series[4].data = val[4];
      actualOptions.series[5].data = val[5];
      actualOptions.series[6].data = val[6];

      this.actualOptions = actualOptions;
      this.initChart(actualOptions);
    },
  },

  mounted() {
    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
    this.actualOptions = this.options
    this.canvasReset();
    window.addEventListener("resize", this.canvasReset);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.canvasReset);
  },
  methods: {
    canvasReset() {
      debounce(() => {
        this.initChart();
      }, 500)();
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.elsChart);
      this.chart.setOption(this.actualOptions);
    },
  },
};
</script>

<style scoped lang="scss">
.line-chart-base {
  // position: relative;

  .legend {
    position: absolute;
    top: 5.2vh;
    right: 1vw;
  }

  .legend-item {
    position: relative;
    // font-size: 12px;
    margin-right: 2vw;

    &::before {
      content: "";
      display: inline-block;
      width: 0.432vw;
      height: 0.432vw;
      border-radius: 100%;
      margin-right: 0.4vw;
    }

    &::after {
      content: "";
      display: inline-block;
      width: 1vw;
      height: 0.125vw;
      position: absolute;
      top: 54%;
      left: -15%;
      transform: translateY(-50%);
      border-radius: 100;
      margin-right: 0.22vw;
    }
  }

  .legend-item:nth-child(1):after,
  .legend-item:nth-child(1):before {
    background-color: #8167F6;
  }

  .legend-item:nth-child(2):after,
  .legend-item:nth-child(2):before {
    background-color: #2760FF;
  }

  .legend-item:nth-child(3):after,
  .legend-item:nth-child(3):before {
    background-color: #5996F7;
  }

  .legend-item:nth-child(4):after,
  .legend-item:nth-child(4):before {
    background-color: #8BC566;
  }

  .legend-item:nth-child(5):after,
  .legend-item:nth-child(5):before {
    background-color: #11FAF0;
  }

  .legend-item:nth-child(6):after,
  .legend-item:nth-child(6):before {
    background-color: #F3C000;
  }

  .legend-item:nth-child(7):after,
  .legend-item:nth-child(7):before {
    background-color: #F38600;
  }
}
</style>