2022

.

(PC)

.

.

6S

.

5G

 ITS

2. 1

3. 103

htmlindex.html.rphtml

.docx.docx,

.xlsx,

3sql.sql.mp4sql

.rar

• F11

• ---

• Vue3 Vite Echarts pnpm Node AxiosMock.js

• master

• public

2

	/
main.js	Echart/DataV
utils	mixins
views/ home.vue
views/
assets	logo
assets / css/	CSS
components/echart	echart
common/...	ECharts flexible
api/api.js
mock

pnpm install   

pnpm run dev

mock

// src\main.ts

import { mockXHR } from "~/mock/index";
mockXHR()

Scaleoverflow:hidden

<script setup lang="ts">
import ScaleScreen from "scale-screen";
</script>

<template>
  <ScaleScreen width="1920" height="1080">
    <div>
      content
    </div>
  </ScaleScreen>
</template>

API

selfAdaption		Boolean	true
width		Number or String	1920
height		Number or String	1080
autoScale	booleanxtruexytrueyfullScreen	Boolean or {x:boolean,y:boolean}	true
delay		Number	500
fullScreen	autoScale	Boolean	false
boxStyle	Vuestyle	Object	null
wrapperStyle	Vuestyle	Object	null

title,

src\components\item-wrap\item-wrap.vue

<ItemWrap
    title="title"
    >
       <div>Hello World</div>
</ItemWrap>

title		-	string	-

CountUp

coutup.js same as countup.js properties

Props

Name	Type	Default	Description
endVal	Number | String	-
startVal	Number | String	0
duration	Number	2.5
options	Object	-	countUp.js options

extension properties

Name	Type	Default	Description
autoplay	Boolean	true
loop	Boolean | Number	false	/
delay	Number	0	loop

slots

Name	Description
prefix
suffix

Events

Name	Description	return
@init	CountUp	CountUp
@finished		-

countup.js

interface CountUpOptions {
  startVal?: number; // number to start at (0)  0
  decimalPlaces?: number; // number of decimal places (0)  
  duration?: number; // animation duration in seconds (2) 
  useGrouping?: boolean; // example: 1,000 vs 1000 (true) 
  useEasing?: boolean; // ease animation (true) easeOutExpo
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',') 
  decimal?: string; // decimal ('.') 
  // easingFn: easing function for animation (easeOutExpo) 
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result 
  prefix?: string; // text prepended to result 
  suffix?: string; // text appended to result 
  numerals?: string[]; // numeral glyph substitution  0 - 9 [a,b,c,d,e,f,g,h,i,j]
  enableScrollSpy?: boolean; // start animation when target is in view 
  scrollSpyDelay?: number; // delay (ms) after target comes into view  ()
}

Props

data		Array<Object>	data	[]
config		Object	config	false

config

unit		String	---	''
colors		Array<String>	[1]	[2]
showValue		Boolean	---	false

config

[1] hex|rgb|rgba|

[2] ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']

data

name		String	---	---
value		Number	---	---

---

indexs/center-map.vue isSouthChinaSea (false),true

isSouthChinaSea:false,//true

filter

{{10.23123|montionFilter }}