fj-dc-ui/.svn/pristine/0e/0e3907dd58f87a3e35d8b75e1803e158e3a555f4.svn-base

<!-- 格式
allData: {
  title: "下载名称",
  legend: [],
  xAxis: {},
  yAxis: {},
  series: []
}
 -->

<template>
  <v-chart @click="clickEvent" :options="chartData" />
</template>

<script>
import ECharts from 'vue-echarts'
// import "echarts/lib/chart/line"; // 折线图
// 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 {
      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",
          formatter: this.allData.formatter ? this.allData.formatter : {}
        },
        xAxis: this.allData.xAxis,
        yAxis: this.allData.yAxis,
        series: this.allData.series
      };
      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 || this.allData.toolbox != false) {
        data.toolbox = this.allData.toolbox
          ? this.allData.toolbox
          : {
              show: true,
              right: 20,
              top: 5,
              feature: {
                saveAsImage: {
                  name: this.allData.title
                    ? this.allData.title
                    : this.getNowFormatDate()
                }
              }
            };
      }
      if(this.allData.tooltip) {
        data.tooltip = this.allData.tooltip;
      }
      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>