fj-dc-ui/.svn/pristine/a8/a8155e6cc909af7cc894d117aa691ad183f31ff4.svn-base

<!-- 格式
allData: {
  title: "下载名称",
  legend: [],
  xAxis: {},
  yAxis: {},
  series: [],
  formatter: '浮层'
}
 -->
<template>
  <v-chart
    @click="clickEvent"
    :options="chartData"
  />
</template>

<script>
import ECharts from "vue-echarts";
// import "echarts/lib/chart/bar"; // 柱状图
// import "echarts/lib/component/legend"; // 图例
// import "echarts/lib/component/tooltip"; // 浮层显示
// import "echarts/lib/component/toolbox"; // 下载工具等

export default {
  props: ["allData"],
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      show: false,
      color: [
        "#1890ff",
        "#2fc25b",
        "#facc14",
        "#223273",
        "#8543e0",
        "#13c2c2",
        "#3436c7",
        "#f04864",
        "#4212af",
        "#ffda00",
        "#ff1e00",
        "#00bf32",
        "#ffe340",
        "#ffeb73",
        "#ff5640",
        "#ff8373",
        "#248f40",
        "#007c21",
        "#462b83",
        "#270672",
        "#bfaa30",
        "#a68e00",
        "#bf4030",
        "#a61300",
        "#38df64",
        "#64df85",
        "#7247d7",
        "#8d6dd7"
      ]
    };
  },
  computed: {
    chartData() {
      let data = {
        color: this.color,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: this.allData.formatter ? this.allData.formatter : {}
        },
        series: this.allData.series,
        xAxis: this.allData.xAxis,
        yAxis: this.allData.yAxis
      };
      if (this.allData.legend) {
        data.legend = this.allData.legend;
      }
      if (this.allData.grid) {
        data.grid = this.allData.grid;
      }
      if (this.allData.dataZoom) {
        data.dataZoom = this.allData.dataZoom;
      }
      if (this.allData.toolbox) {
        data.toolbox = this.allData.toolbox;
      } else if (this.allData.toolbox != false) {
        data.toolbox = {
          show: true,
          right: 20,
          top: 5,
          feature: {
            saveAsImage: {
              name: this.allData.title
                ? this.allData.title
                : this.getNowFormatDate()
            }
          }
        };
      }
      return data;
    }
  },
  methods: {
    clickEvent(data) {
      this.$emit("showInfo", data);
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (this.allData.backgroundColor) {
        data.backgroundColor = this.allData.backgroundColor;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  }
};
</script>