<!-- 
    filename: chart.vue
    author: liubin
    date: 2023-09-08 13:53:04
    description: 
-->

<template>
  <div class="yx-dark-chart">
    <LineChart
      key="1"
      id="line-chart-1"
      class="flex-1"
      unit="单位 kg/h"
      :legend="Object.keys(oilTable1)"
      :series="oilTable1"
    />
    <div class="vertical-line"></div>
    <LineChart
      key="2"
      id="line-chart-2"
      class="flex-1"
      unit="单位 kg/h"
      :legend="Object.keys(oilTable2)"
      :series="oilTable2"
    />
  </div>
</template>

<script>
import LineChart from "./components/LineChart.vue";
import { mapState } from "vuex";

export default {
  name: "YxDarkChart",
  components: { LineChart },
  props: ["data-source"],
  data() {
    return {};
  },
  computed: {
    ...mapState(["oilTable1", "oilTable2"]),
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.yx-dark-chart {
  height: 100%;
  display: flex;
}

.flex-1 {
  width: 1px;
  flex: 1;
}

.vertical-line {
  margin: 0 6px;
  width: 6px;
  background: radial-gradient(
    ellipse at center,
    #6fe2ff,
    #52cbef80,
    transparent,
    transparent
  );
}
</style>
