基于vue封装的日期，月份，年份 组件 +echarts 环形图饼图

 

<template>
  <div class="m-x-t-b">
    <div class="mxtbTop">
      <div class="mxtbLeft">
        <div style="text-align: center">
          <el-radio-group v-model="timeType" @change="switchTimeType">
            <el-radio label="day">日</el-radio>
            <el-radio label="month">月</el-radio>
            <el-radio label="year">年</el-radio>
          </el-radio-group>
        </div>
        <datePicker v-show="timeType === 'day'" :date.sync="date1"></datePicker>
        <monthPicker v-show="timeType === 'month'"></monthPicker>
        <yearPicker v-show="timeType === 'year'"></yearPicker>
      </div>
      <div class="mxtbRight" style="position:relative">
        <div class="circleEcharts" ref="cicleEcharts"></div>
      </div>
      <div class="headRight">
        <el-radio-group v-model="timeType" @change="switchTimeType">
          <el-radio label="day">日</el-radio>
          <el-radio label="month">月</el-radio>
          <el-radio label="year">年</el-radio>
        </el-radio-group>

        <el-date-picker
          v-if="timeType === 'day'"
          key="date"
          type="date"
          v-model="queryDate"
          value-format="yyyy-MM-dd"
          :clearable="false"
          :editable="false"
          align="center"
          size="mini"
          placeholder="请选择时间"
          @change="getChartData"
        ></el-date-picker>
        <el-date-picker
          v-if="timeType === 'month'"
          key="month"
          type="month"
          v-model="queryMonth"
          value-format="yyyy-MM"
          :clearable="false"
          :editable="false"
          align="center"
          size="mini"
          placeholder="请选择时间"
          @change="getChartData"
        ></el-date-picker>
        <el-date-picker
          v-if="timeType === 'year'"
          key="year"
          type="year"
          v-model="queryYear"
          value-format="yyyy"
          :clearable="false"
          :editable="false"
          align="center"
          size="mini"
          @change="getChartData"
        ></el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
Date.prototype.format = function(fmt) {
  //author: meizz
  var o = {
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};
import datePicker from "../../../components/common/datePicker";
import monthPicker from "../../../components/common/monthPicker";
import yearPicker from "../../../components/common/yearPicker";
var colorList = ["#3396d7", "#1cbc98", "#ed7c30"];
export default {
  name: "collection_mxtb_index",
  components: { monthPicker, yearPicker, datePicker },
  data() {
    return {
      date1: new Date().format("yyyy-MM-dd"),
      dateValue: new Date(),
      queryDate: "",
      queryMonth: "",
      queryYear: "",
      timeType: "day",
      circleOption: {
        legend: {
          data: [
            {
              value: 220,
              name: "执行中"
            },
            {
              value: 180,
              name: "已完成"
            },
            {
              value: 150,
              name: "执行失败"
            }
          ],
          bottom: "5%",
          icon: "circle"
        },
        tooltip: {
          formatter: function(param) {
            return param.data.name + ":" + param.value + "个";
          }
        },
        title: {
          text: "当前任务状态",
          padding: [20, 20, 0, 50]
        },
        series: [
          {
            name: "整体分类",
            type: "pie",
            radius: [0, "30%"],
            label: {
              normal: {
                position: "center",
                formatter: "{c}",
                color: "#fff",
                fontSize: 25
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: function(params) {
                  retur