按照年，月，日等不同时间范围选择，加载echarts图报表

**
**

{{ dataListAll[item.totalField] }}

{{ item.title }}（个）

成功： {{ dataListAll[item.successField] }} 个

失败： {{ dataListAll[item.failField] }} 个

<el-row class="charts-row" :gutter="12">
  <el-col :span="13">
    <div class="div-charts">
      <p class="font-title">数据资产总览</p>
      <el-row class="info">
        <el-col :span="8">
          <img src="@/assets/img/other/dayD.png" alt />
          <span>
            105484
            <span class="info-text">今日新增（条）</span>
          </span>
        </el-col>
        <el-col :span="8">
          <img src="@/assets/img/other/weekD.png" alt />
          <span>
            105484
            <span class="info-text">本周新增（条）</span>
          </span>
        </el-col>
        <el-col :span="8">
          <img src="@/assets/img/other/mouthD.png" alt />
          <span>
            105484
            <span class="info-text">本月新增（条）</span>
          </span>
        </el-col>
        <!-- <el-col v-for="(item, index) in totalSaveMapping" :span="5" :key="index">
          <p class="font-title-sub">{{ item.title }}</p>
          <p
            v-show="assetsStaticList[0][item.field] >= 0"
            class="info-text font-title-sub"
          >{{ assetsStaticList[0][item.field] }} 条</p>
          <p class="info-text font-title-sub" v-show="assetsStaticList[0][item.field] < 0">0 条</p>
        </el-col>-->
      </el-row>
      <div class="font-text">
        <p>数据增长量</p>
        <div class="leftOk">
          <el-select v-model="dataparams.value" placeholder="请选择" @change="chiosTy">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <div v-if="dataparams.value === '0'" class="block">
            <el-date-picker
              v-model="dataparams.datelist"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions1"
            />
          </div>
          <div v-if="dataparams.value === '1'" class="block">
            <el-date-picker
              v-model="dataparams.datelist"
              type="monthrange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions2"
            />
          </div>
          <div v-if="dataparams.value === '2'" class="block yearLong">
            <el-date-picker
              ref="datePoint"
              class="lastFunction"
              v-model="dataparams.startTime"
              type="year"
              value-format="yyyy-MM-dd"
              placeholder="开始年份"
              @change="okTime"
              :picker-options="pickerOptions3"
            />
            <i>至</i>
            <el-date-picker
              v-model="dataparams.endTime"
              type="year"
              value-format="yyyy-MM-dd"
              placeholder="结束年份"
              @change="okTime"
              :picker-options="pickerOptions4"
            />
          </div>
        </div>
      </div>
      <!-- calc(32vh);calc(40vh - 80px) -->
      <el-row id="assetsStatic" style="margin-top: 10px;height: 80%" />
    </div>
  </el-col>
  <el-col :span="11">
    <div class="div-charts">
      <p class="font-title">数据资源目录</p>
      <el-row class="info">
        <el-col :span="12">
          <img src="@/assets/img/other/muluyi.png" alt />
          <span>
            105484
            <span class="info-text">目录资源（个）</span>
          </span>
        </el-col>
        <el-col :span="12">
          <img src="@/assets/img/other/zicaimulu.png" alt />
          <span>
            105
            <span class="info-text">二级目录数（个）</span>
          </span>
        </el-col>
        <!-- <el-col :span="12">
          <span>目录资源：</span>
          <span class="info-text">{{ catalogCount }} 个</span>
        </el-col>
        <el-col :span="12">
          <span>二级目录数：</span>
          <span class="info-text">{{ catalogSecond }} 个</span>
        </el-col>-->
      </el-row>

      <el-row v-if="isOk" style="padding-top: 10px;height: 100%">
        <!-- calc(100vh - 600px) -->
        <e-charts :items="item2" height="85%" />
      </el-row>
    </div>
  </el-col>
</el-row>

