<template>
  <el-row>
    <el-col :span="4" class="watchCss">{{ watchrate }}%</el-col>
    <el-col :span="20">
      <div class="Watchrate">
        <div
          class="nei"
          :style="'width:' + (watchrate / (zoom || 1)) * 100 + '%'"
        ></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// @ is an alias to /src
import * as echarts from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  VisualMapComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  BarChart,
  CanvasRenderer,
  ToolboxComponent,
  VisualMapComponent,
  LabelLayout,
  UniversalTransition,
]);
export default {
  name: "Watchrate",
  props: ["watchrate", "zoom"],
  data() {
    return {
      tableData: [],
      size: 10,
      current: 1,
      total: 1000,
    };
  },
  mounted() {},
  computed: {},
  methods: {},

  beforeUnmount: function() {},
  components: {},
};
</script>

<style>
.Watchrate {
  width: 100%;
  height: 1.5em;
  line-height: 1.5em;
  background-color: #eee;
  border-radius: 3px;
  overflow: hidden;
  text-align: left;
}
.nei {
  height: 1.5em;
  background: #398dee;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
}
.watchCss {
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  min-width: 4em;
}
</style>
