zhny_ui/ems-ui/src/components/Block/charts/LineChartBlock.vue

<template>
  <div
      class="grid-content bg-purple"
      v-resize='initChart'
  >
    <div class="grid-title">{{ title }}</div>
    <div class="filters">
      <slot name="filters"></slot>
    </div>
    <div class="grid-chart" :id="id">
    </div>
  </div>

</template>

<script>

import { copyObj, uuid } from '@/utils';
import * as echarts from 'echarts';
import SwitchTag from '../../SwitchTag/index.vue';

const basicSerie = {
  type: 'line',
  areaStyle: {
    color: '#d7e4fc',
    emphasis: {
      color: '#6093f5',
    },
  },
};
const opts = {
  grid: {
    top: 10,
    bottom: 20,
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    name: 'kw·h',
    nameLocation: 'middle',
    nameTextStyle: {
      color: '#000',
      fontSize: '14px',
      lineHeight: 56,
    },
  },
  series: [],
};
export default {
  components: { SwitchTag },
  props: {
    title: {
      default: '标题',
      type: String,
    },
    optCfg: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    optCfg: {
      handler(val) {
        this.initChart();
      },
      deep: true,
    },
  },
  data() {
    return {
      id: uuid(),
      refCharts: null,
    };
  },
  mounted() {
    this.$nextTick(this.initChart);
  },
  created() {
  },
  methods: {
    initChart() {
      this.refCharts && this.refCharts.clear();
      const chartDom = document.getElementById(this.id);
      this.refCharts = echarts.init(chartDom);
      const option = copyObj(opts);
      this.optCfg.series.forEach((item, index) => {
        const serie = copyObj(basicSerie);
        Object.assign(serie, item);
        option.series.push(serie);
      });
      option.xAxis = this.optCfg.xAxis;
      option.yAxis.name = this.optCfg.unit || "kw·h"
      option && this.refCharts && this.refCharts.setOption(option);
      this.refCharts.resize();
    },
  },
};
</script>
<style src="./index.scss" lang="scss" />