import { assetStatisticList } from ‘@/api/dmp/asset’
import {
statisticIndex,
statisticMenu,
statisticsByCondition
} from ‘@/api/dmp/statistics’
export default {
components: {
ECharts
},
computed: {
chiosType() {
return this.dataparams.value
}
watch: {
‘dataparams.datelist’: function (val) {
if (val) {
this.searchAdd()
}
}
},
data() {
return {
choiceDate: null,
pickerOptions1: {
onPick: ({ maxDate, minDate }) => {
// 把选择的第一个日期赋值给一个变量。
this.choiceDate = minDate.getTime()
// 如何你选择了两个日期了，就把那个变量置空
if (maxDate) this.choiceDate = ‘’
},
disabledDate: (time) => {
// 如何选择了一个日期
if (this.choiceDate) {
// 7天的时间戳
const one = 7 * 24 * 3600 * 1000
// 当前日期 - one = 7天之前
const minTime = this.choiceDate - one
// 当前日期 + one = 7天之后
const maxTime = this.choiceDate + one
return (
time.getTime() < minTime ||
time.getTime() > maxTime ||
// 限制不能选择今天及以后
time.getTime() > Date.now()
)
} else {
this.choiceDate = ‘’
// 如果没有选择日期，就要限制不能选择今天及以后
return time.getTime() > Date.now()
}
}
},
pickerOptions2: {
onPick: ({ maxDate, minDate }) => {
// 把选择的第一个日期赋值给一个变量。
this.choiceDate1 = ‘’
this.choiceDate1 = minDate.getTime()
// 如何你选择了两个日期了，就把那个变量置空
if (maxDate) this.choiceDate1 = ‘’
},
disabledDate: (time) => {
// 如何选择了一个日期
if (this.choiceDate1) {
const one = 7 * 30 * 24 * 3600 * 1000
const minTime = this.choiceDate1 - one
const maxTime = this.choiceDate1 + one
return (
time.getTime() < minTime ||
time.getTime() > maxTime ||
time.getTime() > Date.now()
)
} else {
// 如果没有选择日期，就要限制不能选择今天及以后
return time.getTime() > Date.now()
}
}
},
dataparams: {
value: ‘0’,
datelist: [],
startTime: ‘’,
endTime: ‘’
},
options: [
{
value: ‘0’,
label: ‘按天统计’
},
{
value: ‘1’,
label: ‘按月统计’
},
{
value: ‘2’,
label: ‘按年统计’
}
],
cardMapping: [
{
title: ‘标准评估任务’,
totalField: ‘pgSumNum’,
successField: ‘pgSuccessNum’,
failField: ‘pgFailNum’,
imgUrl: require(’@/assets/img/other/biaozhunD.png’)
},
{
title: ‘数据采集任务’,
totalField: ‘cjSumNum’,
successField: ‘cjSuccessNum’,
failField: ‘cjFailNum’,
imgUrl: require(’@/assets/img/other/caijiD.png’)
},
{
title: ‘数据质量任务’,
totalField: ‘cjSumNum’,
successField: ‘cjSuccessNum’,
failField: ‘cjFailNum’,
imgUrl: require(’@/assets/img/other/zhiliangD.png’)
},
{
title: ‘数据资产总量’,
totalField: ‘zlSumNum’,
successField: ‘zlSuccessNum’,
failField: ‘zlFailNum’,
imgUrl: require(’@/assets/img/other/zhicaiD.png’)
}
],
totalSaveMapping: [
{
title: ‘今日新增’,
field: ‘toDay’
},
{
title: ‘本周新增’,
field: ‘thisWeek’
},
{
title: ‘本月新增’,
field: ‘thisMonth’
},
{
title: ‘累计总量’,
field: ‘sum’
}
],
// --------
reload: true,
assetsStaticList: [
{
createDay: ‘----’,
id: 0,
sum: 0,
thisMonth: 0,
thisWeek: 0,
toDay: 0
}
],
sumList: [],
createDayList: [],
catalogCount: 0,
catalogSecond: 0,
// --------
dataListAll: {},
zonglanTop: [
{ name: ‘总储存量’, id: 1 } // ,
// { name: ‘总记录数’, id: 2 },
// { name: ‘实体表数’, id: 3 },
// { name: ‘资料总数’, id: 4 }
],
indexI: 1,
item2: {
color: [’#3398DB’],
tooltip: {
trigger: ‘axis’,
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：‘line’ | ‘shadow’
}
},
grid: {
left: ‘5%’,
right: ‘5%’,
top: 20,
bottom: 0,
containLabel: true
},
yAxis: [
{
// type: ‘category’,
data: [
‘新型数态’,
‘基础信息’,
‘公共卫生’,
‘计划生育’,
‘医疗服务’,
‘医疗保障’,
‘药品管理’,
‘综合管理’
],
axisTick: {
// y轴刻度线
show: false
},
axisLine: {
// 这是x轴文字颜色
lineStyle: {
color: ‘#9c9c9c’ // 刻度颜色
}
}
}
],
xAxis: {
show: true,
// type: ‘value’,
min: 0, // 设置y轴刻度的最小值
// max: 600000000, // 设置y轴刻度的最大值
// splitNumber: 5, // 设置y轴刻度间隔个数
minInterval: 1, // 设置最小刻度
axisTick: {
// y轴刻度线
show: true
},
axisLine: {
// 这是Y轴文字颜色
show: true,
lineStyle: {
color: ‘#9c9c9c’ // 刻度颜色
}
},
axisLabel: {
formatter: function (value) {
return value / 10000 + ‘w’
}
},
boundaryGap: [’-10%’, ‘10%’]
},
series: [
{
name: ‘数据量’,
type: ‘bar’,
barWidth: ‘30%’,
data: [0, 900, null, null, null, null, null, null],
itemStyle: {
normal: {
barBorderRadius: 7,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: ‘#83bff6’
},
{
offset: 0.5,
color: ‘#188df0’
},
{
offset: 1,
color: ‘#188df0’
}
])
}
}
}
]
},
item1: {
color: [’#3398DB’],
tooltip: {
trigger: ‘axis’,
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：‘line’ | ‘shadow’
}
},
grid: {
left: ‘3%’,
right: ‘4%’,
// bottom: ‘3%’,
containLabel: true
},
xAxis: [
{
type: ‘category’,
data: [
‘水路资源’,
‘公路局’,
‘交通厅’,
‘共享目录’,
‘船运数据’,
‘铁路数据’,
‘航运局’,
‘空运数据’,
‘交通系统’,
‘应急系统’
],
axisTick: {
alignWithLabel: true
},
axisLine: {
// 这是x轴文字颜色
lineStyle: {
color: ‘#9c9c9c’ // 刻度颜色
}
},
axisLabel: {
interval: 0,
textStyle: {
fontSize: 12 // 刻度大小
},
formatter: function (value) {
return value.split(’’).join(’\n’)
}
}
}
],
yAxis: [
{
type: ‘value’,
min: 0, // 设置y轴刻度的最小值
max: 2000, // 设置y轴刻度的最大值
// splitNumber: 5, // 设置y轴刻度间隔个数
interval: 1000,
axisLine: {
// 这是Y轴文字颜色
lineStyle: {
color: ‘#9c9c9c’ // 刻度颜色
}
}
}
],
series: [
{
type: ‘bar’,
barWidth: ‘60%’,
data: [1000, 1200, 300, 650, 1800, 1050, 1620, 1022, 500, 890],
// barWidth: 10,

        itemStyle: {
          normal: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#83bff6'
              },
              {
                offset: 0.5,
                color: '#188df0'
              },
              {
                offset: 1,
                color: '#188df0'
              }
            ]),
            barBorderRadius: 7
          }
        },
        // barGap: '-100%',
        barCategoryGap: '40%'
      }
    ]
  },
  isOk: false,
  scrollTarget: null,
  scrollCallback: null
}

},
mounted() {
function setPosition(popper, reference) {
const lastDom = document.getElementsByClassName(‘lastFunction’)[0]
popper.style.left = lastDom.offsetLeft + 200 + ‘px’
if (popper.attributes[‘x-placement’].value === ‘bottom-start’) {
popper.style.top = ${ reference.getBoundingClientRect().top + reference.getBoundingClientRect().height }px
} else {
popper.style.top = ${ reference.getBoundingClientRect().top - popper.getBoundingClientRect().height - 12 }px
}
}
// 监听时间组件的下拉框显隐（因为首次进入未曾渲染，所以得在其渲染出来才可以操作）
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.refs.datePoint.pickerVisible
},
(val) => {
// 下拉框的dom
const popper = this.$refs.datePoint.picker.$el
// 点击区域的dom，用于参考设置位置
const reference = this.$refs.datePoint.$el
function scrollCallback() {
setPosition(popper, reference)
}
!this.scrollCallback &&
(this.scrollCallback = scrollCallback.bind(this))
if (val) {
// 滚动目标区域
this.scrollTarget = this.$refs.datePoint.popperJS.state.scrollTarget//调用其自身方法去除事件监听（该方法在IIFE之内，在外部无法通过removeEventListener去除监听）this.$refs.datePoint.popperJS._removeEventListeners()
// 下拉框渲染完毕重设位置，加setTimeout是为简单处理dom渲染，不然一些诸如getBoundingClientRect方法取得值不是渲染之后的
this.$refs.datePoint.picker.$nextTick(function () {
setPosition(popper, reference)
})
// 通过之前保存的滚动目标区域添加scroll的监听，使得滚动时可以重设位置
// this.scrollTarget.addEventListener(‘scroll’, this.scrollCallback)
} else {
// 当然，下拉框去除也得去除监听
this.scrollTarget.removeEventListener(‘scroll’, this.scrollCallback)
}
}
)
},

created() {
this.init()
},
methods: {
init() {
this.getDataIndex()
this.statisticsMl()
this.getAssetsStaticList()
},
chiosTy(val) {
// 选择type后修改时间选择器
// this.dataparams.datelist = []
},
okTime() {
const start = Date.parse(this.dataparams.startTime)
const end = Date.parse(this.dataparams.endTime)
if (start && end) {
if (start > end) {
this.msgWarn(‘开始年份不能大于结束年份’)
return
}
this.searchAdd()
}
},
searchAdd() {
const params = {
startTime:
this.dataparams.value === ‘2’
? this.dataparams.startTime
: this.dataparams.datelist[0],
endTime:
this.dataparams.value === ‘2’
? this.dataparams.endTime
: this.dataparams.datelist[1],
type: this.dataparams.value
}
statisticsByCondition(params).then((res) => {
console.log(888, res)
})
},
getDataIndex() {
statisticIndex().then((res) => {
this.dataListAll = res.data
})
},
statisticsMl() {
this.isOk = false
statisticMenu().then((res) => {
// console.log(’****’, res)
this.catalogCount = res.count
this.catalogSecond = res.countParent
this.item2.series[0].data = res.sumList
this.isOk = true
})
},
changeCheck(id) {
this.indexI = id
},
getAssetsStaticList() {
this.reload = false
assetStatisticList(1, 7).then((res) => {
if (res.code === this.constants.request.RESPONSE_TYPE_CODE.SUCCESS) {
this.assetsStaticList = res.data.records
this.sumList = [12, 15, 18, 100, 6, 9, 66]
this.createDayList = res.createDayList
var myChart = this.$echarts.init(
document.getElementById(‘assetsStatic’)
)
myChart.setOption({
xAxis: {
type: ‘category’,
boundaryGap: [‘2%’, ‘2%’],
data: this.createDayList,
axisLine: {
// 这是Y轴文字颜色
lineStyle: {
color: ‘#9c9c9c’
}
}
},
grid: {
left: 30,
right: 30,
top: 20,
bottom: 5,
containLabel: true
},
yAxis: {
type: ‘value’,
// min: 0, // 设置y轴刻度的最小值
// max: 3000, // 设置y轴刻度的最大值
// splitNumber: 3, // 设置y轴刻度间隔个数
minInterval: 1, // 设置最小刻度
axisLine: {
// 这是Y轴文字颜色
lineStyle: {
color: ‘#9c9c9c’
}
},
boundaryGap: [’-10%’, ‘20%’]
},
series: [
{
// data: [1298, 1032, 1524, 988, 1987, 1674, 1333],
data: this.sumList,
type: ‘line’,
symbol: ‘circle’, // 拐点类型
color: ‘#4074e1’, // 拐点颜色
label: {
show: true,
position: ‘top’,
fontSize: 14,
color: ‘#4074e1’
},
itemStyle: {
normal: {
borderColor: ‘#4074e1’, // 拐点边框颜色
lineStyle: {
width: 1, // 设置线宽
type: ‘solid’, // 'dotted’虚线 'solid’实线,
color: ‘#4074e1’
}
}
},
areaStyle: {
color: ‘#d8e3f9’
}
}
]
})
}
})
}
}
}