feat:增加eslint+prettier 代码校验格式化
This commit is contained in:
zouzhibing
parent
759763c875
commit
efa0fcab52
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
*.sh
|
||||
node_modules
|
||||
*.md
|
||||
*.woff
|
||||
*.ttf
|
||||
.vscode
|
||||
.idea
|
||||
dist
|
||||
/public
|
||||
/docs
|
||||
.husky
|
||||
.local
|
||||
/bin
|
||||
Dockerfile
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true,
|
||||
"node":true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/vue3-essential",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
'plugin:prettier/recommended'
|
||||
],
|
||||
"parser": "vue-eslint-parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"vue",
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"rules": {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/dist/*
|
||||
.local
|
||||
.output.js
|
||||
/node_modules/**
|
||||
|
||||
**/*.svg
|
||||
**/*.sh
|
||||
|
||||
/public/*
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
|
||||
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
|
||||
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-scroll/core": "^2.4.2",
|
||||
|
|
@ -47,14 +48,19 @@
|
|||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"dart-sass": "^1.25.0",
|
||||
"eslint": "^8.21.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"fast-glob": "^3.2.11",
|
||||
"prettier": "^2.7.1",
|
||||
"typescript": "^4.6.4",
|
||||
"unplugin-auto-import": "^0.10.3",
|
||||
"unplugin-vue-components": "^0.21.2",
|
||||
"unplugin-vue-define-options": "^0.7.3",
|
||||
"vite": "^3.0.0",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^0.38.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
// 一行的字符数，如果超过会进行换行，默认为80
|
||||
printWidth: 100,
|
||||
// 行位是否使用分号，默认为true
|
||||
semi: false,
|
||||
vueIndentScriptAndStyle: true,
|
||||
// 字符串是否使用单引号，默认为false，使用双引号
|
||||
singleQuote: true,
|
||||
// 是否使用尾逗号，有三个可选值"<none|es5|all>"
|
||||
trailingComma: 'all',
|
||||
proseWrap: 'never',
|
||||
htmlWhitespaceSensitivity: 'strict',
|
||||
endOfLine: 'auto',
|
||||
};
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
}
|
||||
html,body{
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background: #f6f8f9;
|
||||
|
||||
}
|
||||
.el-pager li:focus {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -11,24 +11,24 @@ export default {
|
|||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -57,44 +57,48 @@ export default {
|
|||
backgroundColor: '#08263a',
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%'
|
||||
right: '5%',
|
||||
},
|
||||
xAxis: [{
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}, {
|
||||
data: xAxisData,
|
||||
},
|
||||
{
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}],
|
||||
data: xAxisData,
|
||||
},
|
||||
],
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 50,
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
||||
}
|
||||
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'],
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4a657a'
|
||||
}
|
||||
color: '#4a657a',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#08263f'
|
||||
}
|
||||
color: '#08263f',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
series: [{
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'back',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
|
|
@ -104,10 +108,11 @@ export default {
|
|||
opacity: 0.4,
|
||||
barBorderRadius: 5,
|
||||
shadowBlur: 3,
|
||||
shadowColor: '#111'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
shadowColor: '#111',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Simulate Shadow',
|
||||
type: 'line',
|
||||
data,
|
||||
|
|
@ -118,17 +123,18 @@ export default {
|
|||
animationDuration: 1200,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: 'transparent'
|
||||
}
|
||||
color: 'transparent',
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#08263a',
|
||||
shadowBlur: 50,
|
||||
shadowColor: '#000'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
shadowColor: '#000',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'front',
|
||||
type: 'bar',
|
||||
data,
|
||||
|
|
@ -136,10 +142,11 @@ export default {
|
|||
z: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}],
|
||||
barBorderRadius: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
animationEasing: 'elasticOut',
|
||||
animationEasingUpdate: 'elasticOut',
|
||||
animationDelay(idx) {
|
||||
|
|
@ -147,9 +154,9 @@ export default {
|
|||
},
|
||||
animationDelayUpdate(idx) {
|
||||
return idx * 20
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,34 +3,34 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from 'echarts'
|
||||
import {computed, nextTick, onMounted, ref, watch} from "vue";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {useStore} from "vuex";
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { useStore } from 'vuex'
|
||||
// 在setup中获取store
|
||||
const store = useStore()
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const isCollapse = computed(() => {
|
||||
return store.state.app.isCollapse
|
||||
})
|
||||
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
|
|
@ -42,17 +42,17 @@ const initChart =()=> {
|
|||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16,
|
||||
color: '#F1F1F3'
|
||||
color: '#F1F1F3',
|
||||
},
|
||||
left: '1%'
|
||||
left: '1%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
|
|
@ -64,50 +64,68 @@ const initChart =()=> {
|
|||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#F1F1F3'
|
||||
}
|
||||
color: '#F1F1F3',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [{
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
color: '#57617B',
|
||||
},
|
||||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||||
}],
|
||||
yAxis: [{
|
||||
},
|
||||
data: [
|
||||
'13:00',
|
||||
'13:05',
|
||||
'13:10',
|
||||
'13:15',
|
||||
'13:20',
|
||||
'13:25',
|
||||
'13:30',
|
||||
'13:35',
|
||||
'13:40',
|
||||
'13:45',
|
||||
'13:50',
|
||||
'13:55',
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(%)',
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
color: '#57617B',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'CMCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
|
|
@ -116,32 +134,42 @@ const initChart =()=> {
|
|||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
color: 'rgba(137, 189, 27, 0.3)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
color: 'rgba(137, 189, 27, 0)',
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
borderWidth: 12,
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
|
||||
},
|
||||
{
|
||||
name: 'CTCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
|
|
@ -150,32 +178,42 @@ const initChart =()=> {
|
|||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 136, 212, 0.3)'
|
||||
}, {
|
||||
color: 'rgba(0, 136, 212, 0.3)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 136, 212, 0)'
|
||||
}], false),
|
||||
color: 'rgba(0, 136, 212, 0)',
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(0,136,212)',
|
||||
borderColor: 'rgba(0,136,212,0.2)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
borderWidth: 12,
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150],
|
||||
},
|
||||
{
|
||||
name: 'CUCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
|
|
@ -184,31 +222,42 @@ const initChart =()=> {
|
|||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(219, 50, 51, 0.3)'
|
||||
}, {
|
||||
color: 'rgba(219, 50, 51, 0.3)',
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(219, 50, 51, 0)'
|
||||
}], false),
|
||||
color: 'rgba(219, 50, 51, 0)',
|
||||
},
|
||||
],
|
||||
false,
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(219,50,51)',
|
||||
borderColor: 'rgba(219,50,51,0.2)',
|
||||
borderWidth: 12
|
||||
}
|
||||
borderWidth: 12,
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||||
}]
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
|
||||
},
|
||||
],
|
||||
})
|
||||
return chart
|
||||
}
|
||||
|
|
@ -219,12 +268,10 @@ watch(isCollapse,()=>{
|
|||
}, 300)
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
chart = initChart()
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,24 +11,24 @@ export default {
|
|||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -50,7 +50,7 @@ export default {
|
|||
data.push(i + 'month')
|
||||
}
|
||||
return data
|
||||
}())
|
||||
})()
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
|
|
@ -59,20 +59,20 @@ export default {
|
|||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22'
|
||||
fontSize: '22',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
fontSize: '16',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
|
|
@ -81,87 +81,92 @@ export default {
|
|||
top: 150,
|
||||
bottom: 95,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
x: '5%',
|
||||
top: '10%',
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
color: '#90979c',
|
||||
},
|
||||
data: ['female', 'male', 'average']
|
||||
data: ['female', 'male', 'average'],
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [{
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
color: '#90979c',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
|
||||
interval: 0,
|
||||
},
|
||||
data: xData
|
||||
}],
|
||||
yAxis: [{
|
||||
data: xData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
color: '#90979c',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
interval: 0,
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
dataZoom: [{
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
height: 30,
|
||||
xAxisIndex: [
|
||||
0
|
||||
],
|
||||
xAxisIndex: [0],
|
||||
bottom: 30,
|
||||
start: 10,
|
||||
end: 80,
|
||||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
handleIcon:
|
||||
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
handleSize: '110%',
|
||||
handleStyle: {
|
||||
color: '#d3dee5'
|
||||
|
||||
color: '#d3dee5',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff' },
|
||||
borderColor: '#90979c'
|
||||
|
||||
}, {
|
||||
color: '#fff',
|
||||
},
|
||||
borderColor: '#90979c',
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
height: 15,
|
||||
start: 1,
|
||||
end: 35
|
||||
}],
|
||||
series: [{
|
||||
end: 35,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'female',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
|
|
@ -173,29 +178,16 @@ export default {
|
|||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
709,
|
||||
1917,
|
||||
2455,
|
||||
2610,
|
||||
1719,
|
||||
1433,
|
||||
1544,
|
||||
3285,
|
||||
5208,
|
||||
3372,
|
||||
2484,
|
||||
4078
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -211,25 +203,13 @@ export default {
|
|||
position: 'top',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
327,
|
||||
1776,
|
||||
507,
|
||||
1200,
|
||||
800,
|
||||
482,
|
||||
204,
|
||||
1390,
|
||||
1001,
|
||||
951,
|
||||
381,
|
||||
220
|
||||
]
|
||||
}, {
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
|
||||
},
|
||||
{
|
||||
name: 'average',
|
||||
type: 'line',
|
||||
stack: 'total',
|
||||
|
|
@ -244,28 +224,15 @@ export default {
|
|||
position: 'top',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
1036,
|
||||
3693,
|
||||
2962,
|
||||
3810,
|
||||
2519,
|
||||
1915,
|
||||
1748,
|
||||
4675,
|
||||
6209,
|
||||
4323,
|
||||
2865,
|
||||
4298
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
$_resizeHandler: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -40,17 +40,19 @@ export default {
|
|||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
this.$_sidebarElm &&
|
||||
this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
this.$_sidebarElm &&
|
||||
this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,8 @@ const count = ref(0)
|
|||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
|
||||
official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed } from "@vue/reactivity";
|
||||
import { computed } from 'vue'
|
||||
export default {
|
||||
name: "baseSvgIcon",
|
||||
name: 'baseSvgIcon',
|
||||
props: {
|
||||
iconClass: { type: String },
|
||||
className: { type: String },
|
||||
|
|
@ -15,14 +15,14 @@ export default {
|
|||
setup(props) {
|
||||
console.log(11111111)
|
||||
const iconName = computed(() => {
|
||||
return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
|
||||
});
|
||||
return props.iconClass ? `#icon-${props.iconClass}` : '#icon'
|
||||
})
|
||||
const svgClass = computed(() => {
|
||||
return props.className ? "svg-icon " + props.className : "svg-icon";
|
||||
});
|
||||
return { iconName, svgClass };
|
||||
return props.className ? 'svg-icon ' + props.className : 'svg-icon'
|
||||
})
|
||||
return { iconName, svgClass }
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -34,4 +34,3 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="zb-pipeline-start-wrapper">
|
||||
<div class="zb-pipeline-start" v-bind:class="control === value ? 'active' : ''" v-on:click="handleClick">
|
||||
<div
|
||||
class="zb-pipeline-start"
|
||||
v-bind:class="control === value ? 'active' : ''"
|
||||
v-on:click="handleClick"
|
||||
>
|
||||
<div class="zb-pipeline-start-header">
|
||||
<zb-icon type="play-filled" />
|
||||
</div>
|
||||
|
|
@ -23,41 +27,128 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Help
|
||||
} from '@element-plus/icons-vue'
|
||||
import { Help } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style>
|
||||
/* zb-pipeline-start-wrapper */
|
||||
.zb-pipeline-start-wrapper { position:relative; padding:0 40px; }
|
||||
.zb-pipeline-start-wrapper {
|
||||
position: relative;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* zb-pipeline-start */
|
||||
.zb-pipeline-start { cursor:pointer; user-select:none; position:relative; display:flex; justify-content:flex-start; align-items:stretch; width:200px; height:40px; border-radius:2px; background-color:#fff; }
|
||||
.zb-pipeline-start:after { content:""; position:absolute; top:20px; right:-40px; display:block; width:40px; height:1px; background-color:#2d8cf0; }
|
||||
.zb-pipeline-start .zb-pipeline-start-header { display:flex; justify-content:center; align-items:center; width:40px; border-width:1px 0 1px 1px; border-style:solid; border-color:#2d8cf0; border-radius:2px 0 0 2px; background-color:#2d8cf0; color:#fff; font-size:14px; font-weight:600; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); }
|
||||
.zb-pipeline-start .zb-pipeline-start-body { flex:1; display:flex; border-width:1px 1px 1px 0; border-style:solid; border-color:#e3e8f0; border-radius:0 2px 2px 0; padding:0 8px; overflow:hidden; transition:all 0.2s cubic-bezier(0.23,1,0.32,1); }
|
||||
.zb-pipeline-start .zb-pipeline-start-title { flex:1; display:block; overflow:hidden; color:#262626; font-size:14px; font-weight:600; line-height:38px; white-space:nowrap; text-overflow:ellipsis; }
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip { cursor:pointer; display:flex; justify-content:center; align-items:center; margin-left:8px; }
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip { display:block; }
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon { display:block; color:#595959; font-size:14px; }
|
||||
.zb-pipeline-start {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.zb-pipeline-start:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -40px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #2d8cf0;
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: #2d8cf0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: #2d8cf0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
border-width: 1px 1px 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #e3e8f0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-title {
|
||||
flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #262626;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-tooltip {
|
||||
display: block;
|
||||
}
|
||||
.zb-pipeline-start .zb-pipeline-start-tooltip .zb-icon {
|
||||
display: block;
|
||||
color: #595959;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* zb-pipeline-start hover */
|
||||
.zb-pipeline-start:hover { }
|
||||
.zb-pipeline-start:hover:after { }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-header { border-color:#2d8cf0; }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-body { border-color:#2d8cf0; }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-title { }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip { }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip { }
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon { }
|
||||
.zb-pipeline-start:hover {
|
||||
}
|
||||
.zb-pipeline-start:hover:after {
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-header {
|
||||
border-color: #2d8cf0;
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-body {
|
||||
border-color: #2d8cf0;
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-title {
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip {
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-tooltip {
|
||||
}
|
||||
.zb-pipeline-start:hover .zb-pipeline-start-tooltip .zb-icon {
|
||||
}
|
||||
|
||||
/* zb-pipeline-start active */
|
||||
.zb-pipeline-start.active { }
|
||||
.zb-pipeline-start.active:after { }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-header { border-color:#2d8cf0; }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-body { border-color:#2d8cf0; }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-title { }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip { }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip { }
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon { }
|
||||
.zb-pipeline-start.active {
|
||||
}
|
||||
.zb-pipeline-start.active:after {
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-header {
|
||||
border-color: #2d8cf0;
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-body {
|
||||
border-color: #2d8cf0;
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-title {
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip {
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-tooltip {
|
||||
}
|
||||
.zb-pipeline-start.active .zb-pipeline-start-tooltip .zb-icon {
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,11 @@
|
|||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in obj.levelList" :key="item.path">
|
||||
<span v-if="item.redirect==='noRedirect'||index==obj.levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<span
|
||||
v-if="item.redirect === 'noRedirect' || index == obj.levelList.length - 1"
|
||||
class="no-redirect"
|
||||
>{{ item.meta.title }}</span
|
||||
>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
|
|
@ -11,7 +15,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
import {onMounted, reactive, watch} from "vue";
|
||||
import { onMounted, reactive, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const obj = reactive({ levelList: {} })
|
||||
|
|
@ -19,9 +23,11 @@
|
|||
|
||||
// 获取面包屑
|
||||
const getBreadcrumb = () => {
|
||||
let matched = route.matched.filter(item => item.meta && item.meta.title)
|
||||
let matched = route.matched.filter((item) => item.meta && item.meta.title)
|
||||
const first = matched[0]
|
||||
obj.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
obj.levelList = matched.filter(
|
||||
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false,
|
||||
)
|
||||
}
|
||||
onMounted(() => {
|
||||
getBreadcrumb()
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-container-layout {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import CountTo from './vue-countTo.vue';
|
||||
export default CountTo;
|
||||
import CountTo from './vue-countTo.vue'
|
||||
export default CountTo
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
window.Vue.component('count-to', CountTo);
|
||||
window.Vue.component('count-to', CountTo)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,10 +18,15 @@ if (isServer) {
|
|||
let prefix
|
||||
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
if (requestAnimationFrame && cancelAnimationFrame) { break }
|
||||
if (requestAnimationFrame && cancelAnimationFrame) {
|
||||
break
|
||||
}
|
||||
prefix = prefixes[i]
|
||||
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
|
||||
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
|
||||
cancelAnimationFrame =
|
||||
cancelAnimationFrame ||
|
||||
window[prefix + 'CancelAnimationFrame'] ||
|
||||
window[prefix + 'CancelRequestAnimationFrame']
|
||||
}
|
||||
|
||||
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
|
||||
|
|
|
|||
|
|
@ -10,22 +10,22 @@ export default {
|
|||
startVal: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
endVal: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 2017
|
||||
default: 2017,
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 3000
|
||||
default: 3000,
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
decimals: {
|
||||
type: Number,
|
||||
|
|
@ -33,39 +33,39 @@ export default {
|
|||
default: 0,
|
||||
validator(value) {
|
||||
return value >= 0
|
||||
}
|
||||
},
|
||||
},
|
||||
decimal: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '.'
|
||||
default: '.',
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ','
|
||||
default: ',',
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
useEasing: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
easingFn: {
|
||||
type: Function,
|
||||
default(t, b, c, d) {
|
||||
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
|
||||
}
|
||||
}
|
||||
return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -77,115 +77,126 @@ export default {
|
|||
startTime: null,
|
||||
timestamp: null,
|
||||
remaining: null,
|
||||
rAF: null
|
||||
};
|
||||
rAF: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
countDown() {
|
||||
return this.startVal > this.endVal
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
startVal() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
this.start()
|
||||
}
|
||||
},
|
||||
endVal() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
}
|
||||
this.start()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
this.start()
|
||||
}
|
||||
this.$emit('mountedCallback')
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.localStartVal = this.startVal;
|
||||
this.startTime = null;
|
||||
this.localDuration = this.duration;
|
||||
this.paused = false;
|
||||
this.rAF = requestAnimationFrame(this.count);
|
||||
this.localStartVal = this.startVal
|
||||
this.startTime = null
|
||||
this.localDuration = this.duration
|
||||
this.paused = false
|
||||
this.rAF = requestAnimationFrame(this.count)
|
||||
},
|
||||
pauseResume() {
|
||||
if (this.paused) {
|
||||
this.resume();
|
||||
this.paused = false;
|
||||
this.resume()
|
||||
this.paused = false
|
||||
} else {
|
||||
this.pause();
|
||||
this.paused = true;
|
||||
this.pause()
|
||||
this.paused = true
|
||||
}
|
||||
},
|
||||
pause() {
|
||||
cancelAnimationFrame(this.rAF);
|
||||
cancelAnimationFrame(this.rAF)
|
||||
},
|
||||
resume() {
|
||||
this.startTime = null;
|
||||
this.localDuration = +this.remaining;
|
||||
this.localStartVal = +this.printVal;
|
||||
requestAnimationFrame(this.count);
|
||||
this.startTime = null
|
||||
this.localDuration = +this.remaining
|
||||
this.localStartVal = +this.printVal
|
||||
requestAnimationFrame(this.count)
|
||||
},
|
||||
reset() {
|
||||
this.startTime = null;
|
||||
cancelAnimationFrame(this.rAF);
|
||||
this.displayValue = this.formatNumber(this.startVal);
|
||||
this.startTime = null
|
||||
cancelAnimationFrame(this.rAF)
|
||||
this.displayValue = this.formatNumber(this.startVal)
|
||||
},
|
||||
count(timestamp) {
|
||||
if (!this.startTime) this.startTime = timestamp;
|
||||
this.timestamp = timestamp;
|
||||
const progress = timestamp - this.startTime;
|
||||
this.remaining = this.localDuration - progress;
|
||||
if (!this.startTime) this.startTime = timestamp
|
||||
this.timestamp = timestamp
|
||||
const progress = timestamp - this.startTime
|
||||
this.remaining = this.localDuration - progress
|
||||
|
||||
if (this.useEasing) {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
|
||||
this.printVal =
|
||||
this.localStartVal -
|
||||
this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
|
||||
} else {
|
||||
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
|
||||
this.printVal = this.easingFn(
|
||||
progress,
|
||||
this.localStartVal,
|
||||
this.endVal - this.localStartVal,
|
||||
this.localDuration,
|
||||
)
|
||||
}
|
||||
} else {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration));
|
||||
this.printVal =
|
||||
this.localStartVal -
|
||||
(this.localStartVal - this.endVal) * (progress / this.localDuration)
|
||||
} else {
|
||||
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
|
||||
this.printVal =
|
||||
this.localStartVal +
|
||||
(this.endVal - this.localStartVal) * (progress / this.localDuration)
|
||||
}
|
||||
}
|
||||
if (this.countDown) {
|
||||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
|
||||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal
|
||||
} else {
|
||||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
|
||||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal
|
||||
}
|
||||
|
||||
this.displayValue = this.formatNumber(this.printVal)
|
||||
if (progress < this.localDuration) {
|
||||
this.rAF = requestAnimationFrame(this.count);
|
||||
this.rAF = requestAnimationFrame(this.count)
|
||||
} else {
|
||||
this.$emit('callback');
|
||||
this.$emit('callback')
|
||||
}
|
||||
},
|
||||
isNumber(val) {
|
||||
return !isNaN(parseFloat(val))
|
||||
},
|
||||
formatNumber(num) {
|
||||
num = num.toFixed(this.decimals);
|
||||
num += '';
|
||||
const x = num.split('.');
|
||||
let x1 = x[0];
|
||||
const x2 = x.length > 1 ? this.decimal + x[1] : '';
|
||||
const rgx = /(\d+)(\d{3})/;
|
||||
num = num.toFixed(this.decimals)
|
||||
num += ''
|
||||
const x = num.split('.')
|
||||
let x1 = x[0]
|
||||
const x2 = x.length > 1 ? this.decimal + x[1] : ''
|
||||
const rgx = /(\d+)(\d{3})/
|
||||
if (this.separator && !this.isNumber(this.separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
|
||||
x1 = x1.replace(rgx, '$1' + this.separator + '$2')
|
||||
}
|
||||
}
|
||||
return this.prefix + x1 + x2 + this.suffix;
|
||||
}
|
||||
return this.prefix + x1 + x2 + this.suffix
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
cancelAnimationFrame(this.rAF)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<div class="m-info">
|
||||
<el-popover
|
||||
width="200px"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-popover width="200px" placement="bottom">
|
||||
<template #reference>
|
||||
<el-badge :value="3" class="item-info-pop">
|
||||
<el-icon class="bell"><Bell /></el-icon>
|
||||
|
|
@ -12,16 +9,20 @@
|
|||
<div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="通知" name="first">
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child"> github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div>
|
||||
<div class="item-child">
|
||||
github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
|
||||
>
|
||||
<div class="item-child">
|
||||
github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
|
||||
>
|
||||
<div class="item-child">
|
||||
github开源地址：<el-button type="primary" link @click="toGitHub">点我</el-button></div
|
||||
>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -44,7 +45,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
.item-info-pop {
|
||||
// width:100% ;
|
||||
//height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
<template>
|
||||
<template> </template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
<script lang="ts"></script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<div class="g-right-click-menu" :style="style" v-if="isShow" ref="rightMenu">
|
||||
<div
|
||||
v-for="item,index in data"
|
||||
v-for="(item, index) in data"
|
||||
:key="index"
|
||||
class="operating" @click.stop="operatingRightAction($event,item)">{{item.label}}</div>
|
||||
class="operating"
|
||||
@click.stop="operatingRightAction($event, item)"
|
||||
>{{ item.label }}</div
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
|
@ -11,28 +14,28 @@ export default {
|
|||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default:()=>[]
|
||||
default: () => [],
|
||||
},
|
||||
left: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
default: 1,
|
||||
},
|
||||
dataInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
top: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
isViewInfo: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
left: {
|
||||
|
|
@ -40,10 +43,10 @@ export default {
|
|||
if (newName) {
|
||||
this.isShow = true
|
||||
}
|
||||
}
|
||||
},
|
||||
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
|
||||
// immediate: true
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
|
|
@ -54,11 +57,11 @@ export default {
|
|||
} else {
|
||||
return `left:${this.left}px;top:${this.top}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false
|
||||
isShow: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -69,7 +72,7 @@ export default {
|
|||
operatingRightAction($event, val) {
|
||||
this.$emit('ok', $event, val)
|
||||
this.isShow = false
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let _self = this
|
||||
|
|
@ -81,7 +84,7 @@ export default {
|
|||
_self.isShow = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ const methodMap = [
|
|||
'webkitFullscreenEnabled',
|
||||
'webkitfullscreenchange',
|
||||
'webkitfullscreenerror',
|
||||
|
||||
],
|
||||
// Old WebKit
|
||||
[
|
||||
|
|
@ -27,7 +26,6 @@ const methodMap = [
|
|||
'webkitCancelFullScreen',
|
||||
'webkitfullscreenchange',
|
||||
'webkitfullscreenerror',
|
||||
|
||||
],
|
||||
[
|
||||
'mozRequestFullScreen',
|
||||
|
|
@ -45,30 +43,30 @@ const methodMap = [
|
|||
'MSFullscreenChange',
|
||||
'MSFullscreenError',
|
||||
],
|
||||
];
|
||||
]
|
||||
|
||||
const nativeAPI = (() => {
|
||||
const unprefixedMethods = methodMap[0];
|
||||
const returnValue = {};
|
||||
const unprefixedMethods = methodMap[0]
|
||||
const returnValue = {}
|
||||
|
||||
for (const methodList of methodMap) {
|
||||
const exitFullscreenMethod = methodList?.[1];
|
||||
const exitFullscreenMethod = methodList?.[1]
|
||||
if (exitFullscreenMethod in document) {
|
||||
for (const [index, method] of methodList.entries()) {
|
||||
returnValue[unprefixedMethods[index]] = method;
|
||||
returnValue[unprefixedMethods[index]] = method
|
||||
}
|
||||
|
||||
return returnValue;
|
||||
return returnValue
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
})();
|
||||
return false
|
||||
})()
|
||||
|
||||
const eventNameMap = {
|
||||
change: nativeAPI.fullscreenchange,
|
||||
error: nativeAPI.fullscreenerror,
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line import/no-mutable-exports
|
||||
let screenfull = {
|
||||
|
|
@ -76,63 +74,63 @@ let screenfull = {
|
|||
request(element = document.documentElement, options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const onFullScreenEntered = () => {
|
||||
screenfull.off('change', onFullScreenEntered);
|
||||
resolve();
|
||||
};
|
||||
screenfull.off('change', onFullScreenEntered)
|
||||
resolve()
|
||||
}
|
||||
|
||||
screenfull.on('change', onFullScreenEntered);
|
||||
screenfull.on('change', onFullScreenEntered)
|
||||
|
||||
const returnPromise = element[nativeAPI.requestFullscreen](options);
|
||||
const returnPromise = element[nativeAPI.requestFullscreen](options)
|
||||
|
||||
if (returnPromise instanceof Promise) {
|
||||
returnPromise.then(onFullScreenEntered).catch(reject);
|
||||
returnPromise.then(onFullScreenEntered).catch(reject)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
exit() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!screenfull.isFullscreen) {
|
||||
resolve();
|
||||
return;
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
const onFullScreenExit = () => {
|
||||
screenfull.off('change', onFullScreenExit);
|
||||
resolve();
|
||||
};
|
||||
screenfull.off('change', onFullScreenExit)
|
||||
resolve()
|
||||
}
|
||||
|
||||
screenfull.on('change', onFullScreenExit);
|
||||
screenfull.on('change', onFullScreenExit)
|
||||
|
||||
const returnPromise = document[nativeAPI.exitFullscreen]();
|
||||
const returnPromise = document[nativeAPI.exitFullscreen]()
|
||||
|
||||
if (returnPromise instanceof Promise) {
|
||||
returnPromise.then(onFullScreenExit).catch(reject);
|
||||
returnPromise.then(onFullScreenExit).catch(reject)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
toggle(element, options) {
|
||||
return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
|
||||
return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options)
|
||||
},
|
||||
onchange(callback) {
|
||||
screenfull.on('change', callback);
|
||||
screenfull.on('change', callback)
|
||||
},
|
||||
onerror(callback) {
|
||||
screenfull.on('error', callback);
|
||||
screenfull.on('error', callback)
|
||||
},
|
||||
on(event, callback) {
|
||||
const eventName = eventNameMap[event];
|
||||
const eventName = eventNameMap[event]
|
||||
if (eventName) {
|
||||
document.addEventListener(eventName, callback, false);
|
||||
document.addEventListener(eventName, callback, false)
|
||||
}
|
||||
},
|
||||
off(event, callback) {
|
||||
const eventName = eventNameMap[event];
|
||||
const eventName = eventNameMap[event]
|
||||
if (eventName) {
|
||||
document.removeEventListener(eventName, callback, false);
|
||||
document.removeEventListener(eventName, callback, false)
|
||||
}
|
||||
},
|
||||
raw: nativeAPI,
|
||||
};
|
||||
}
|
||||
|
||||
Object.defineProperties(screenfull, {
|
||||
isFullscreen: {
|
||||
|
|
@ -147,11 +145,10 @@ Object.defineProperties(screenfull, {
|
|||
// Coerce to boolean in case of old WebKit.
|
||||
get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
if (!nativeAPI) {
|
||||
screenfull = {isEnabled: false};
|
||||
screenfull = { isEnabled: false }
|
||||
}
|
||||
|
||||
|
||||
export default screenfull;
|
||||
export default screenfull
|
||||
|
|
|
|||
|
|
@ -4,22 +4,23 @@
|
|||
class="full-screen"
|
||||
title="全屏"
|
||||
@click.stop="click"
|
||||
style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
|
||||
style="margin-right: 10px; cursor: pointer"
|
||||
><full-screen
|
||||
/></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import screenfull from './index'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {onBeforeUnmount, onMounted, ref} from "vue";
|
||||
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
let isFullscreen = ref(false)
|
||||
const click = () => {
|
||||
if (!screenfull.isEnabled) {
|
||||
ElMessage({
|
||||
message: '你的浏览器不支持',
|
||||
type: 'warning'
|
||||
type: 'warning',
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.transverseMenu {
|
||||
.full-screen {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@
|
|||
主题配置
|
||||
</div>
|
||||
<div class="item-child item-child2" @click="operator(2)">
|
||||
<el-icon size="30"
|
||||
color="#3698fd"
|
||||
style="margin-bottom: 8px"><Link /></el-icon>
|
||||
<el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><Link /></el-icon>
|
||||
源码拷贝
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,7 +15,12 @@
|
|||
<el-drawer v-model="drawer" title="主题配置" size="300px">
|
||||
<div class="drawer-item">
|
||||
<label>布局</label>
|
||||
<el-select v-model="layout" placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)">
|
||||
<el-select
|
||||
v-model="layout"
|
||||
placeholder="请选择"
|
||||
style="width: 150px"
|
||||
@change="(val) => changeSwitch(val, 2)"
|
||||
>
|
||||
<el-option label="纵向" value="vertical"></el-option>
|
||||
<el-option label="横向" value="horizontal"></el-option>
|
||||
</el-select>
|
||||
|
|
@ -35,7 +38,7 @@
|
|||
const drawer = ref(false)
|
||||
const tag = ref(true)
|
||||
const layout = ref('vertical')
|
||||
import {useStore} from "vuex";
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
const store = useStore()
|
||||
const operator = (type) => {
|
||||
|
|
@ -49,7 +52,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
const changeSwitch = (val, type) => {
|
||||
switch (type) {
|
||||
// 是否显示tag
|
||||
|
|
@ -61,10 +63,8 @@
|
|||
return
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-setting-fix {
|
||||
position: fixed;
|
||||
|
|
@ -105,16 +105,16 @@
|
|||
border-radius: 5.5px;
|
||||
font-size: 12px;
|
||||
background: #ebf5ff;
|
||||
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
|
||||
|
||||
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
.item-child2 {
|
||||
margin-top: 10px;
|
||||
color: #b37feb;
|
||||
background: #f7f2fd;
|
||||
transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
|
||||
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
}
|
||||
.drawer-item {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -21,26 +21,24 @@
|
|||
import { Plus } from '@element-plus/icons-vue'
|
||||
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import {ElMessage} from "element-plus";
|
||||
import { ElMessage } from 'element-plus'
|
||||
let emit = defineEmits(['update'])
|
||||
let props = defineProps({
|
||||
modelValue: Array,
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default:true
|
||||
default: true,
|
||||
},
|
||||
listType: {
|
||||
type: String,
|
||||
default:'picture-card'
|
||||
default: 'picture-card',
|
||||
},
|
||||
showFileList: {
|
||||
type: Boolean,
|
||||
default:true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
let fileList = ref([
|
||||
|
||||
])
|
||||
let fileList = ref([])
|
||||
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
|
@ -52,14 +50,14 @@
|
|||
const beforeUploadAction = (file, fileLi) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
var reader = new FileReader()
|
||||
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
|
||||
let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
|
||||
reader.readAsDataURL(file)
|
||||
let name = file.name
|
||||
if (reg.test(name)) {
|
||||
reader.onload = (e: FileReader) => {
|
||||
fileList.value.push({
|
||||
name: name,
|
||||
url:e.target.result
|
||||
url: e.target.result,
|
||||
})
|
||||
emit('update', fileList.value)
|
||||
resolve(e.target.result)
|
||||
|
|
@ -77,10 +75,14 @@
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
watch(()=>props.modelValue,(value)=>{
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
fileList.value = value
|
||||
},{
|
||||
immediate:true
|
||||
})
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,14 @@
|
|||
<script lang="ts" setup>
|
||||
// 引入 wangEditor
|
||||
import wangEditor from 'wangeditor'
|
||||
import {onBeforeUnmount, onMounted, watch} from "vue";
|
||||
import { onBeforeUnmount, onMounted, watch } from 'vue'
|
||||
let editors = null
|
||||
|
||||
let emit = defineEmits(['update:modelValue'])
|
||||
let props = defineProps({
|
||||
modelValue:String
|
||||
modelValue: String,
|
||||
})
|
||||
|
||||
|
||||
const getEditorData = () => {
|
||||
// 通过代码获取编辑器内容
|
||||
let data = editors.txt.html()
|
||||
|
|
@ -22,9 +21,12 @@ const getEditorData = () =>{
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
watch(()=>props.modelValue,(value)=>{
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
editors.txt.html(value)
|
||||
})
|
||||
},
|
||||
)
|
||||
const editor = new wangEditor(`#wangEditor`)
|
||||
// 配置 onchange 回调函数，将数据同步到 vue 中
|
||||
editor.config.onchange = (newHtml) => {
|
||||
|
|
@ -41,8 +43,5 @@ onBeforeUnmount(()=>{
|
|||
editors.destroy()
|
||||
editors = null
|
||||
})
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ console.log(11111111)
|
|||
// const req = require.context('./svg', false, /\.svg$/)
|
||||
const req = import.meta.globEager('./svg/*.svg')
|
||||
consoole.log('req', req)
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
|
||||
requireAll(req)
|
||||
|
||||
export default SvgIcon
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ export default {
|
|||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
return 'a'
|
||||
}
|
||||
return 'router-link'
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
linkProps(to) {
|
||||
|
|
@ -31,14 +31,14 @@ export default {
|
|||
return {
|
||||
href: to,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
rel: 'noopener',
|
||||
}
|
||||
}
|
||||
return {
|
||||
to: to
|
||||
}
|
||||
}
|
||||
to: to,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':isCollapse}">
|
||||
<div class="sidebar-logo-container" :class="{ collapse: isCollapse }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 v-else class="sidebar-title">Perfect </h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 class="sidebar-title"> {{ title }}</h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, reactive, ref} from "vue";
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useStore } from 'vuex' // useStore ===vue2.0中的this.$store
|
||||
import logo from '@/assets/logo.png'
|
||||
|
||||
|
|
@ -24,7 +24,6 @@ const title = ref<string>('Vue Admin Perfect')
|
|||
const isCollapse = computed(() => {
|
||||
return !store.state.app.isCollapse
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -33,17 +33,17 @@
|
|||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const onlyOneChild = ref(null)
|
||||
const hasOneShowingChild = (children = [], parent) => {
|
||||
const showingChildren = children.filter(item => {
|
||||
const showingChildren = children.filter((item) => {
|
||||
// 过滤掉需要隐藏的菜单
|
||||
if (item.hidden) {
|
||||
return false
|
||||
|
|
@ -67,7 +67,6 @@
|
|||
return false
|
||||
}
|
||||
|
||||
|
||||
const resolvePath = (routePath) => {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
|
|
@ -77,5 +76,4 @@
|
|||
}
|
||||
return path.resolve(props.basePath, routePath)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,12 @@
|
|||
class="el-menu-vertical-demo"
|
||||
:collapse="isCollapse"
|
||||
>
|
||||
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path"/>
|
||||
<sidebar-item
|
||||
v-for="route in permission_routes"
|
||||
:key="route.path"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,43 +7,43 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted,nextTick } from 'vue';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import BScroll from '@better-scroll/core';
|
||||
import type { Options } from '@better-scroll/core';
|
||||
import { ref, computed, watch, onMounted, nextTick } from 'vue'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import BScroll from '@better-scroll/core'
|
||||
import type { Options } from '@better-scroll/core'
|
||||
|
||||
interface Props {
|
||||
/** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
|
||||
options: Options;
|
||||
options: Options
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const bsWrap = ref<HTMLElement>();
|
||||
const instance = ref<BScroll>();
|
||||
const bsContent = ref<HTMLElement>();
|
||||
const bsWrap = ref<HTMLElement>()
|
||||
const instance = ref<BScroll>()
|
||||
const bsContent = ref<HTMLElement>()
|
||||
|
||||
function initBetterScroll() {
|
||||
nextTick(() => {
|
||||
instance.value = new BScroll(bsWrap.value, props.options);
|
||||
instance.value = new BScroll(bsWrap.value, props.options)
|
||||
})
|
||||
}
|
||||
|
||||
// 滚动元素发生变化，刷新BS
|
||||
const { width: wrapWidth } = useElementSize(bsWrap);
|
||||
const { width: wrapWidth } = useElementSize(bsWrap)
|
||||
|
||||
const { width, height } = useElementSize(bsContent);
|
||||
const { width, height } = useElementSize(bsContent)
|
||||
watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
|
||||
if (instance.value) {
|
||||
instance.value.refresh();
|
||||
instance.value.refresh()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
initBetterScroll();
|
||||
});
|
||||
initBetterScroll()
|
||||
})
|
||||
|
||||
defineExpose({ instance });
|
||||
defineExpose({ instance })
|
||||
</script>
|
||||
<style scoped>
|
||||
.tags-scroll-wrap {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="tags-wrap-container">
|
||||
<div class="tags-view" ref="scrollContainer">
|
||||
<better-scroll :options="{ scrollX: true, scrollY: false, }" ref="bsScroll">
|
||||
<better-scroll :options="{ scrollX: true, scrollY: false }" ref="bsScroll">
|
||||
<div class="tags-scroll-inner">
|
||||
<div v-for="tag in visitedViews"
|
||||
<div
|
||||
v-for="tag in visitedViews"
|
||||
:ref="setTagRef"
|
||||
:path="tag.path"
|
||||
:data-id="tag.path"
|
||||
|
|
@ -12,33 +13,28 @@
|
|||
:key="tag.path"
|
||||
class="item-tag-wrap"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
@click="routerGo(tag)">
|
||||
@click="routerGo(tag)"
|
||||
>
|
||||
<div class="tags-view-item">{{ tag.title }}</div>
|
||||
<el-icon @click.prevent.stop="(e) => closeSelectedTag(e, tag)" class="tag-icon">
|
||||
<circle-close-filled /></el-icon>
|
||||
<circle-close-filled
|
||||
/></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</better-scroll>
|
||||
</div>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="点击刷新"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<el-tooltip class="box-item" effect="dark" content="点击刷新" placement="bottom-end">
|
||||
<div class="refresh" @click="refresh">
|
||||
<div class="refresh-inner">
|
||||
<el-icon><Refresh />
|
||||
</el-icon>
|
||||
</div></div>
|
||||
<el-icon><Refresh /> </el-icon> </div
|
||||
></div>
|
||||
</el-tooltip>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
|
||||
import betterScroll from "./betterScroll.vue";
|
||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import betterScroll from './betterScroll.vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
|
|
@ -59,7 +55,7 @@
|
|||
return store.state.tagsView.visitedViews
|
||||
})
|
||||
|
||||
const bsScroll = ref<Expose.BetterScroll>();
|
||||
const bsScroll = ref<Expose.BetterScroll>()
|
||||
let obj = new WeakMap()
|
||||
|
||||
let affixTags = ref([])
|
||||
|
|
@ -79,14 +75,14 @@
|
|||
|
||||
function filterAffixTags(routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach(route => {
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
meta: { ...route.meta },
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
|
|
@ -101,7 +97,7 @@
|
|||
|
||||
const initTags = () => {
|
||||
let routesNew = routes.value
|
||||
let affixTag = affixTags.value = filterAffixTags(routesNew)
|
||||
let affixTag = (affixTags.value = filterAffixTags(routesNew))
|
||||
for (const tag of affixTag) {
|
||||
if (tag.name) {
|
||||
store.dispatch('tagsView/addVisitedView', tag)
|
||||
|
|
@ -146,7 +142,6 @@
|
|||
store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view)
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -161,14 +156,14 @@
|
|||
function handleScrollAction(currentTag) {
|
||||
const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
|
||||
let { left: currx, width: currentWidth } = currentTag.getBoundingClientRect()
|
||||
const clientX = currx + currentWidth / 2;
|
||||
const currentX = clientX - scrollContainerRect.left;
|
||||
const deltaX = currentX - scrollContainerRect.width / 2;
|
||||
const clientX = currx + currentWidth / 2
|
||||
const currentX = clientX - scrollContainerRect.left
|
||||
const deltaX = currentX - scrollContainerRect.width / 2
|
||||
if (bsScroll.value) {
|
||||
const { maxScrollX, x: leftX } = bsScroll.value.instance;
|
||||
const rightX = maxScrollX - leftX;
|
||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX);
|
||||
bsScroll.value?.instance.scrollBy(update, 0, 300);
|
||||
const { maxScrollX, x: leftX } = bsScroll.value.instance
|
||||
const rightX = maxScrollX - leftX
|
||||
const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
|
||||
bsScroll.value?.instance.scrollBy(update, 0, 300)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +184,6 @@
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initTags()
|
||||
addTags()
|
||||
|
|
@ -199,7 +193,6 @@
|
|||
}, 50)
|
||||
})
|
||||
|
||||
|
||||
watch(route, () => {
|
||||
addTags()
|
||||
nextTick(() => {
|
||||
|
|
@ -210,15 +203,16 @@
|
|||
})
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if((from.fullPath==='/error/404'||from.fullPath==='/error/401')&&to.fullPath==="/home") {
|
||||
if (
|
||||
(from.fullPath === '/error/404' || from.fullPath === '/error/401') &&
|
||||
to.fullPath === '/home'
|
||||
) {
|
||||
let whiteList = ['/error/404', '/error/401']
|
||||
await store.dispatch('tagsView/removeView', whiteList)
|
||||
}
|
||||
next()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="修改密码"
|
||||
width="60%"
|
||||
>
|
||||
<el-dialog v-model="dialogVisible" title="修改密码" width="60%">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
|
|
@ -25,16 +21,14 @@
|
|||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||
>确定</el-button
|
||||
>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,defineExpose,reactive, } from 'vue'
|
||||
import { ref, defineExpose, reactive } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import type { ElForm } from 'element-plus'
|
||||
const dialogVisible = ref(false)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div
|
||||
class="m-layout-header"
|
||||
:style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}">
|
||||
<div class="header" :class="{
|
||||
transverseMenu:mode==='horizontal'
|
||||
}">
|
||||
:style="{ left: `${mode === 'horizontal' ? 0 : isCollapse ? '56' : '210'}px` }"
|
||||
>
|
||||
<div
|
||||
class="header"
|
||||
:class="{
|
||||
transverseMenu: mode === 'horizontal',
|
||||
}"
|
||||
>
|
||||
<menu-slide v-if="mode === 'horizontal'" />
|
||||
<div class="left" v-if="mode === 'vertical'">
|
||||
<div>
|
||||
|
|
@ -18,7 +22,9 @@
|
|||
<u-screen-full />
|
||||
<el-dropdown @command="commandAction">
|
||||
<span class="el-dropdown-link">
|
||||
<el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px"/>{{ userInfo.username }}
|
||||
<el-avatar :icon="UserFilled" :size="30" style="margin-right: 6px" />{{
|
||||
userInfo.username
|
||||
}}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
|
|
@ -41,14 +47,14 @@
|
|||
import { UserFilled } from '@element-plus/icons-vue'
|
||||
import Personal from './Personal.vue'
|
||||
import TagViews from '../TagsView/index.vue'
|
||||
import UHamburger from "@/components/u-Hamburger/index.vue"
|
||||
import UHamburger from '@/components/u-Hamburger/index.vue'
|
||||
import UScreenFull from '@/components/u-screenfull/index.vue'
|
||||
import UInfo from '@/components/u-info/index.vue'
|
||||
import MenuSlide from '../Sidebar/menuSlide.vue'
|
||||
import {computed, ref,} from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import {useStore} from "vuex";
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
const store = useStore()
|
||||
const person = ref()
|
||||
|
|
@ -69,40 +75,31 @@
|
|||
return store.state.user.userInfo
|
||||
})
|
||||
|
||||
|
||||
const logOut = async () => {
|
||||
ElMessageBox.confirm(
|
||||
'确定退出登录吗？',
|
||||
'退出登录',
|
||||
{
|
||||
ElMessageBox.confirm('确定退出登录吗？', '退出登录', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
})
|
||||
.then(async () => {
|
||||
try {
|
||||
await store.dispatch('user/logout')
|
||||
router.push({ path: '/login' })
|
||||
store.dispatch('permission/clearRoutes')
|
||||
store.dispatch('tagsView/clearVisitedView')
|
||||
}catch (e) {
|
||||
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
} catch (e) {}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const commandAction = (key: number) => {
|
||||
switch (key) {
|
||||
case 1:
|
||||
logOut()
|
||||
break;
|
||||
break
|
||||
case 2:
|
||||
person.value.show()
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
const handleCollapse = () => {
|
||||
|
|
@ -161,5 +158,4 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@
|
|||
<div class="g-container-layout" :class="classObj">
|
||||
<div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" v-if="mode === 'vertical'" />
|
||||
<div class="main-container" :class="{
|
||||
hideSliderLayout:mode==='horizontal'
|
||||
}">
|
||||
<div
|
||||
class="main-container"
|
||||
:class="{
|
||||
hideSliderLayout: mode === 'horizontal',
|
||||
}"
|
||||
>
|
||||
<u-header />
|
||||
<div class="m-container-content" :class="{ 'app-main-hide-tag': !isShowTag }">
|
||||
<app-main />
|
||||
|
|
@ -14,13 +17,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {computed, defineComponent, ref} from 'vue';
|
||||
import { computed, defineComponent, ref } from 'vue'
|
||||
import Sidebar from './components/Sidebar/index.vue'
|
||||
import UHeader from './components/UHeader/index.vue'
|
||||
import AppMain from './components/AppMain.vue'
|
||||
import { useResizeHandler } from './hooks/useResizeHandler'
|
||||
|
||||
import {useStore} from "vuex";
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'layout',
|
||||
|
|
@ -42,7 +45,7 @@
|
|||
hideSidebar: !store.state.app.isCollapse,
|
||||
openSidebar: store.state.app.isCollapse,
|
||||
withoutAnimation: store.state.app.withoutAnimation,
|
||||
mobile: device.value === 'mobile'
|
||||
mobile: device.value === 'mobile',
|
||||
}
|
||||
})
|
||||
const handleClickOutside = () => {
|
||||
|
|
@ -61,10 +64,10 @@
|
|||
classObj,
|
||||
isShowTag,
|
||||
mode,
|
||||
handleClickOutside
|
||||
handleClickOutside,
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -77,7 +80,7 @@
|
|||
display: flex;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
}
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import './variables.scss';
|
||||
@import './sidebar.scss';
|
||||
@import "./transition.scss";
|
||||
@import './transition.scss';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
#app {
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -173,7 +172,7 @@
|
|||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
transition: transform 0.28s;
|
||||
width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +186,6 @@
|
|||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
|
||||
// 面包屑动画
|
||||
.breadcrumb-enter-active {
|
||||
transition: all 0.25s;
|
||||
|
|
@ -38,8 +37,6 @@
|
|||
transform: translateX(30px) skewX(-50deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
// base color
|
||||
$blue: #324157;
|
||||
$light-blue:#3A71A8;
|
||||
$red:#C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
$light-blue: #3a71a8;
|
||||
$red: #c03639;
|
||||
$pink: #e65d6e;
|
||||
$green: #30b08f;
|
||||
$tiffany: #4ab7bd;
|
||||
$yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// sidebar
|
||||
$menuText: #bfcbd9;
|
||||
$menuActiveText:#409EFF;
|
||||
$menuActiveText: #409eff;
|
||||
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||
|
||||
$menuBg: #304156;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
const TokenKey = 'zb-token'
|
||||
|
||||
export function getToken() {
|
||||
|
|
@ -6,9 +5,9 @@ export function getToken() {
|
|||
}
|
||||
|
||||
export function setToken(token) {
|
||||
return localStorage.TokenKey = token
|
||||
return (localStorage.TokenKey = token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return localStorage.TokenKey =''
|
||||
return (localStorage.TokenKey = '')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export async function downloadFiles2ZipWithFolder(params: IDownloadFiles2ZipWith
|
|||
|
||||
async function handleFolder(zip: JsZip, folder: IFolder) {
|
||||
console.log({folder})
|
||||
let folderPromises: Promise<any>[] = [];
|
||||
const folderPromises: Promise<any>[] = [];
|
||||
const promises = folder?.files?.map(async param => await handleEachFile(param, zip, folder.folderName));
|
||||
await Promise.all([...promises, ...folderPromises]);
|
||||
}
|
||||
|
|
@ -169,7 +169,7 @@ function handleDataWithRender(worksheet: Worksheet, sheet: ISheet) {
|
|||
// @ts-ignore
|
||||
function getValueFromRender(renderResult: any) {
|
||||
if (renderResult?.type) {
|
||||
let children = renderResult?.props?.children;
|
||||
const children = renderResult?.props?.children;
|
||||
if (children?.type) {
|
||||
return getValueFromRender(children);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,35 @@
|
|||
export default {
|
||||
imgs: ['爱你',
|
||||
'爱情', '爱心', '傲慢',
|
||||
'白眼', '抱拳', '鄙视',
|
||||
'闭嘴', '便便', '擦汗',
|
||||
'菜刀', '差劲', '呲牙',
|
||||
'大哭', '蛋糕', '刀',
|
||||
'得意', '凋谢', '发呆', 'NO', 'OK',
|
||||
'发抖', '发怒', '饭', '飞吻', '奋斗',
|
||||
'疯了', '尴尬', '勾引', '鼓掌', '哈欠',
|
||||
]
|
||||
imgs: [
|
||||
'爱你',
|
||||
'爱情',
|
||||
'爱心',
|
||||
'傲慢',
|
||||
'白眼',
|
||||
'抱拳',
|
||||
'鄙视',
|
||||
'闭嘴',
|
||||
'便便',
|
||||
'擦汗',
|
||||
'菜刀',
|
||||
'差劲',
|
||||
'呲牙',
|
||||
'大哭',
|
||||
'蛋糕',
|
||||
'刀',
|
||||
'得意',
|
||||
'凋谢',
|
||||
'发呆',
|
||||
'NO',
|
||||
'OK',
|
||||
'发抖',
|
||||
'发怒',
|
||||
'饭',
|
||||
'飞吻',
|
||||
'奋斗',
|
||||
'疯了',
|
||||
'尴尬',
|
||||
'勾引',
|
||||
'鼓掌',
|
||||
'哈欠',
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ export const exportExcel = async ({column,data,filename,autoWidth,format})=>{
|
|||
// 创建工作表
|
||||
const worksheet = workbook.addWorksheet(filename);
|
||||
// 设置列名
|
||||
let columnsName = [];
|
||||
const columnsName = [];
|
||||
column.forEach((item,index)=>{
|
||||
let obj = {
|
||||
const obj = {
|
||||
header: item.label, key:item.name, width: null
|
||||
}
|
||||
if(autoWidth){
|
||||
let maxArr = [autoWidthAction(item.label)]
|
||||
const maxArr = [autoWidthAction(item.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[item.name] ||''
|
||||
const str = ite[item.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
|
|
@ -93,15 +93,15 @@ export const exportStyleExcel =async ({column,data,filename,autoWidth,format})=>
|
|||
// 创建工作表
|
||||
const worksheet = workbook.addWorksheet(filename);
|
||||
// 设置列名
|
||||
let columnsName = [];
|
||||
const columnsName = [];
|
||||
column.forEach((item,index)=>{
|
||||
let obj = {
|
||||
const obj = {
|
||||
header: item.label, key:item.name, width: null
|
||||
}
|
||||
if(autoWidth){
|
||||
let maxArr = [autoWidthAction(item.label)]
|
||||
const maxArr = [autoWidthAction(item.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[item.name] ||''
|
||||
const str = ite[item.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
|
|
@ -161,7 +161,7 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
|
|||
// 创建excel
|
||||
const workbook = new ExcelJS.Workbook();
|
||||
// 创建工作表
|
||||
let sheet = workbook.addWorksheet("sheet1");
|
||||
const sheet = workbook.addWorksheet("sheet1");
|
||||
|
||||
// 添加表头
|
||||
sheet.getRow(1).values = ["序号", "日期","地址" ,"配送消息" ,,, ];
|
||||
|
|
@ -173,16 +173,16 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
|
|||
"城市",
|
||||
"邮编"
|
||||
];
|
||||
let headers = [];
|
||||
const headers = [];
|
||||
column.forEach((item,index)=>{
|
||||
if(item.children){
|
||||
item.children.forEach(itemChild=>{
|
||||
let obj = {
|
||||
const obj = {
|
||||
key:itemChild.name, width: null
|
||||
}
|
||||
let maxArr = [autoWidthAction(itemChild.label)]
|
||||
const maxArr = [autoWidthAction(itemChild.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[itemChild.name] ||''
|
||||
const str = ite[itemChild.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
|
|
@ -193,12 +193,12 @@ export const exportMultiHeaderExcel = ({column,data,filename,autoWidth})=>{
|
|||
})
|
||||
|
||||
}else {
|
||||
let obj = {
|
||||
const obj = {
|
||||
key:item.name, width: null
|
||||
}
|
||||
let maxArr = [autoWidthAction(item.label)]
|
||||
const maxArr = [autoWidthAction(item.label)]
|
||||
data.forEach(ite=>{
|
||||
let str = ite[item.name] ||''
|
||||
const str = ite[item.name] ||''
|
||||
if(str){
|
||||
maxArr.push(autoWidthAction(str))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ export function parseTime(time, cFormat) {
|
|||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
if ((typeof time === 'string')) {
|
||||
if ((/^[0-9]+$/.test(time))) {
|
||||
if (typeof time === 'string') {
|
||||
if (/^[0-9]+$/.test(time)) {
|
||||
// support "1548221490638"
|
||||
time = parseInt(time)
|
||||
} else {
|
||||
|
|
@ -28,7 +28,7 @@ export function parseTime(time, cFormat) {
|
|||
}
|
||||
}
|
||||
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
if (typeof time === 'number' && time.toString().length === 10) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
|
|
@ -40,12 +40,14 @@ export function parseTime(time, cFormat) {
|
|||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
a: date.getDay(),
|
||||
}
|
||||
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
|
||||
const value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
|
||||
if (key === 'a') {
|
||||
return ['日', '一', '二', '三', '四', '五', '六'][value]
|
||||
}
|
||||
return value.toString().padStart(2, '0')
|
||||
})
|
||||
return time_str
|
||||
|
|
@ -81,15 +83,7 @@ export function formatTime(time, option) {
|
|||
return parseTime(time, option)
|
||||
} else {
|
||||
return (
|
||||
d.getMonth() +
|
||||
1 +
|
||||
'月' +
|
||||
d.getDate() +
|
||||
'日' +
|
||||
d.getHours() +
|
||||
'时' +
|
||||
d.getMinutes() +
|
||||
'分'
|
||||
d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -124,7 +118,7 @@ export function byteLength(str) {
|
|||
const code = str.charCodeAt(i)
|
||||
if (code > 0x7f && code <= 0x7ff) s++
|
||||
else if (code > 0x7ff && code <= 0xffff) s += 2
|
||||
if (code >= 0xDC00 && code <= 0xDFFF) i--
|
||||
if (code >= 0xdc00 && code <= 0xdfff) i--
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
|
@ -150,10 +144,10 @@ export function cleanArray(actual) {
|
|||
export function param(json) {
|
||||
if (!json) return ''
|
||||
return cleanArray(
|
||||
Object.keys(json).map(key => {
|
||||
Object.keys(json).map((key) => {
|
||||
if (json[key] === undefined) return ''
|
||||
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
|
||||
})
|
||||
}),
|
||||
).join('&')
|
||||
}
|
||||
|
||||
|
|
@ -168,7 +162,7 @@ export function param2Obj(url) {
|
|||
}
|
||||
const obj = {}
|
||||
const searchArr = search.split('&')
|
||||
searchArr.forEach(v => {
|
||||
searchArr.forEach((v) => {
|
||||
const index = v.indexOf('=')
|
||||
if (index !== -1) {
|
||||
const name = v.substring(0, index)
|
||||
|
|
@ -202,7 +196,7 @@ export function objectMerge(target, source) {
|
|||
if (Array.isArray(source)) {
|
||||
return source.slice()
|
||||
}
|
||||
Object.keys(source).forEach(property => {
|
||||
Object.keys(source).forEach((property) => {
|
||||
const sourceProperty = source[property]
|
||||
if (typeof sourceProperty === 'object') {
|
||||
target[property] = objectMerge(target[property], sourceProperty)
|
||||
|
|
@ -227,8 +221,7 @@ export function toggleClass(element, className) {
|
|||
classString += '' + className
|
||||
} else {
|
||||
classString =
|
||||
classString.substr(0, nameIndex) +
|
||||
classString.substr(nameIndex + className.length)
|
||||
classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length)
|
||||
}
|
||||
element.className = classString
|
||||
}
|
||||
|
|
@ -298,7 +291,7 @@ export function deepClone(source) {
|
|||
throw new Error('error arguments', 'deepClone')
|
||||
}
|
||||
const targetObj = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach(keys => {
|
||||
Object.keys(source).forEach((keys) => {
|
||||
if (source[keys] && typeof source[keys] === 'object') {
|
||||
targetObj[keys] = deepClone(source[keys])
|
||||
} else {
|
||||
|
|
@ -356,70 +349,77 @@ export function removeClass(ele, cls) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export function getColor() {
|
||||
var str = '#';
|
||||
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
|
||||
var str = '#'
|
||||
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
|
||||
for (var i = 0; i < 6; i++) {
|
||||
var num = parseInt(Math.random() * 16);
|
||||
str += arr[num];
|
||||
var num = parseInt(Math.random() * 16)
|
||||
str += arr[num]
|
||||
}
|
||||
return str;
|
||||
return str
|
||||
}
|
||||
// 检查给定的值是否是数组
|
||||
export const isArray = function (value) {
|
||||
return objToString.call(value) === "[object Array]";
|
||||
};
|
||||
var funProto = Function.prototype;
|
||||
var objProto = Object.prototype;
|
||||
return objToString.call(value) === '[object Array]'
|
||||
}
|
||||
var funProto = Function.prototype
|
||||
var objProto = Object.prototype
|
||||
|
||||
var getPrototypeOf = Object.getPrototypeOf;
|
||||
var getPrototypeOf = Object.getPrototypeOf
|
||||
|
||||
var objToString = objProto.toString;
|
||||
var hasOwnProperty = objProto.hasOwnProperty;
|
||||
var funToString = funProto.toString;
|
||||
var objToString = objProto.toString
|
||||
var hasOwnProperty = objProto.hasOwnProperty
|
||||
var funToString = funProto.toString
|
||||
// 检查给定的值是否是字符串
|
||||
export const isString = function (value) {
|
||||
return objToString.call(value) === "[object String]";
|
||||
};
|
||||
return objToString.call(value) === '[object String]'
|
||||
}
|
||||
// 检查给定的值是否是纯对象，纯对象是指通过 {} 或 new Object() 声明的对象
|
||||
export const isPlainObject = function (value) {
|
||||
if (!value || objToString.call(value) !== "[object Object]") {
|
||||
return false;
|
||||
if (!value || objToString.call(value) !== '[object Object]') {
|
||||
return false
|
||||
}
|
||||
|
||||
var prototype = getPrototypeOf(value);
|
||||
var prototype = getPrototypeOf(value)
|
||||
|
||||
if (prototype === null) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
|
||||
var constructor = hasOwnProperty.call(prototype, "constructor") && prototype.constructor;
|
||||
var constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
|
||||
|
||||
return typeof constructor === "function" && funToString.call(constructor) === funToString.call(Object);
|
||||
};
|
||||
return (
|
||||
typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
|
||||
)
|
||||
}
|
||||
|
||||
// // 深度克隆 array 数组或 json 对象，返回克隆后的副本
|
||||
export const deepObjClone = function (obj) {
|
||||
let weakMap = new WeakMap()
|
||||
function clone(obj) {
|
||||
if(obj==null){return obj}
|
||||
if(obj instanceof Date){ return new Date(obj) }
|
||||
if(obj instanceof RegExp){ return new RegExp(obj)}
|
||||
if (obj == null) {
|
||||
return obj
|
||||
}
|
||||
if (obj instanceof Date) {
|
||||
return new Date(obj)
|
||||
}
|
||||
if (obj instanceof RegExp) {
|
||||
return new RegExp(obj)
|
||||
}
|
||||
if (typeof obj !== 'object') return obj
|
||||
|
||||
if (weakMap.get(obj)) {
|
||||
return weakMap.get(obj)
|
||||
}
|
||||
var copy = new obj.constructor
|
||||
var copy = new obj.constructor()
|
||||
weakMap.set(obj, copy)
|
||||
for (var key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
var value = obj[key];
|
||||
copy[key] = clone(value);
|
||||
var value = obj[key]
|
||||
copy[key] = clone(value)
|
||||
}
|
||||
}
|
||||
return copy;
|
||||
return copy
|
||||
}
|
||||
return clone(obj)
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ export function validUsername(str) {
|
|||
* @returns {Boolean}
|
||||
*/
|
||||
export function validURL(url) {
|
||||
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
|
||||
const reg =
|
||||
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
|
||||
return reg.test(url)
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +61,8 @@ export function validAlphabets(str) {
|
|||
* @returns {Boolean}
|
||||
*/
|
||||
export function validEmail(email) {
|
||||
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
const reg =
|
||||
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
return reg.test(email)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
|
||||
import { defineComponent } from 'vue'
|
||||
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<div class="item-right">
|
||||
<div class="item-right-inner">
|
||||
<div class="text-title">带动就业人数</div>
|
||||
<div class="text-number"><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to></div>
|
||||
<div class="text-number"
|
||||
><count-to :startVal="0" :endVal="6285" :duration="4000" separator=""></count-to
|
||||
></div>
|
||||
<div class="text-der text-decenter-wrapr">
|
||||
<span class="left">同比去年</span>
|
||||
<img src="@/assets/image/allow.png" />
|
||||
|
|
@ -19,10 +21,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="circle-dot" v-for="item,index in pointStyle" :key="index" :style="{
|
||||
<div
|
||||
class="circle-dot"
|
||||
v-for="(item, index) in pointStyle"
|
||||
:key="index"
|
||||
:style="{
|
||||
left: `${item.left}px`,
|
||||
top:`${item.top}px`
|
||||
}"></div>
|
||||
top: `${item.top}px`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,11 +54,15 @@ const getAttribute = () => {
|
|||
const mAnimationInfo = mAnimation.value.getBoundingClientRect()
|
||||
const obj = []
|
||||
for (let i = 0; i < 30; i++) {
|
||||
if (!obj[i]) { obj[i] = {} }
|
||||
if (!obj[i]) {
|
||||
obj[i] = {}
|
||||
}
|
||||
obj[i].left = randomNum(0, mAnimationInfo.width)
|
||||
}
|
||||
for (let i = 0; i < 30; i++) {
|
||||
if (!obj[i]) { obj[i] = {} }
|
||||
if (!obj[i]) {
|
||||
obj[i] = {}
|
||||
}
|
||||
obj[i].top = randomNum(0, mAnimationInfo.height)
|
||||
}
|
||||
return obj
|
||||
|
|
@ -75,11 +86,14 @@ onMounted(() => {
|
|||
animation: rotate 5s infinite linear;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0%{transform:rotate(0deg);}
|
||||
100%{transform:rotate(360deg);}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.item {
|
||||
|
||||
display: flex;
|
||||
/*align-items: center;*/
|
||||
.item-icon {
|
||||
|
|
@ -87,7 +101,7 @@ onMounted(() => {
|
|||
height: 109px;
|
||||
}
|
||||
.item-icon1 {
|
||||
background: url("../../assets/image/center-inner1.png") no-repeat center 43%;
|
||||
background: url('../../assets/image/center-inner1.png') no-repeat center 43%;
|
||||
}
|
||||
.item-right {
|
||||
margin-left: 20px;
|
||||
|
|
@ -127,14 +141,11 @@ onMounted(() => {
|
|||
}
|
||||
.right {
|
||||
color: #ff0000;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.circle-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
|
@ -190,7 +201,6 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.item-animation {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
<script setup lang="ts">
|
||||
import LineCharts from './components/complex/line/index.vue'
|
||||
import BarCharts from './components/complex/bar/index.vue'
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.m-complex {
|
||||
|
|
@ -35,5 +34,4 @@ import BarCharts from './components/complex/bar/index.vue'
|
|||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
legend: {
|
||||
|
|
@ -38,12 +38,12 @@ const options = {
|
|||
'60岁全程接种量',
|
||||
'80岁任务数',
|
||||
'80岁全程接种量',
|
||||
'完成率'
|
||||
]
|
||||
'完成率',
|
||||
],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7']
|
||||
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
|
||||
},
|
||||
yAxis: [
|
||||
{ type: 'value' },
|
||||
|
|
@ -54,7 +54,7 @@ const options = {
|
|||
// max: 100,
|
||||
nameTextStyle: {
|
||||
color: '#ccc',
|
||||
padding: [0, 0, 10, -30]
|
||||
padding: [0, 0, 10, -30],
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
|
|
@ -63,16 +63,16 @@ const options = {
|
|||
type: 'dashed',
|
||||
width: 1,
|
||||
// 使用深浅的间隔色
|
||||
color: ['#566471', '#566471']
|
||||
}
|
||||
color: ['#566471', '#566471'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
|
|
@ -81,56 +81,60 @@ const options = {
|
|||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: 'shadow',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {//x坐标轴轴线
|
||||
axisLine: {
|
||||
//x坐标轴轴线
|
||||
show: true,
|
||||
lineStyle: {//x坐标轴轴线样式
|
||||
lineStyle: {
|
||||
//x坐标轴轴线样式
|
||||
color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
let str = params[0].name + '<br />';
|
||||
console.log(str);
|
||||
console.log(params)
|
||||
let str = params[0].name + '<br />'
|
||||
console.log(str)
|
||||
params.forEach((item) => {
|
||||
console.log(item.seriesName);
|
||||
console.log(item.seriesName)
|
||||
if (item.value) {
|
||||
if (item.seriesName.indexOf('岁全程接种量') != -1) {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
|
||||
item.color
|
||||
}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}人 <br/>
|
||||
全程完成率
|
||||
: ${item.value / 100}%
|
||||
<br/><br/>`;
|
||||
<br/><br/>`
|
||||
} else if (item.seriesName.indexOf('岁任务数') != -1) {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}人
|
||||
<br/>`;
|
||||
<br/>`
|
||||
} else {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}%
|
||||
<br/>`;
|
||||
<br/>`
|
||||
}
|
||||
}
|
||||
});
|
||||
return str;
|
||||
}
|
||||
})
|
||||
return str
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
|
|
@ -138,37 +142,37 @@ const options = {
|
|||
name: '3-11岁任务数',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'BB',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '3-11岁全程接种量',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'BB',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '60岁任务数',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'AA',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '60岁全程接种量',
|
||||
data: [880, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'AA',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '80岁任务数',
|
||||
data: [660, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'Ad',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '80岁全程接种量',
|
||||
data: [880, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'Ad',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
|
|
@ -180,25 +184,25 @@ const options = {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
type: 'dotted',
|
||||
},
|
||||
data: [{ type: 'average', name: 'Avg' + '%' }]
|
||||
},
|
||||
},
|
||||
data: [{ type: 'average', name: 'Avg' + '%' }],
|
||||
},
|
||||
// symbol: 'none',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
type: 'solid' //'dotted'虚线 'solid'实线
|
||||
type: 'solid', //'dotted'虚线 'solid'实线
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -209,6 +213,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
|
|||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260]
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260],
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -47,18 +47,18 @@ const options = {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.seriesData,
|
||||
type: 'bar'
|
||||
}
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
...props.config
|
||||
...props.config,
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
|
|
@ -74,6 +74,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ data.forEach((item,index) => {
|
|||
let obj = {
|
||||
value: data[index],
|
||||
itemStyle: {
|
||||
color: color[index]
|
||||
}
|
||||
color: color[index],
|
||||
},
|
||||
}
|
||||
dataOptions.push(obj)
|
||||
})
|
||||
|
|
@ -27,7 +27,7 @@ const lineConfig = reactive({
|
|||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -41,44 +41,47 @@ const lineConfig = reactive({
|
|||
<div class="title" >完成占比${name[0].value}</div>
|
||||
</div>`
|
||||
return tipHtml
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
// 设置坐标轴的 文字样式
|
||||
axisLabel: {
|
||||
color: '#bbdaff',
|
||||
margin: 20 // 刻度标签与轴线之间的距离。
|
||||
margin: 20, // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
axisTick: { // 取消坐标轴刻度线
|
||||
show: false
|
||||
axisTick: {
|
||||
// 取消坐标轴刻度线
|
||||
show: false,
|
||||
},
|
||||
// 坐标轴轴线相关设置。
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#2d5baf'
|
||||
}
|
||||
}
|
||||
color: '#2d5baf',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
// 坐标轴轴线相关设置。
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#2d5baf'
|
||||
}
|
||||
color: '#2d5baf',
|
||||
},
|
||||
},
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLabel: { // 设置坐标轴的 文字样式
|
||||
axisLabel: {
|
||||
// 设置坐标轴的 文字样式
|
||||
color: '#bbdaff',
|
||||
margin: 20 // 刻度标签与轴线之间的距离。
|
||||
margin: 20, // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
|
||||
axisTick: { // 取消坐标轴刻度线
|
||||
show: false
|
||||
}
|
||||
axisTick: {
|
||||
// 取消坐标轴刻度线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -86,13 +89,11 @@ const lineConfig = reactive({
|
|||
type: 'bar',
|
||||
barMaxWidth: 18,
|
||||
markLine: {
|
||||
silent: true
|
||||
silent: true,
|
||||
},
|
||||
|
||||
|
||||
}]
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item-charts {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
|
|||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260]
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260],
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -47,18 +47,18 @@ const options = {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.seriesData,
|
||||
type: 'line'
|
||||
}
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
...props.config
|
||||
...props.config,
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
|
|
@ -74,6 +74,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
|
|||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260]
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260],
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -47,18 +47,18 @@ const options = {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.seriesData,
|
||||
type: 'line'
|
||||
}
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
...props.config
|
||||
...props.config,
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
|
|
@ -74,6 +74,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const lineConfig = reactive({
|
|||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -27,41 +27,43 @@ const lineConfig = reactive({
|
|||
<div class="title" >完成占比${name[0].data}</div>
|
||||
</div>`
|
||||
return tipHtml
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
// 设置坐标轴的 文字样式
|
||||
axisLabel: {
|
||||
color: '#bbdaff',
|
||||
margin: 20 // 刻度标签与轴线之间的距离。
|
||||
margin: 20, // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
// 坐标轴轴线相关设置。
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#2d5baf'
|
||||
}
|
||||
}
|
||||
color: '#2d5baf',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
// 坐标轴轴线相关设置。
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#2d5baf'
|
||||
}
|
||||
color: '#2d5baf',
|
||||
},
|
||||
},
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLabel: { // 设置坐标轴的 文字样式
|
||||
axisLabel: {
|
||||
// 设置坐标轴的 文字样式
|
||||
color: '#bbdaff',
|
||||
margin: 20 // 刻度标签与轴线之间的距离。
|
||||
margin: 20, // 刻度标签与轴线之间的距离。
|
||||
},
|
||||
boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
|
||||
axisTick: { // 取消坐标轴刻度线
|
||||
show: false
|
||||
}
|
||||
axisTick: {
|
||||
// 取消坐标轴刻度线
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -71,7 +73,7 @@ const lineConfig = reactive({
|
|||
symbolSize: 12, // 拐点圆的大小
|
||||
symbol: 'circle',
|
||||
markLine: {
|
||||
silent: true
|
||||
silent: true,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -79,14 +81,13 @@ const lineConfig = reactive({
|
|||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#920783',
|
||||
type: 'solid' // 'dotted'虚线 'solid'实线
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}]
|
||||
type: 'solid', // 'dotted'虚线 'solid'实线
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item-charts {
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -35,7 +35,7 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
backgroundColor: '#0F224C', //背景色
|
||||
series: [
|
||||
|
|
@ -44,7 +44,7 @@ const options = {
|
|||
radius: '80%', //显示比例
|
||||
center: ['50%', '50%'], //中心点
|
||||
amplitude: 20, //水波振幅
|
||||
data: [0.5,.5,.5], // data个数代表波浪数
|
||||
data: [0.5, 0.5, 0.5], // data个数代表波浪数
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
|
|
@ -89,8 +89,8 @@ const options = {
|
|||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -101,6 +101,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,59 +2,59 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
|
||||
const indicator = [
|
||||
{
|
||||
text: '文明村',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '卫生村',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '森林村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '全面小康',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '景区村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
max: 100,
|
||||
},
|
||||
]
|
||||
const Data = [80, 61, 70, 86, 77]
|
||||
function setData() {
|
||||
|
|
@ -66,11 +66,11 @@ function setData() {
|
|||
lineStyle: {
|
||||
color: '#4BFFFC',
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
shadowBlur: 5,
|
||||
},
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
}
|
||||
shadowBlur: 5,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
|
|
@ -83,19 +83,19 @@ function setData() {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#4BFFFC'
|
||||
color: '#4BFFFC',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
opacity: 0.8, // 区域透明度
|
||||
},
|
||||
},
|
||||
},
|
||||
opacity: 0.8 // 区域透明度
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -109,23 +109,23 @@ function setgauge(i) {
|
|||
startAngle: 90 + 72 * i + 18, //开始刻度的角度
|
||||
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#66ccff',
|
||||
width: 1
|
||||
width: 1,
|
||||
},
|
||||
length: 6,
|
||||
splitNumber: 1
|
||||
splitNumber: 1,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
function setSpot() {
|
||||
|
|
@ -139,9 +139,9 @@ function setSpot() {
|
|||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
shadowColor: color[i],
|
||||
shadowBlur: 8
|
||||
}
|
||||
}
|
||||
shadowBlur: 8,
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
return scatterData
|
||||
|
|
@ -151,7 +151,7 @@ const options = {
|
|||
backgroundColor: '#0E1327',
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '60%'
|
||||
radius: '60%',
|
||||
},
|
||||
radar: {
|
||||
shape: 'circle',
|
||||
|
|
@ -161,7 +161,7 @@ const options = {
|
|||
axisName: {
|
||||
color: '#b7e9fd',
|
||||
fontSize: 13,
|
||||
padding: -20
|
||||
padding: -20,
|
||||
},
|
||||
nameGap: 45,
|
||||
splitNumber: 4,
|
||||
|
|
@ -170,21 +170,21 @@ const options = {
|
|||
show: true,
|
||||
areaStyle: {
|
||||
// 分隔区域的样式设置。
|
||||
color: ['rgba(27, 50, 66, 0.4)']
|
||||
}
|
||||
color: ['rgba(27, 50, 66, 0.4)'],
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
color: '#5aa3d0',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
|
||||
width: 2 // 分隔线线宽
|
||||
}
|
||||
}
|
||||
width: 2, // 分隔线线宽
|
||||
},
|
||||
},
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -193,40 +193,40 @@ const options = {
|
|||
boundaryGap: false,
|
||||
clockwise: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
color: '#5aa3d0',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#5aa3d0',
|
||||
align: 'left',
|
||||
margin: -5
|
||||
}
|
||||
margin: -5,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
setgauge(0),
|
||||
|
|
@ -238,22 +238,22 @@ const options = {
|
|||
type: 'radar',
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: '#66ffff'
|
||||
color: '#66ffff',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(102, 255, 255, 0.31)'
|
||||
color: 'rgba(102, 255, 255, 0.31)',
|
||||
},
|
||||
data: setData()
|
||||
data: setData(),
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'polar',
|
||||
symbolSize: 20,
|
||||
data: setSpot()
|
||||
data: setSpot(),
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -262,10 +262,8 @@ const initChart =()=> {
|
|||
onMounted(() => {
|
||||
chart = initChart()
|
||||
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,33 +2,33 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
|
||||
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
|
||||
let echartData = [
|
||||
{
|
||||
name: '设备1',
|
||||
|
|
@ -46,11 +46,11 @@ let echartData = [
|
|||
name: '设备4',
|
||||
value: '1420',
|
||||
},
|
||||
];
|
||||
]
|
||||
let formatNumber = function (num) {
|
||||
let reg = /(?=(\B)(\d{3})+$)/g;
|
||||
return num.toString().replace(reg, ',');
|
||||
};
|
||||
let reg = /(?=(\B)(\d{3})+$)/g
|
||||
return num.toString().replace(reg, ',')
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#364686',
|
||||
|
|
@ -123,7 +123,9 @@ const options = {
|
|||
label: {
|
||||
normal: {
|
||||
formatter: (params) => {
|
||||
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
|
||||
return (
|
||||
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
|
||||
)
|
||||
},
|
||||
padding: [0, -70, 30, -70],
|
||||
rich: {
|
||||
|
|
@ -183,8 +185,8 @@ const options = {
|
|||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -195,6 +197,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,34 +2,33 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const options = {
|
||||
title: [
|
||||
{
|
||||
|
|
@ -132,8 +131,8 @@ const options = {
|
|||
data: [100],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -144,6 +143,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,72 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
var data = [],data2=[];
|
||||
var data = [],
|
||||
data2 = []
|
||||
var trafficWay = [
|
||||
{
|
||||
name: '病假',
|
||||
value: 20
|
||||
},{
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: '事假',
|
||||
value: 1
|
||||
},{
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: '婚假',
|
||||
value: 30
|
||||
},{
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
name: '丧假',
|
||||
value: 40
|
||||
},{
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
name: '年休假',
|
||||
value: 40
|
||||
}];
|
||||
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
|
||||
value: 40,
|
||||
},
|
||||
]
|
||||
var color = [
|
||||
'#2A8BFD',
|
||||
'#BAFF7F',
|
||||
'#00FAC1',
|
||||
'#00CAFF',
|
||||
'#FDE056',
|
||||
'#4ED33C',
|
||||
'#FF8A26',
|
||||
'#FF5252',
|
||||
'#9689FF',
|
||||
'#CB00FF',
|
||||
]
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push({
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
|
|
@ -58,28 +75,30 @@ for (var i = 0; i < trafficWay.length; i++) {
|
|||
shadowBlur: 20,
|
||||
borderRadius: 20,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
shadowColor: color[i],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
data2.push({
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
data2.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
},
|
||||
|
|
@ -89,26 +108,25 @@ for (var i = 0; i < trafficWay.length; i++) {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0,
|
||||
opacity:0.2
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
let angle = 0 //角度，用来做简单的动画效果的
|
||||
|
||||
const option = {
|
||||
backgroundColor:"#061740",
|
||||
backgroundColor: '#061740',
|
||||
color: color,
|
||||
legend: {
|
||||
right: '10%',
|
||||
|
|
@ -118,204 +136,212 @@ const option = {
|
|||
itemHeight: 15,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{//外线1
|
||||
name: "ring5",
|
||||
{
|
||||
//外线1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (0+angle) * Math.PI / 180,
|
||||
endAngle: (90+angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((0 + angle) * Math.PI) / 180,
|
||||
endAngle: ((90 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: '#4EE9E6',
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//内线1
|
||||
name: "ring5",
|
||||
{
|
||||
//内线1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (180+angle) * Math.PI / 180,
|
||||
endAngle: (270+angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((180 + angle) * Math.PI) / 180,
|
||||
endAngle: ((270 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
{
|
||||
//外线2
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (270+-angle) * Math.PI / 180,
|
||||
endAngle: (40+-angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((270 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((40 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
{
|
||||
//外线2
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (90+-angle) * Math.PI / 180,
|
||||
endAngle: (220+-angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((90 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((220 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点1
|
||||
name: "ring5",
|
||||
{
|
||||
//绿点1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (90+-angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 90 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点2
|
||||
name: "ring5", //绿点
|
||||
{
|
||||
//绿点2
|
||||
name: 'ring5', //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (270+-angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 270 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点3
|
||||
name: "ring5",
|
||||
{
|
||||
//绿点3
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (90+angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
|
||||
let point = getCirlPoint(x0, y0, r, 90 + angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点4
|
||||
name: "ring5", //绿点
|
||||
{
|
||||
//绿点4
|
||||
name: 'ring5', //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (270+angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
|
||||
let point = getCirlPoint(x0, y0, r, 270 + angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
|
|
@ -324,19 +350,19 @@ const option = {
|
|||
radius: ['98%', '95%'],
|
||||
hoverAnimation: false,
|
||||
center: ['33.33%', '50%'],
|
||||
top:"center",
|
||||
top: 'center',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
data:data
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
top:"center",
|
||||
top: 'center',
|
||||
startAngle: 90,
|
||||
clockwise: false,
|
||||
center: ['33.33%', '50%'],
|
||||
|
|
@ -344,16 +370,16 @@ const option = {
|
|||
hoverAnimation: false,
|
||||
radius: ['94%', '55%'],
|
||||
itemStyle: {
|
||||
opacity:0.15
|
||||
opacity: 0.15,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
position: 'center',
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
data:data2
|
||||
data: data2,
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
|
|
@ -362,30 +388,29 @@ const option = {
|
|||
center: ['33.33%', '50%'],
|
||||
radius: ['39%', '38%'],
|
||||
hoverAnimation: false,
|
||||
top:"center",
|
||||
top: 'center',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
data:data
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
}
|
||||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
function getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
||||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
y: y1,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
draw(chart)
|
||||
|
|
@ -403,11 +428,10 @@ onMounted(()=>{
|
|||
setInterval(function () {
|
||||
//用setInterval做动画感觉有问题
|
||||
draw(chart)
|
||||
}, 100);
|
||||
}, 100)
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,230 +2,229 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
let datalist = [
|
||||
{
|
||||
name: "公共平台"
|
||||
name: '公共平台',
|
||||
},
|
||||
{
|
||||
name: "系统0000"
|
||||
name: '系统0000',
|
||||
},
|
||||
{
|
||||
name: "系统0011"
|
||||
name: '系统0011',
|
||||
},
|
||||
{
|
||||
name: "系统0022"
|
||||
name: '系统0022',
|
||||
},
|
||||
{
|
||||
name: "系统0033"
|
||||
name: '系统0033',
|
||||
},
|
||||
{
|
||||
name: "系统0044"
|
||||
name: '系统0044',
|
||||
},
|
||||
{
|
||||
name: "系统0055"
|
||||
},{
|
||||
name: "系统11"
|
||||
name: '系统0055',
|
||||
},
|
||||
{
|
||||
name: "系统22"
|
||||
name: '系统11',
|
||||
},
|
||||
{
|
||||
name: "系统33"
|
||||
name: '系统22',
|
||||
},
|
||||
{
|
||||
name: "系统44"
|
||||
name: '系统33',
|
||||
},
|
||||
{
|
||||
name: "系统55"
|
||||
name: '系统44',
|
||||
},
|
||||
{
|
||||
name: "系统66"
|
||||
name: '系统55',
|
||||
},
|
||||
{
|
||||
name: "系统77"
|
||||
name: '系统66',
|
||||
},
|
||||
{
|
||||
name: "系统88"
|
||||
name: '系统77',
|
||||
},
|
||||
{
|
||||
name: "系统99"
|
||||
}
|
||||
];
|
||||
name: '系统88',
|
||||
},
|
||||
{
|
||||
name: '系统99',
|
||||
},
|
||||
]
|
||||
let linksData = [
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0000",
|
||||
value: 1044305
|
||||
source: '公共平台',
|
||||
target: '系统0000',
|
||||
value: 1044305,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0011",
|
||||
value: 651527
|
||||
source: '公共平台',
|
||||
target: '系统0011',
|
||||
value: 651527,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0022",
|
||||
value: 651527
|
||||
source: '公共平台',
|
||||
target: '系统0022',
|
||||
value: 651527,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0033",
|
||||
value: 486710
|
||||
source: '公共平台',
|
||||
target: '系统0033',
|
||||
value: 486710,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0044",
|
||||
value: 212670
|
||||
source: '公共平台',
|
||||
target: '系统0044',
|
||||
value: 212670,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0055",
|
||||
value: 210400
|
||||
},{
|
||||
source: "系统0011",
|
||||
target: "系统11",
|
||||
value: 645246
|
||||
source: '公共平台',
|
||||
target: '系统0055',
|
||||
value: 210400,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统22",
|
||||
value: 513275
|
||||
source: '系统0011',
|
||||
target: '系统11',
|
||||
value: 645246,
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统33",
|
||||
value: 282986
|
||||
source: '系统0022',
|
||||
target: '系统22',
|
||||
value: 513275,
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统44",
|
||||
value: 118655
|
||||
source: '系统0011',
|
||||
target: '系统33',
|
||||
value: 282986,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统55",
|
||||
value: 105989
|
||||
source: '系统0011',
|
||||
target: '系统44',
|
||||
value: 118655,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统66",
|
||||
value: 95100
|
||||
source: '系统0022',
|
||||
target: '系统55',
|
||||
value: 105989,
|
||||
},
|
||||
{
|
||||
source: "系统0033",
|
||||
target: "系统77",
|
||||
value: 87796
|
||||
source: '系统0022',
|
||||
target: '系统66',
|
||||
value: 95100,
|
||||
},
|
||||
{
|
||||
source: "系统0044",
|
||||
target: "系统88",
|
||||
value: 47658
|
||||
source: '系统0033',
|
||||
target: '系统77',
|
||||
value: 87796,
|
||||
},
|
||||
{
|
||||
source: "系统0055",
|
||||
target: "系统99",
|
||||
value: 243660
|
||||
source: '系统0044',
|
||||
target: '系统88',
|
||||
value: 47658,
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
{
|
||||
source: '系统0055',
|
||||
target: '系统99',
|
||||
value: 243660,
|
||||
},
|
||||
]
|
||||
let Color = [
|
||||
"#61FEFF",
|
||||
"#937FE6",
|
||||
"#2B56D3",
|
||||
"#87E7AA",
|
||||
"#937FE6",
|
||||
"#FF9B97",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
]; let Color1 = [
|
||||
"#04E0F3",
|
||||
"#682EFC",
|
||||
"#35A7FE",
|
||||
"#0DC09F",
|
||||
"#682EFC",
|
||||
"#ED6663",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
];
|
||||
'#61FEFF',
|
||||
'#937FE6',
|
||||
'#2B56D3',
|
||||
'#87E7AA',
|
||||
'#937FE6',
|
||||
'#FF9B97',
|
||||
'#8f23f5',
|
||||
'#0576ea',
|
||||
'#2cb8cf',
|
||||
'#8A7EE0',
|
||||
'#2cb8cf',
|
||||
'#4e70f0',
|
||||
'#1fa3de',
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
]
|
||||
let Color1 = [
|
||||
'#04E0F3',
|
||||
'#682EFC',
|
||||
'#35A7FE',
|
||||
'#0DC09F',
|
||||
'#682EFC',
|
||||
'#ED6663',
|
||||
'#8f23f5',
|
||||
'#0576ea',
|
||||
'#2cb8cf',
|
||||
'#8A7EE0',
|
||||
'#2cb8cf',
|
||||
'#4e70f0',
|
||||
'#1fa3de',
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
]
|
||||
let sourceLabel = [
|
||||
"right",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left"
|
||||
];
|
||||
let itemStyleColor = [];
|
||||
let labelSource = [];
|
||||
'right',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
]
|
||||
let itemStyleColor = []
|
||||
let labelSource = []
|
||||
for (let i = 0; i < datalist.length; i++) {
|
||||
datalist[i].label = {
|
||||
normal: {
|
||||
position: sourceLabel[i]
|
||||
position: sourceLabel[i],
|
||||
},
|
||||
}
|
||||
};
|
||||
labelSource.push(sourceLabel[i]);
|
||||
labelSource.push(sourceLabel[i])
|
||||
}
|
||||
for (let d = 0; d < datalist.length; d++) {
|
||||
datalist[d].itemStyle = {
|
||||
normal: {
|
||||
// color: Color[d]
|
||||
color: {
|
||||
type: "linear",
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
|
|
@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
|
|||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
itemStyleColor.push(datalist[d]);
|
||||
itemStyleColor.push(datalist[d])
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: "#031d7a",
|
||||
backgroundColor: '#031d7a',
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
triggerOn: "mousemove",
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove',
|
||||
formatter: function (params) {
|
||||
if (params.name == "公共平台") {
|
||||
return " 公共平台 "
|
||||
if (params.name == '公共平台') {
|
||||
return ' 公共平台 '
|
||||
} else {
|
||||
let value = params.data.value;
|
||||
if (!value && value !== 0) return 0;
|
||||
let str = value.toString();
|
||||
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
|
||||
if (params.data.source == "公共平台") {
|
||||
return params.data.target + " : " + str.replace(reg, "$1,");
|
||||
let value = params.data.value
|
||||
if (!value && value !== 0) return 0
|
||||
let str = value.toString()
|
||||
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
|
||||
if (params.data.source == '公共平台') {
|
||||
return params.data.target + ' : ' + str.replace(reg, '$1,')
|
||||
} else {
|
||||
return params.data.source + " : " + str.replace(reg, "$1,");
|
||||
}
|
||||
return params.data.source + ' : ' + str.replace(reg, '$1,')
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "4%",
|
||||
bottom: "12%",
|
||||
left: "20",
|
||||
right: "20",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
top: '4%',
|
||||
bottom: '12%',
|
||||
left: '20',
|
||||
right: '20',
|
||||
nodeGap: 15,
|
||||
nodeWidth: 25,
|
||||
focusNodeAdjacency: "allEdges",
|
||||
focusNodeAdjacency: 'allEdges',
|
||||
data: itemStyleColor,
|
||||
links: linksData,
|
||||
label: {
|
||||
normal: {
|
||||
color: "#fff",
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
if (params.data.name == '公共平台') {
|
||||
let strs = params.data.name.split(''); //字符串数组
|
||||
let strs = params.data.name.split('') //字符串数组
|
||||
let str = ''
|
||||
for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
|
||||
str += s;
|
||||
if (!(i % 1)) str += '\n'; //按需要求余
|
||||
for (let i = 0, s; (s = strs[i++]); ) {
|
||||
//遍历字符串数组
|
||||
str += s
|
||||
if (!(i % 1)) str += '\n' //按需要求余
|
||||
}
|
||||
return "{white|" + str + "}"
|
||||
return '{white|' + str + '}'
|
||||
} else {
|
||||
return params.data.name
|
||||
}
|
||||
|
|
@ -301,27 +302,28 @@ const options = {
|
|||
white: {
|
||||
fontSize: 16,
|
||||
lineHeight: 30,
|
||||
padding: [0, 0, 0, -26]
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: [0, 0, 0, -26],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.4,
|
||||
color: "source",
|
||||
curveness: 0.5
|
||||
}
|
||||
color: 'source',
|
||||
curveness: 0.5,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent"
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -332,6 +334,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,38 @@
|
|||
export const cityIconData = [
|
||||
{
|
||||
adcode: 650000,
|
||||
name: "新疆维吾尔自治区",
|
||||
value:[88.999903,43.607078]
|
||||
},{
|
||||
adcode: 150000,
|
||||
name: "内蒙古自治区",
|
||||
value:[119.24787,42.205741]
|
||||
name: '新疆维吾尔自治区',
|
||||
value: [88.999903, 43.607078],
|
||||
},
|
||||
,{
|
||||
{
|
||||
adcode: 150000,
|
||||
name: "内蒙古自治区",
|
||||
value:[110.627161,41.16628]
|
||||
name: '内蒙古自治区',
|
||||
value: [119.24787, 42.205741],
|
||||
},
|
||||
,
|
||||
{
|
||||
adcode: 150000,
|
||||
name: '内蒙古自治区',
|
||||
value: [110.627161, 41.16628],
|
||||
},
|
||||
{
|
||||
adcode: 540000,
|
||||
name: "西藏自治区",
|
||||
value:[89.483714,30.251951]
|
||||
name: '西藏自治区',
|
||||
value: [89.483714, 30.251951],
|
||||
},
|
||||
{
|
||||
adcode: 630000,
|
||||
name: "青海省",
|
||||
value:[102.064693,37.084008]
|
||||
name: '青海省',
|
||||
value: [102.064693, 37.084008],
|
||||
},
|
||||
{
|
||||
adcode: 530000,
|
||||
name: "云南省",
|
||||
value:[102.187665,25.083688]
|
||||
name: '云南省',
|
||||
value: [102.187665, 25.083688],
|
||||
},
|
||||
{
|
||||
adcode: 610000,
|
||||
name: "陕西省",
|
||||
value:[109.20663,35.018625]
|
||||
name: '陕西省',
|
||||
value: [109.20663, 35.018625],
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
|
|
@ -18,5 +17,198 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("echarts")):"function"==typeof define&&define.amd?define(["exports","echarts"],e):e(t.bmap={},t.echarts)}(this,function(t,e){"use strict";function o(t,e){this._bmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e,this._projection=new BMap.MercatorProjection}function n(t,o){return o=o||[0,0],e.util.map([0,1],function(e){var n=o[e],i=t[e]/2,a=[],r=[];return a[e]=n-i,r[e]=n+i,a[1-e]=r[1-e]=o[1-e],Math.abs(this.dataToPoint(a)[e]-this.dataToPoint(r)[e])},this)}function i(){function t(t){this._root=t}return t.prototype=new BMap.Overlay,t.prototype.initialize=function(t){return t.getPanes().labelPane.appendChild(this._root),this._root},t.prototype.draw=function(){},t}function a(t,e){return t&&e&&t[0]===e[0]&&t[1]===e[1]}o.prototype.dimensions=["lng","lat"],o.prototype.setZoom=function(t){this._zoom=t},o.prototype.setCenter=function(t){this._center=this._projection.lngLatToPoint(new BMap.Point(t[0],t[1]))},o.prototype.setMapOffset=function(t){this._mapOffset=t},o.prototype.getBMap=function(){return this._bmap},o.prototype.dataToPoint=function(t){var e=new BMap.Point(t[0],t[1]),o=this._bmap.pointToOverlayPixel(e),n=this._mapOffset;return[o.x-n[0],o.y-n[1]]},o.prototype.pointToData=function(t){var e=this._mapOffset;return[(t=this._bmap.overlayPixelToPoint({x:t[0]+e[0],y:t[1]+e[1]})).lng,t.lat]},o.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},o.prototype.getRoamTransform=function(){return e.matrix.create()},o.prototype.prepareCustoms=function(t){var o=this.getViewRect();return{coordSys:{type:"bmap",x:o.x,y:o.y,width:o.width,height:o.height},api:{coord:e.util.bind(this.dataToPoint,this),size:e.util.bind(n,this)}}};var r;o.dimensions=o.prototype.dimensions,o.create=function(t,e){var n,a=e.getDom();t.eachComponent("bmap",function(t){var p=e.getZr().painter,s=p.getViewportRoot();if("undefined"==typeof BMap)throw new Error("BMap api is not loaded");if(r=r||i(),n)throw new Error("Only one bmap component can exist");if(!t.__bmap){var m=a.querySelector(".ec-extension-bmap");m&&(s.style.left="0px",s.style.top="0px",a.removeChild(m)),(m=document.createElement("div")).style.cssText="width:100%;height:100%",m.classList.add("ec-extension-bmap"),a.appendChild(m);var c=t.__bmap=new BMap.Map(m),d=new r(s);c.addOverlay(d),p.getViewportRootOffset=function(){return{offsetLeft:0,offsetTop:0}}}var c=t.__bmap,f=t.get("center"),l=t.get("zoom");if(f&&l){var h=new BMap.Point(f[0],f[1]);c.centerAndZoom(h,l)}(n=new o(c,e)).setMapOffset(t.__mapOffset||[0,0]),n.setZoom(l),n.setCenter(f),t.coordinateSystem=n}),t.eachSeries(function(t){"bmap"===t.get("coordinateSystem")&&(t.coordinateSystem=n)})},e.extendComponentModel({type:"bmap",getBMap:function(){return this.__bmap},setCenterAndZoom:function(t,e){this.option.center=t,this.option.zoom=e},centerOrZoomChanged:function(t,e){var o=this.option;return!(a(t,o.center)&&e===o.zoom)},defaultOption:{center:[104.114129,37.550339],zoom:5,mapStyle:{},roam:!1}}),e.extendComponentView({type:"bmap",render:function(t,e,o){function n(){i||o.dispatchAction({type:"bmapRoam"})}var i=!0,a=t.getBMap(),r=o.getZr().painter.getViewportRoot(),p=t.coordinateSystem,s=function(e,n){if(!i){var a=r.parentNode.parentNode.parentNode,s=[-parseInt(a.style.left,10)||0,-parseInt(a.style.top,10)||0];r.style.left=s[0]+"px",r.style.top=s[1]+"px",p.setMapOffset(s),t.__mapOffset=s,o.dispatchAction({type:"bmapRoam"})}};a.removeEventListener("moving",this._oldMoveHandler),a.removeEventListener("zoomend",this._oldZoomEndHandler),a.addEventListener("moving",s),a.addEventListener("zoomend",n),this._oldMoveHandler=s,this._oldZoomEndHandler=n;var m=t.get("roam");m&&"scale"!==m?a.enableDragging():a.disableDragging(),m&&"move"!==m?(a.enableScrollWheelZoom(),a.enableDoubleClickZoom(),a.enablePinchToZoom()):(a.disableScrollWheelZoom(),a.disableDoubleClickZoom(),a.disablePinchToZoom());var c=t.__mapStyle,d=t.get("mapStyle")||{},f=JSON.stringify(d);JSON.stringify(c)!==f&&(Object.keys(d).length&&a.setMapStyle(d),t.__mapStyle=JSON.parse(f)),i=!1}}),e.registerCoordinateSystem("bmap",o),e.registerAction({type:"bmapRoam",event:"bmapRoam",update:"updateLayout"},function(t,e){e.eachComponent("bmap",function(t){var e=t.getBMap(),o=e.getCenter();t.setCenterAndZoom([o.lng,o.lat],e.getZoom())})});t.version="1.0.0"});
|
||||
!(function (t, e) {
|
||||
'object' == typeof exports && 'undefined' != typeof module
|
||||
? e(exports, require('echarts'))
|
||||
: 'function' == typeof define && define.amd
|
||||
? define(['exports', 'echarts'], e)
|
||||
: e((t.bmap = {}), t.echarts)
|
||||
})(this, function (t, e) {
|
||||
'use strict'
|
||||
function o(t, e) {
|
||||
;(this._bmap = t),
|
||||
(this.dimensions = ['lng', 'lat']),
|
||||
(this._mapOffset = [0, 0]),
|
||||
(this._api = e),
|
||||
(this._projection = new BMap.MercatorProjection())
|
||||
}
|
||||
function n(t, o) {
|
||||
return (
|
||||
(o = o || [0, 0]),
|
||||
e.util.map(
|
||||
[0, 1],
|
||||
function (e) {
|
||||
var n = o[e],
|
||||
i = t[e] / 2,
|
||||
a = [],
|
||||
r = []
|
||||
return (
|
||||
(a[e] = n - i),
|
||||
(r[e] = n + i),
|
||||
(a[1 - e] = r[1 - e] = o[1 - e]),
|
||||
Math.abs(this.dataToPoint(a)[e] - this.dataToPoint(r)[e])
|
||||
)
|
||||
},
|
||||
this,
|
||||
)
|
||||
)
|
||||
}
|
||||
function i() {
|
||||
function t(t) {
|
||||
this._root = t
|
||||
}
|
||||
return (
|
||||
(t.prototype = new BMap.Overlay()),
|
||||
(t.prototype.initialize = function (t) {
|
||||
return t.getPanes().labelPane.appendChild(this._root), this._root
|
||||
}),
|
||||
(t.prototype.draw = function () {}),
|
||||
t
|
||||
)
|
||||
}
|
||||
function a(t, e) {
|
||||
return t && e && t[0] === e[0] && t[1] === e[1]
|
||||
}
|
||||
;(o.prototype.dimensions = ['lng', 'lat']),
|
||||
(o.prototype.setZoom = function (t) {
|
||||
this._zoom = t
|
||||
}),
|
||||
(o.prototype.setCenter = function (t) {
|
||||
this._center = this._projection.lngLatToPoint(new BMap.Point(t[0], t[1]))
|
||||
}),
|
||||
(o.prototype.setMapOffset = function (t) {
|
||||
this._mapOffset = t
|
||||
}),
|
||||
(o.prototype.getBMap = function () {
|
||||
return this._bmap
|
||||
}),
|
||||
(o.prototype.dataToPoint = function (t) {
|
||||
var e = new BMap.Point(t[0], t[1]),
|
||||
o = this._bmap.pointToOverlayPixel(e),
|
||||
n = this._mapOffset
|
||||
return [o.x - n[0], o.y - n[1]]
|
||||
}),
|
||||
(o.prototype.pointToData = function (t) {
|
||||
var e = this._mapOffset
|
||||
return [(t = this._bmap.overlayPixelToPoint({ x: t[0] + e[0], y: t[1] + e[1] })).lng, t.lat]
|
||||
}),
|
||||
(o.prototype.getViewRect = function () {
|
||||
var t = this._api
|
||||
return new e.graphic.BoundingRect(0, 0, t.getWidth(), t.getHeight())
|
||||
}),
|
||||
(o.prototype.getRoamTransform = function () {
|
||||
return e.matrix.create()
|
||||
}),
|
||||
(o.prototype.prepareCustoms = function (t) {
|
||||
var o = this.getViewRect()
|
||||
return {
|
||||
coordSys: { type: 'bmap', x: o.x, y: o.y, width: o.width, height: o.height },
|
||||
api: { coord: e.util.bind(this.dataToPoint, this), size: e.util.bind(n, this) },
|
||||
}
|
||||
})
|
||||
var r
|
||||
;(o.dimensions = o.prototype.dimensions),
|
||||
(o.create = function (t, e) {
|
||||
var n,
|
||||
a = e.getDom()
|
||||
t.eachComponent('bmap', function (t) {
|
||||
var p = e.getZr().painter,
|
||||
s = p.getViewportRoot()
|
||||
if ('undefined' == typeof BMap) throw new Error('BMap api is not loaded')
|
||||
if (((r = r || i()), n)) throw new Error('Only one bmap component can exist')
|
||||
if (!t.__bmap) {
|
||||
var m = a.querySelector('.ec-extension-bmap')
|
||||
m && ((s.style.left = '0px'), (s.style.top = '0px'), a.removeChild(m)),
|
||||
((m = document.createElement('div')).style.cssText = 'width:100%;height:100%'),
|
||||
m.classList.add('ec-extension-bmap'),
|
||||
a.appendChild(m)
|
||||
var c = (t.__bmap = new BMap.Map(m)),
|
||||
d = new r(s)
|
||||
c.addOverlay(d),
|
||||
(p.getViewportRootOffset = function () {
|
||||
return { offsetLeft: 0, offsetTop: 0 }
|
||||
})
|
||||
}
|
||||
var c = t.__bmap,
|
||||
f = t.get('center'),
|
||||
l = t.get('zoom')
|
||||
if (f && l) {
|
||||
var h = new BMap.Point(f[0], f[1])
|
||||
c.centerAndZoom(h, l)
|
||||
}
|
||||
;(n = new o(c, e)).setMapOffset(t.__mapOffset || [0, 0]),
|
||||
n.setZoom(l),
|
||||
n.setCenter(f),
|
||||
(t.coordinateSystem = n)
|
||||
}),
|
||||
t.eachSeries(function (t) {
|
||||
'bmap' === t.get('coordinateSystem') && (t.coordinateSystem = n)
|
||||
})
|
||||
}),
|
||||
e.extendComponentModel({
|
||||
type: 'bmap',
|
||||
getBMap: function () {
|
||||
return this.__bmap
|
||||
},
|
||||
setCenterAndZoom: function (t, e) {
|
||||
;(this.option.center = t), (this.option.zoom = e)
|
||||
},
|
||||
centerOrZoomChanged: function (t, e) {
|
||||
var o = this.option
|
||||
return !(a(t, o.center) && e === o.zoom)
|
||||
},
|
||||
defaultOption: { center: [104.114129, 37.550339], zoom: 5, mapStyle: {}, roam: !1 },
|
||||
}),
|
||||
e.extendComponentView({
|
||||
type: 'bmap',
|
||||
render: function (t, e, o) {
|
||||
function n() {
|
||||
i || o.dispatchAction({ type: 'bmapRoam' })
|
||||
}
|
||||
var i = !0,
|
||||
a = t.getBMap(),
|
||||
r = o.getZr().painter.getViewportRoot(),
|
||||
p = t.coordinateSystem,
|
||||
s = function (e, n) {
|
||||
if (!i) {
|
||||
var a = r.parentNode.parentNode.parentNode,
|
||||
s = [-parseInt(a.style.left, 10) || 0, -parseInt(a.style.top, 10) || 0]
|
||||
;(r.style.left = s[0] + 'px'),
|
||||
(r.style.top = s[1] + 'px'),
|
||||
p.setMapOffset(s),
|
||||
(t.__mapOffset = s),
|
||||
o.dispatchAction({ type: 'bmapRoam' })
|
||||
}
|
||||
}
|
||||
a.removeEventListener('moving', this._oldMoveHandler),
|
||||
a.removeEventListener('zoomend', this._oldZoomEndHandler),
|
||||
a.addEventListener('moving', s),
|
||||
a.addEventListener('zoomend', n),
|
||||
(this._oldMoveHandler = s),
|
||||
(this._oldZoomEndHandler = n)
|
||||
var m = t.get('roam')
|
||||
m && 'scale' !== m ? a.enableDragging() : a.disableDragging(),
|
||||
m && 'move' !== m
|
||||
? (a.enableScrollWheelZoom(), a.enableDoubleClickZoom(), a.enablePinchToZoom())
|
||||
: (a.disableScrollWheelZoom(), a.disableDoubleClickZoom(), a.disablePinchToZoom())
|
||||
var c = t.__mapStyle,
|
||||
d = t.get('mapStyle') || {},
|
||||
f = JSON.stringify(d)
|
||||
JSON.stringify(c) !== f &&
|
||||
(Object.keys(d).length && a.setMapStyle(d), (t.__mapStyle = JSON.parse(f))),
|
||||
(i = !1)
|
||||
},
|
||||
}),
|
||||
e.registerCoordinateSystem('bmap', o),
|
||||
e.registerAction(
|
||||
{ type: 'bmapRoam', event: 'bmapRoam', update: 'updateLayout' },
|
||||
function (t, e) {
|
||||
e.eachComponent('bmap', function (t) {
|
||||
var e = t.getBMap(),
|
||||
o = e.getCenter()
|
||||
t.setCenterAndZoom([o.lng, o.lat], e.getZoom())
|
||||
})
|
||||
},
|
||||
)
|
||||
t.version = '1.0.0'
|
||||
})
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
|
@ -6,127 +5,125 @@
|
|||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import './china.js'
|
||||
import './bmap.min.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
|
||||
//城市经纬度
|
||||
var geoCoordMap = {
|
||||
"北京": [116.46, 39.92],
|
||||
"成都": [104.06, 30.67],
|
||||
"杭州": [120.19, 30.26],
|
||||
"济南": [117, 36.65],
|
||||
"福州": [119.3, 26.08],
|
||||
"上海": [121.48, 31.22],
|
||||
"重庆": [106.54, 29.59],
|
||||
"深圳": [114.07, 22.62],
|
||||
"宁波": [121.56, 29.86],
|
||||
"南昌": [115.89, 28.68],
|
||||
"广州": [113.23, 23.16],
|
||||
"厦门": [118.1, 24.46],
|
||||
"太原": [112.53, 37.87],
|
||||
"哈尔滨": [126.63, 45.75],
|
||||
"西安": [108.95, 34.27],
|
||||
"沈阳": [123.38, 41.8],
|
||||
"大连": [121.62, 38.92],
|
||||
"海口": [110.35, 20.02],
|
||||
"长沙": [113, 28.21],
|
||||
"银川": [106.27, 38.47],
|
||||
"石家庄": [114.48, 38.03],
|
||||
"昆明": [102.73, 25.04],
|
||||
"武汉": [114.31, 30.52],
|
||||
"呼和浩特": [111.65, 40.82],
|
||||
"天津": [117.2, 39.13],
|
||||
"贵阳": [106.71, 26.57],
|
||||
"兰州": [103.73, 36.03],
|
||||
"青岛": [120.33, 36.07],
|
||||
"南京": [118.78, 32.04],
|
||||
"长春": [125.35, 43.88],
|
||||
"郑州": [113.65, 34.76],
|
||||
"西宁": [101.74, 36.56],
|
||||
"合肥": [117.27, 31.86],
|
||||
"南宁": [108.33, 22.84],
|
||||
"拉萨": [91.11, 29.97],
|
||||
"乌鲁木齐": [87.68, 43.77]
|
||||
};
|
||||
|
||||
北京: [116.46, 39.92],
|
||||
成都: [104.06, 30.67],
|
||||
杭州: [120.19, 30.26],
|
||||
济南: [117, 36.65],
|
||||
福州: [119.3, 26.08],
|
||||
上海: [121.48, 31.22],
|
||||
重庆: [106.54, 29.59],
|
||||
深圳: [114.07, 22.62],
|
||||
宁波: [121.56, 29.86],
|
||||
南昌: [115.89, 28.68],
|
||||
广州: [113.23, 23.16],
|
||||
厦门: [118.1, 24.46],
|
||||
太原: [112.53, 37.87],
|
||||
哈尔滨: [126.63, 45.75],
|
||||
西安: [108.95, 34.27],
|
||||
沈阳: [123.38, 41.8],
|
||||
大连: [121.62, 38.92],
|
||||
海口: [110.35, 20.02],
|
||||
长沙: [113, 28.21],
|
||||
银川: [106.27, 38.47],
|
||||
石家庄: [114.48, 38.03],
|
||||
昆明: [102.73, 25.04],
|
||||
武汉: [114.31, 30.52],
|
||||
呼和浩特: [111.65, 40.82],
|
||||
天津: [117.2, 39.13],
|
||||
贵阳: [106.71, 26.57],
|
||||
兰州: [103.73, 36.03],
|
||||
青岛: [120.33, 36.07],
|
||||
南京: [118.78, 32.04],
|
||||
长春: [125.35, 43.88],
|
||||
郑州: [113.65, 34.76],
|
||||
西宁: [101.74, 36.56],
|
||||
合肥: [117.27, 31.86],
|
||||
南宁: [108.33, 22.84],
|
||||
拉萨: [91.11, 29.97],
|
||||
乌鲁木齐: [87.68, 43.77],
|
||||
}
|
||||
|
||||
//数据部分
|
||||
var data = [
|
||||
{name:"北京",value:88.8},
|
||||
{name:"成都",value:88.7},
|
||||
{name:"厦门",value:88.01},
|
||||
{name:"杭州",value:87.9},
|
||||
{name:"济南",value:87.48},
|
||||
{name:"福州",value:87.47},
|
||||
{name:"上海",value:87.43},
|
||||
{name:"重庆",value:87.38},
|
||||
{name:"深圳",value:87.37},
|
||||
{name:"昆明",value:87.26},
|
||||
{name:"宁波",value:87.1},
|
||||
{name:"南昌",value:86.06},
|
||||
{name:"广州",value:85.89},
|
||||
{name:"太原",value:84.45},
|
||||
{name:"哈尔滨",value:83.96},
|
||||
{name:"西安",value:83.24},
|
||||
{name:"沈阳",value:82.96},
|
||||
{name:"大连",value:82.94},
|
||||
{name:"海口",value:82.88},
|
||||
{name:"长沙",value:82.85},
|
||||
{name:"银川",value:82.49},
|
||||
{name:"石家庄",value:82.24},
|
||||
{name:"武汉",value:81.68},
|
||||
{name:"呼和浩特",value:81.61},
|
||||
{name:"天津",value:80.99},
|
||||
{name:"贵阳",value:80.71},
|
||||
{name:"兰州",value:80.69},
|
||||
{name:"南京",value:80.65},
|
||||
{name:"青岛",value:80.61},
|
||||
{name:"长春",value:80.1},
|
||||
{name:"郑州",value:79.56},
|
||||
{name:"西宁",value:79.07},
|
||||
{name:"南宁",value:78.2},
|
||||
{name:"合肥",value:77.29},
|
||||
{name:"乌鲁木齐",value:76.91},
|
||||
{name:"拉萨",value:76.01}
|
||||
];
|
||||
{ name: '北京', value: 88.8 },
|
||||
{ name: '成都', value: 88.7 },
|
||||
{ name: '厦门', value: 88.01 },
|
||||
{ name: '杭州', value: 87.9 },
|
||||
{ name: '济南', value: 87.48 },
|
||||
{ name: '福州', value: 87.47 },
|
||||
{ name: '上海', value: 87.43 },
|
||||
{ name: '重庆', value: 87.38 },
|
||||
{ name: '深圳', value: 87.37 },
|
||||
{ name: '昆明', value: 87.26 },
|
||||
{ name: '宁波', value: 87.1 },
|
||||
{ name: '南昌', value: 86.06 },
|
||||
{ name: '广州', value: 85.89 },
|
||||
{ name: '太原', value: 84.45 },
|
||||
{ name: '哈尔滨', value: 83.96 },
|
||||
{ name: '西安', value: 83.24 },
|
||||
{ name: '沈阳', value: 82.96 },
|
||||
{ name: '大连', value: 82.94 },
|
||||
{ name: '海口', value: 82.88 },
|
||||
{ name: '长沙', value: 82.85 },
|
||||
{ name: '银川', value: 82.49 },
|
||||
{ name: '石家庄', value: 82.24 },
|
||||
{ name: '武汉', value: 81.68 },
|
||||
{ name: '呼和浩特', value: 81.61 },
|
||||
{ name: '天津', value: 80.99 },
|
||||
{ name: '贵阳', value: 80.71 },
|
||||
{ name: '兰州', value: 80.69 },
|
||||
{ name: '南京', value: 80.65 },
|
||||
{ name: '青岛', value: 80.61 },
|
||||
{ name: '长春', value: 80.1 },
|
||||
{ name: '郑州', value: 79.56 },
|
||||
{ name: '西宁', value: 79.07 },
|
||||
{ name: '南宁', value: 78.2 },
|
||||
{ name: '合肥', value: 77.29 },
|
||||
{ name: '乌鲁木齐', value: 76.91 },
|
||||
{ name: '拉萨', value: 76.01 },
|
||||
]
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
var res = []
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
var geoCoord = geoCoordMap[data[i].name]
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
value: geoCoord.concat(data[i].value),
|
||||
})
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const options = {
|
||||
toolbox: {
|
||||
|
|
@ -134,17 +131,17 @@ const options = {
|
|||
feature: {
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: true
|
||||
readOnly: true,
|
||||
},
|
||||
restore: {
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
top: 40,
|
||||
right:40
|
||||
right: 40,
|
||||
},
|
||||
title: {
|
||||
//text: '2020年全国大厅监测得分',
|
||||
|
|
@ -153,18 +150,18 @@ const options = {
|
|||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 30
|
||||
fontSize: 30,
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 20
|
||||
}
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
left: 'left',
|
||||
data: ['强', '中', '弱'],
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
backgroundColor: {
|
||||
type: 'linear',
|
||||
|
|
@ -172,12 +169,17 @@ const options = {
|
|||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0f2c70' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#091732' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0f2c70', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#091732', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
visualMap: {
|
||||
min: 75,
|
||||
|
|
@ -187,12 +189,12 @@ const options = {
|
|||
calculable: false,
|
||||
text: ['高', '低'],
|
||||
inRange: {
|
||||
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
|
||||
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'],
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 10
|
||||
}
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
|
|
@ -200,17 +202,17 @@ const options = {
|
|||
roam: true,
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#091632',
|
||||
borderColor: '#1773c3',
|
||||
shadowColor: '#1773c3',
|
||||
shadowBlur: 20
|
||||
}
|
||||
}
|
||||
shadowBlur: 20,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -226,20 +228,20 @@ const options = {
|
|||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#3B5077',
|
||||
borderWidth: 1.5
|
||||
borderWidth: 1.5,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#0f2c70'
|
||||
}
|
||||
areaColor: '#0f2c70',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -248,7 +250,7 @@ const options = {
|
|||
coordinateSystem: 'geo',
|
||||
data: convertData(data),
|
||||
symbolSize: function (val) {
|
||||
return val[2]/8;
|
||||
return val[2] / 8
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
|
|
@ -257,23 +259,23 @@ const options = {
|
|||
textStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: 'bolder',
|
||||
color:'#ffffff'
|
||||
color: '#ffffff',
|
||||
},
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#ddb926'
|
||||
color: '#ddb926',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -284,6 +286,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,24 +11,24 @@ import logo from '@/assets/logo.png'
|
|||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
|
|
@ -49,7 +49,7 @@ var geoCoordMap = {
|
|||
四川: [113.0823, 28.2568],
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
海南: [110.3893, 19.8516]
|
||||
海南: [110.3893, 19.8516],
|
||||
}
|
||||
|
||||
var value = {
|
||||
|
|
@ -68,8 +68,7 @@ var value = {
|
|||
云南: 10000,
|
||||
广东: 10000,
|
||||
海南: 10000,
|
||||
西藏: 10000
|
||||
|
||||
西藏: 10000,
|
||||
}
|
||||
var colors = '#f9b207'
|
||||
|
||||
|
|
@ -85,7 +84,7 @@ for (var key in geoCoordMap) {
|
|||
year: '陕西',
|
||||
name: key,
|
||||
value: value[key] / 100,
|
||||
value1: value[key] / 100
|
||||
value1: value[key] / 100,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +104,7 @@ var convertData = function (data) {
|
|||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
value: geoCoord.concat(data[i].value),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -120,12 +119,15 @@ var convertToLineData = function (data, gps) {
|
|||
var fromCoord = gps // 郑州
|
||||
// var toCoord = geoGps[Math.random()*3];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
res.push([
|
||||
{
|
||||
coord: fromCoord,
|
||||
value: dataItem.value
|
||||
}, {
|
||||
coord: toCoord
|
||||
}])
|
||||
value: dataItem.value,
|
||||
},
|
||||
{
|
||||
coord: toCoord,
|
||||
},
|
||||
])
|
||||
}
|
||||
}
|
||||
return res
|
||||
|
|
@ -136,7 +138,7 @@ const options = {
|
|||
trigger: 'item',
|
||||
formatter(val) {
|
||||
// console.log('val==========',val)
|
||||
}
|
||||
},
|
||||
},
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
|
|
@ -147,8 +149,8 @@ const options = {
|
|||
center: [101.4038, 36.8207],
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -159,29 +161,31 @@ const options = {
|
|||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
}, {
|
||||
color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
||||
// 地图？
|
||||
{
|
||||
type: 'map',
|
||||
|
|
@ -191,59 +195,63 @@ const options = {
|
|||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF'
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
areaColor: '#2B91B7',
|
||||
},
|
||||
animation: false
|
||||
},
|
||||
animation: false,
|
||||
},
|
||||
// 地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(mapData.sort(function (a, b) {
|
||||
data: convertData(
|
||||
mapData
|
||||
.sort(function (a, b) {
|
||||
return b.value - a.value
|
||||
}).slice(0, 20)),
|
||||
})
|
||||
.slice(0, 20),
|
||||
),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
brushType: 'stroke',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
shadowBlur: 10,
|
||||
shadowColor: colors
|
||||
}
|
||||
shadowColor: colors,
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
zlevel: 1,
|
||||
},
|
||||
// 地图线的动画效果
|
||||
{
|
||||
|
|
@ -254,17 +262,17 @@ const options = {
|
|||
period: 4, // 箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', // 箭头图标
|
||||
symbolSize: 3 // 图标大小
|
||||
symbolSize: 3, // 图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
width: 0.1, // 尾迹线条宽度
|
||||
opacity: 0.5, // 尾迹线条透明度
|
||||
curveness: 0.3 // 尾迹线条曲直度
|
||||
}
|
||||
curveness: 0.3, // 尾迹线条曲直度
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap),
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
|
|
@ -274,7 +282,9 @@ const options = {
|
|||
symbol: `image://${logo}`,
|
||||
data: cityIconData,
|
||||
rippleEffect: {
|
||||
period: 4, brushType: 'stroke', scale: 4
|
||||
period: 4,
|
||||
brushType: 'stroke',
|
||||
scale: 4,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
|
@ -282,7 +292,7 @@ const options = {
|
|||
borderColor: 'black',
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
textStyle: {
|
||||
fontSize:20
|
||||
fontSize: 20,
|
||||
},
|
||||
formatter(val) {
|
||||
console.log('val=======', val)
|
||||
|
|
@ -297,10 +307,10 @@ const options = {
|
|||
<!-- </div>-->
|
||||
</div>`
|
||||
return tipHtml
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
legend: {
|
||||
|
|
@ -38,12 +38,12 @@ const options = {
|
|||
'60岁全程接种量',
|
||||
'80岁任务数',
|
||||
'80岁全程接种量',
|
||||
'完成率'
|
||||
]
|
||||
'完成率',
|
||||
],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7']
|
||||
data: ['街道1', '街道2', '街道3', '街道4', '街道5', '街道6', '街道7'],
|
||||
},
|
||||
yAxis: [
|
||||
{ type: 'value' },
|
||||
|
|
@ -54,7 +54,7 @@ const options = {
|
|||
// max: 100,
|
||||
nameTextStyle: {
|
||||
color: '#ccc',
|
||||
padding: [0, 0, 10, -30]
|
||||
padding: [0, 0, 10, -30],
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
|
|
@ -63,16 +63,16 @@ const options = {
|
|||
type: 'dashed',
|
||||
width: 1,
|
||||
// 使用深浅的间隔色
|
||||
color: ['#566471', '#566471']
|
||||
}
|
||||
color: ['#566471', '#566471'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
|
|
@ -81,56 +81,60 @@ const options = {
|
|||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
type: 'shadow',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
align: 'left',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {//x坐标轴轴线
|
||||
axisLine: {
|
||||
//x坐标轴轴线
|
||||
show: true,
|
||||
lineStyle: {//x坐标轴轴线样式
|
||||
lineStyle: {
|
||||
//x坐标轴轴线样式
|
||||
color: '#000', //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
let str = params[0].name + '<br />';
|
||||
console.log(str);
|
||||
console.log(params)
|
||||
let str = params[0].name + '<br />'
|
||||
console.log(str)
|
||||
params.forEach((item) => {
|
||||
console.log(item.seriesName);
|
||||
console.log(item.seriesName)
|
||||
if (item.value) {
|
||||
if (item.seriesName.indexOf('岁全程接种量') != -1) {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${
|
||||
item.color
|
||||
}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}人 <br/>
|
||||
全程完成率
|
||||
: ${item.value / 100}%
|
||||
<br/><br/>`;
|
||||
<br/><br/>`
|
||||
} else if (item.seriesName.indexOf('岁任务数') != -1) {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}人
|
||||
<br/>`;
|
||||
<br/>`
|
||||
} else {
|
||||
str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
|
||||
"></span>
|
||||
${item.seriesName}
|
||||
:
|
||||
${item.value}%
|
||||
<br/>`;
|
||||
<br/>`
|
||||
}
|
||||
}
|
||||
});
|
||||
return str;
|
||||
}
|
||||
})
|
||||
return str
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
|
|
@ -138,37 +142,37 @@ const options = {
|
|||
name: '3-11岁任务数',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'BB',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '3-11岁全程接种量',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'BB',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '60岁任务数',
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
stack: 'AA',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '60岁全程接种量',
|
||||
data: [880, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'AA',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '80岁任务数',
|
||||
data: [660, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'Ad',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '80岁全程接种量',
|
||||
data: [880, 30, 124, 118, 35, 47, 160],
|
||||
stack: 'Ad',
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
|
|
@ -180,25 +184,25 @@ const options = {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
type: 'dotted',
|
||||
},
|
||||
data: [{ type: 'average', name: 'Avg' + '%' }]
|
||||
},
|
||||
},
|
||||
data: [{ type: 'average', name: 'Avg' + '%' }],
|
||||
},
|
||||
// symbol: 'none',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
type: 'solid' //'dotted'虚线 'solid'实线
|
||||
type: 'solid', //'dotted'虚线 'solid'实线
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -209,6 +213,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
backgroundColor: '#031d33',
|
||||
|
|
@ -37,8 +37,7 @@ const options = {
|
|||
fontSize: 16,
|
||||
color: 'rgba(101, 213, 255, 1)',
|
||||
},
|
||||
icon:
|
||||
'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
|
||||
icon: 'path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z',
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 8, // 设置高度、
|
||||
itemGap: 12, // 设置间距
|
||||
|
|
@ -162,34 +161,34 @@ const options = {
|
|||
{
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
color: '#65d5ff'
|
||||
color: '#65d5ff',
|
||||
},
|
||||
min: 0,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#233653'
|
||||
}
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#233653'
|
||||
}
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#78bdf5'
|
||||
color: '#78bdf5',
|
||||
},
|
||||
formatter: function (value) {
|
||||
return value * 100 + '%'
|
||||
}
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
|
@ -308,21 +307,25 @@ const options = {
|
|||
symbol: 'none',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 227, 168, 0.3)'
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: 'rgba(255, 227, 168, 1)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255, 227, 168, 0.3)'
|
||||
}]),
|
||||
shadowColor: 'rgba(255, 120, 0,1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
color: 'rgba(255, 227, 168, 0.3)',
|
||||
},
|
||||
yAxisIndex: 1
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(255, 227, 168, 1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 227, 168, 0.3)',
|
||||
},
|
||||
]),
|
||||
shadowColor: 'rgba(255, 120, 0,1)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
{
|
||||
name: '变化占比',
|
||||
|
|
@ -332,21 +335,21 @@ const options = {
|
|||
rippleEffect: {
|
||||
period: 5,
|
||||
scale: 3,
|
||||
brushType: 'stroke'
|
||||
brushType: 'stroke',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(217,247,249,1)',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333'
|
||||
}
|
||||
shadowColor: '#333',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -357,6 +360,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,31 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -35,7 +35,7 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
backgroundColor: '#0F224C', //背景色
|
||||
series: [
|
||||
|
|
@ -44,7 +44,7 @@ const options = {
|
|||
radius: '80%', //显示比例
|
||||
center: ['50%', '50%'], //中心点
|
||||
amplitude: 20, //水波振幅
|
||||
data: [0.5,.5,.5], // data个数代表波浪数
|
||||
data: [0.5, 0.5, 0.5], // data个数代表波浪数
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
|
|
@ -89,8 +89,8 @@ const options = {
|
|||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -101,6 +101,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,59 +2,59 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
|
||||
const indicator = [
|
||||
{
|
||||
text: '文明村',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '卫生村',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '森林村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '全面小康',
|
||||
min: 0,
|
||||
max: 100
|
||||
max: 100,
|
||||
},
|
||||
{
|
||||
text: '景区村庄',
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
max: 100,
|
||||
},
|
||||
]
|
||||
const Data = [80, 61, 70, 86, 77]
|
||||
function setData() {
|
||||
|
|
@ -66,11 +66,11 @@ function setData() {
|
|||
lineStyle: {
|
||||
color: '#4BFFFC',
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
shadowBlur: 5,
|
||||
},
|
||||
shadowColor: '#4BFFFC',
|
||||
shadowBlur: 5
|
||||
}
|
||||
shadowBlur: 5,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
|
|
@ -83,19 +83,19 @@ function setData() {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#4BFFFC'
|
||||
color: '#4BFFFC',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
opacity: 0.8, // 区域透明度
|
||||
},
|
||||
},
|
||||
},
|
||||
opacity: 0.8 // 区域透明度
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -109,23 +109,23 @@ function setgauge(i) {
|
|||
startAngle: 90 + 72 * i + 18, //开始刻度的角度
|
||||
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#66ccff',
|
||||
width: 1
|
||||
width: 1,
|
||||
},
|
||||
length: 6,
|
||||
splitNumber: 1
|
||||
splitNumber: 1,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
}
|
||||
function setSpot() {
|
||||
|
|
@ -139,9 +139,9 @@ function setSpot() {
|
|||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
shadowColor: color[i],
|
||||
shadowBlur: 8
|
||||
}
|
||||
}
|
||||
shadowBlur: 8,
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
return scatterData
|
||||
|
|
@ -151,7 +151,7 @@ const options = {
|
|||
backgroundColor: '#0E1327',
|
||||
polar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '60%'
|
||||
radius: '60%',
|
||||
},
|
||||
radar: {
|
||||
shape: 'circle',
|
||||
|
|
@ -161,7 +161,7 @@ const options = {
|
|||
axisName: {
|
||||
color: '#b7e9fd',
|
||||
fontSize: 13,
|
||||
padding: -20
|
||||
padding: -20,
|
||||
},
|
||||
nameGap: 45,
|
||||
splitNumber: 4,
|
||||
|
|
@ -170,21 +170,21 @@ const options = {
|
|||
show: true,
|
||||
areaStyle: {
|
||||
// 分隔区域的样式设置。
|
||||
color: ['rgba(27, 50, 66, 0.4)']
|
||||
}
|
||||
color: ['rgba(27, 50, 66, 0.4)'],
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
color: '#5aa3d0',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
|
||||
width: 2 // 分隔线线宽
|
||||
}
|
||||
}
|
||||
width: 2, // 分隔线线宽
|
||||
},
|
||||
},
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'category',
|
||||
|
|
@ -193,40 +193,40 @@ const options = {
|
|||
boundaryGap: false,
|
||||
clockwise: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25,
|
||||
splitLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
//指向外圈文本的分隔线样式
|
||||
lineStyle: {
|
||||
color: '#5aa3d0'
|
||||
}
|
||||
color: '#5aa3d0',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#5aa3d0',
|
||||
align: 'left',
|
||||
margin: -5
|
||||
}
|
||||
margin: -5,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
setgauge(0),
|
||||
|
|
@ -238,22 +238,22 @@ const options = {
|
|||
type: 'radar',
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: '#66ffff'
|
||||
color: '#66ffff',
|
||||
},
|
||||
areaStyle: {
|
||||
color: 'rgba(102, 255, 255, 0.31)'
|
||||
color: 'rgba(102, 255, 255, 0.31)',
|
||||
},
|
||||
data: setData()
|
||||
data: setData(),
|
||||
},
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'polar',
|
||||
symbolSize: 20,
|
||||
data: setSpot()
|
||||
data: setSpot(),
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -262,10 +262,8 @@ const initChart =()=> {
|
|||
onMounted(() => {
|
||||
chart = initChart()
|
||||
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,33 +2,33 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
|
||||
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
|
||||
let echartData = [
|
||||
{
|
||||
name: '设备1',
|
||||
|
|
@ -46,11 +46,11 @@ let echartData = [
|
|||
name: '设备4',
|
||||
value: '1420',
|
||||
},
|
||||
];
|
||||
]
|
||||
let formatNumber = function (num) {
|
||||
let reg = /(?=(\B)(\d{3})+$)/g;
|
||||
return num.toString().replace(reg, ',');
|
||||
};
|
||||
let reg = /(?=(\B)(\d{3})+$)/g
|
||||
return num.toString().replace(reg, ',')
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#364686',
|
||||
|
|
@ -123,7 +123,9 @@ const options = {
|
|||
label: {
|
||||
normal: {
|
||||
formatter: (params) => {
|
||||
return '{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}';
|
||||
return (
|
||||
'{icon|●}{name|' + params.name + '}\n{value|' + formatNumber(params.value) + '}'
|
||||
)
|
||||
},
|
||||
padding: [0, -70, 30, -70],
|
||||
rich: {
|
||||
|
|
@ -183,8 +185,8 @@ const options = {
|
|||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -195,6 +197,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,34 +2,33 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const options = {
|
||||
title: [
|
||||
{
|
||||
|
|
@ -132,8 +131,8 @@ const options = {
|
|||
data: [100],
|
||||
},
|
||||
],
|
||||
};
|
||||
let chart:EChartsType;
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -144,6 +143,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,72 @@
|
|||
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
var data = [],data2=[];
|
||||
var data = [],
|
||||
data2 = []
|
||||
var trafficWay = [
|
||||
{
|
||||
name: '病假',
|
||||
value: 20
|
||||
},{
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: '事假',
|
||||
value: 1
|
||||
},{
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: '婚假',
|
||||
value: 30
|
||||
},{
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
name: '丧假',
|
||||
value: 40
|
||||
},{
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
name: '年休假',
|
||||
value: 40
|
||||
}];
|
||||
var color=['#2A8BFD','#BAFF7F','#00FAC1','#00CAFF','#FDE056','#4ED33C','#FF8A26','#FF5252','#9689FF','#CB00FF']
|
||||
value: 40,
|
||||
},
|
||||
]
|
||||
var color = [
|
||||
'#2A8BFD',
|
||||
'#BAFF7F',
|
||||
'#00FAC1',
|
||||
'#00CAFF',
|
||||
'#FDE056',
|
||||
'#4ED33C',
|
||||
'#FF8A26',
|
||||
'#FF5252',
|
||||
'#9689FF',
|
||||
'#CB00FF',
|
||||
]
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push({
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
|
|
@ -58,28 +75,30 @@ for (var i = 0; i < trafficWay.length; i++) {
|
|||
shadowBlur: 20,
|
||||
borderRadius: 20,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
shadowColor: color[i],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
name: '',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
data2.push({
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
data2.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
},
|
||||
|
|
@ -89,26 +108,25 @@ for (var i = 0; i < trafficWay.length; i++) {
|
|||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0,
|
||||
opacity:0.2
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
let angle = 0;//角度，用来做简单的动画效果的
|
||||
let angle = 0 //角度，用来做简单的动画效果的
|
||||
|
||||
const option = {
|
||||
backgroundColor:"#061740",
|
||||
backgroundColor: '#061740',
|
||||
color: color,
|
||||
legend: {
|
||||
right: '10%',
|
||||
|
|
@ -118,204 +136,212 @@ const option = {
|
|||
itemHeight: 15,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{//外线1
|
||||
name: "ring5",
|
||||
{
|
||||
//外线1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (0+angle) * Math.PI / 180,
|
||||
endAngle: (90+angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((0 + angle) * Math.PI) / 180,
|
||||
endAngle: ((90 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: '#4EE9E6',
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//内线1
|
||||
name: "ring5",
|
||||
{
|
||||
//内线1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
||||
startAngle: (180+angle) * Math.PI / 180,
|
||||
endAngle: (270+angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
||||
startAngle: ((180 + angle) * Math.PI) / 180,
|
||||
endAngle: ((270 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
{
|
||||
//外线2
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (270+-angle) * Math.PI / 180,
|
||||
endAngle: (40+-angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((270 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((40 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//外线2
|
||||
name: "ring5",
|
||||
{
|
||||
//外线2
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: 'arc',
|
||||
shape: {
|
||||
cx: api.getWidth() / 3,
|
||||
cy: api.getHeight() / 2,
|
||||
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
||||
startAngle: (90+-angle) * Math.PI / 180,
|
||||
endAngle: (220+-angle) * Math.PI / 180
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
||||
startAngle: ((90 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((220 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#4EE9E6",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5
|
||||
stroke: '#4EE9E6',
|
||||
fill: 'transparent',
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点1
|
||||
name: "ring5",
|
||||
{
|
||||
//绿点1
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (90+-angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 90 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点2
|
||||
name: "ring5", //绿点
|
||||
{
|
||||
//绿点2
|
||||
name: 'ring5', //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
||||
let point = getCirlPoint(x0, y0, r, (270+-angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
||||
let point = getCirlPoint(x0, y0, r, 270 + -angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点3
|
||||
name: "ring5",
|
||||
{
|
||||
//绿点3
|
||||
name: 'ring5',
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (90+angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
|
||||
let point = getCirlPoint(x0, y0, r, 90 + angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{//绿点4
|
||||
name: "ring5", //绿点
|
||||
{
|
||||
//绿点4
|
||||
name: 'ring5', //绿点
|
||||
type: 'custom',
|
||||
coordinateSystem: "none",
|
||||
coordinateSystem: 'none',
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 3;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6;
|
||||
let point = getCirlPoint(x0, y0, r, (270+angle))
|
||||
let x0 = api.getWidth() / 3
|
||||
let y0 = api.getHeight() / 2
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6
|
||||
let point = getCirlPoint(x0, y0, r, 270 + angle)
|
||||
return {
|
||||
type: 'circle',
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#66FFFF",//粉
|
||||
fill: "#66FFFF"
|
||||
stroke: '#66FFFF', //粉
|
||||
fill: '#66FFFF',
|
||||
},
|
||||
silent: true
|
||||
};
|
||||
silent: true,
|
||||
}
|
||||
},
|
||||
data: [0]
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
|
|
@ -324,19 +350,19 @@ const option = {
|
|||
radius: ['98%', '95%'],
|
||||
hoverAnimation: false,
|
||||
center: ['33.33%', '50%'],
|
||||
top:"center",
|
||||
top: 'center',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
data:data
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
top:"center",
|
||||
top: 'center',
|
||||
startAngle: 90,
|
||||
clockwise: false,
|
||||
center: ['33.33%', '50%'],
|
||||
|
|
@ -344,16 +370,16 @@ const option = {
|
|||
hoverAnimation: false,
|
||||
radius: ['94%', '55%'],
|
||||
itemStyle: {
|
||||
opacity:0.15
|
||||
opacity: 0.15,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
position: 'center',
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
data:data2
|
||||
data: data2,
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
|
|
@ -362,30 +388,29 @@ const option = {
|
|||
center: ['33.33%', '50%'],
|
||||
radius: ['39%', '38%'],
|
||||
hoverAnimation: false,
|
||||
top:"center",
|
||||
top: 'center',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show:false
|
||||
}
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
data:data
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
}
|
||||
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||||
function getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
||||
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
||||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
||||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
||||
return {
|
||||
x: x1,
|
||||
y: y1
|
||||
y: y1,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
draw(chart)
|
||||
|
|
@ -403,11 +428,10 @@ onMounted(()=>{
|
|||
setInterval(function () {
|
||||
//用setInterval做动画感觉有问题
|
||||
draw(chart)
|
||||
}, 100);
|
||||
}, 100)
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,230 +2,229 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
let datalist = [
|
||||
{
|
||||
name: "公共平台"
|
||||
name: '公共平台',
|
||||
},
|
||||
{
|
||||
name: "系统0000"
|
||||
name: '系统0000',
|
||||
},
|
||||
{
|
||||
name: "系统0011"
|
||||
name: '系统0011',
|
||||
},
|
||||
{
|
||||
name: "系统0022"
|
||||
name: '系统0022',
|
||||
},
|
||||
{
|
||||
name: "系统0033"
|
||||
name: '系统0033',
|
||||
},
|
||||
{
|
||||
name: "系统0044"
|
||||
name: '系统0044',
|
||||
},
|
||||
{
|
||||
name: "系统0055"
|
||||
},{
|
||||
name: "系统11"
|
||||
name: '系统0055',
|
||||
},
|
||||
{
|
||||
name: "系统22"
|
||||
name: '系统11',
|
||||
},
|
||||
{
|
||||
name: "系统33"
|
||||
name: '系统22',
|
||||
},
|
||||
{
|
||||
name: "系统44"
|
||||
name: '系统33',
|
||||
},
|
||||
{
|
||||
name: "系统55"
|
||||
name: '系统44',
|
||||
},
|
||||
{
|
||||
name: "系统66"
|
||||
name: '系统55',
|
||||
},
|
||||
{
|
||||
name: "系统77"
|
||||
name: '系统66',
|
||||
},
|
||||
{
|
||||
name: "系统88"
|
||||
name: '系统77',
|
||||
},
|
||||
{
|
||||
name: "系统99"
|
||||
}
|
||||
];
|
||||
name: '系统88',
|
||||
},
|
||||
{
|
||||
name: '系统99',
|
||||
},
|
||||
]
|
||||
let linksData = [
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0000",
|
||||
value: 1044305
|
||||
source: '公共平台',
|
||||
target: '系统0000',
|
||||
value: 1044305,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0011",
|
||||
value: 651527
|
||||
source: '公共平台',
|
||||
target: '系统0011',
|
||||
value: 651527,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0022",
|
||||
value: 651527
|
||||
source: '公共平台',
|
||||
target: '系统0022',
|
||||
value: 651527,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0033",
|
||||
value: 486710
|
||||
source: '公共平台',
|
||||
target: '系统0033',
|
||||
value: 486710,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0044",
|
||||
value: 212670
|
||||
source: '公共平台',
|
||||
target: '系统0044',
|
||||
value: 212670,
|
||||
},
|
||||
{
|
||||
source: "公共平台",
|
||||
target: "系统0055",
|
||||
value: 210400
|
||||
},{
|
||||
source: "系统0011",
|
||||
target: "系统11",
|
||||
value: 645246
|
||||
source: '公共平台',
|
||||
target: '系统0055',
|
||||
value: 210400,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统22",
|
||||
value: 513275
|
||||
source: '系统0011',
|
||||
target: '系统11',
|
||||
value: 645246,
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统33",
|
||||
value: 282986
|
||||
source: '系统0022',
|
||||
target: '系统22',
|
||||
value: 513275,
|
||||
},
|
||||
{
|
||||
source: "系统0011",
|
||||
target: "系统44",
|
||||
value: 118655
|
||||
source: '系统0011',
|
||||
target: '系统33',
|
||||
value: 282986,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统55",
|
||||
value: 105989
|
||||
source: '系统0011',
|
||||
target: '系统44',
|
||||
value: 118655,
|
||||
},
|
||||
{
|
||||
source: "系统0022",
|
||||
target: "系统66",
|
||||
value: 95100
|
||||
source: '系统0022',
|
||||
target: '系统55',
|
||||
value: 105989,
|
||||
},
|
||||
{
|
||||
source: "系统0033",
|
||||
target: "系统77",
|
||||
value: 87796
|
||||
source: '系统0022',
|
||||
target: '系统66',
|
||||
value: 95100,
|
||||
},
|
||||
{
|
||||
source: "系统0044",
|
||||
target: "系统88",
|
||||
value: 47658
|
||||
source: '系统0033',
|
||||
target: '系统77',
|
||||
value: 87796,
|
||||
},
|
||||
{
|
||||
source: "系统0055",
|
||||
target: "系统99",
|
||||
value: 243660
|
||||
source: '系统0044',
|
||||
target: '系统88',
|
||||
value: 47658,
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
{
|
||||
source: '系统0055',
|
||||
target: '系统99',
|
||||
value: 243660,
|
||||
},
|
||||
]
|
||||
let Color = [
|
||||
"#61FEFF",
|
||||
"#937FE6",
|
||||
"#2B56D3",
|
||||
"#87E7AA",
|
||||
"#937FE6",
|
||||
"#FF9B97",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
]; let Color1 = [
|
||||
"#04E0F3",
|
||||
"#682EFC",
|
||||
"#35A7FE",
|
||||
"#0DC09F",
|
||||
"#682EFC",
|
||||
"#ED6663",
|
||||
"#8f23f5",
|
||||
"#0576ea",
|
||||
"#2cb8cf",
|
||||
"#8A7EE0",
|
||||
"#2cb8cf",
|
||||
"#4e70f0",
|
||||
"#1fa3de",
|
||||
"#bbc951",
|
||||
"#FFC14B",
|
||||
"#b785a6",
|
||||
|
||||
];
|
||||
'#61FEFF',
|
||||
'#937FE6',
|
||||
'#2B56D3',
|
||||
'#87E7AA',
|
||||
'#937FE6',
|
||||
'#FF9B97',
|
||||
'#8f23f5',
|
||||
'#0576ea',
|
||||
'#2cb8cf',
|
||||
'#8A7EE0',
|
||||
'#2cb8cf',
|
||||
'#4e70f0',
|
||||
'#1fa3de',
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
]
|
||||
let Color1 = [
|
||||
'#04E0F3',
|
||||
'#682EFC',
|
||||
'#35A7FE',
|
||||
'#0DC09F',
|
||||
'#682EFC',
|
||||
'#ED6663',
|
||||
'#8f23f5',
|
||||
'#0576ea',
|
||||
'#2cb8cf',
|
||||
'#8A7EE0',
|
||||
'#2cb8cf',
|
||||
'#4e70f0',
|
||||
'#1fa3de',
|
||||
'#bbc951',
|
||||
'#FFC14B',
|
||||
'#b785a6',
|
||||
]
|
||||
let sourceLabel = [
|
||||
"right",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left",
|
||||
"left"
|
||||
];
|
||||
let itemStyleColor = [];
|
||||
let labelSource = [];
|
||||
'right',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
'left',
|
||||
]
|
||||
let itemStyleColor = []
|
||||
let labelSource = []
|
||||
for (let i = 0; i < datalist.length; i++) {
|
||||
datalist[i].label = {
|
||||
normal: {
|
||||
position: sourceLabel[i]
|
||||
position: sourceLabel[i],
|
||||
},
|
||||
}
|
||||
};
|
||||
labelSource.push(sourceLabel[i]);
|
||||
labelSource.push(sourceLabel[i])
|
||||
}
|
||||
for (let d = 0; d < datalist.length; d++) {
|
||||
datalist[d].itemStyle = {
|
||||
normal: {
|
||||
// color: Color[d]
|
||||
color: {
|
||||
type: "linear",
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
|
|
@ -242,57 +241,59 @@ for (let d = 0; d < datalist.length; d++) {
|
|||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
itemStyleColor.push(datalist[d]);
|
||||
itemStyleColor.push(datalist[d])
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: "#031d7a",
|
||||
backgroundColor: '#031d7a',
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
triggerOn: "mousemove",
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove',
|
||||
formatter: function (params) {
|
||||
if (params.name == "公共平台") {
|
||||
return " 公共平台 "
|
||||
if (params.name == '公共平台') {
|
||||
return ' 公共平台 '
|
||||
} else {
|
||||
let value = params.data.value;
|
||||
if (!value && value !== 0) return 0;
|
||||
let str = value.toString();
|
||||
let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
|
||||
if (params.data.source == "公共平台") {
|
||||
return params.data.target + " : " + str.replace(reg, "$1,");
|
||||
let value = params.data.value
|
||||
if (!value && value !== 0) return 0
|
||||
let str = value.toString()
|
||||
let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
|
||||
if (params.data.source == '公共平台') {
|
||||
return params.data.target + ' : ' + str.replace(reg, '$1,')
|
||||
} else {
|
||||
return params.data.source + " : " + str.replace(reg, "$1,");
|
||||
}
|
||||
return params.data.source + ' : ' + str.replace(reg, '$1,')
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "4%",
|
||||
bottom: "12%",
|
||||
left: "20",
|
||||
right: "20",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
top: '4%',
|
||||
bottom: '12%',
|
||||
left: '20',
|
||||
right: '20',
|
||||
nodeGap: 15,
|
||||
nodeWidth: 25,
|
||||
focusNodeAdjacency: "allEdges",
|
||||
focusNodeAdjacency: 'allEdges',
|
||||
data: itemStyleColor,
|
||||
links: linksData,
|
||||
label: {
|
||||
normal: {
|
||||
color: "#fff",
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
formatter: function (params) {
|
||||
if (params.data.name == '公共平台') {
|
||||
let strs = params.data.name.split(''); //字符串数组
|
||||
let strs = params.data.name.split('') //字符串数组
|
||||
let str = ''
|
||||
for (let i = 0, s; s = strs[i++];) { //遍历字符串数组
|
||||
str += s;
|
||||
if (!(i % 1)) str += '\n'; //按需要求余
|
||||
for (let i = 0, s; (s = strs[i++]); ) {
|
||||
//遍历字符串数组
|
||||
str += s
|
||||
if (!(i % 1)) str += '\n' //按需要求余
|
||||
}
|
||||
return "{white|" + str + "}"
|
||||
return '{white|' + str + '}'
|
||||
} else {
|
||||
return params.data.name
|
||||
}
|
||||
|
|
@ -301,27 +302,28 @@ const options = {
|
|||
white: {
|
||||
fontSize: 16,
|
||||
lineHeight: 30,
|
||||
padding: [0, 0, 0, -26]
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: [0, 0, 0, -26],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0.4,
|
||||
color: "source",
|
||||
curveness: 0.5
|
||||
}
|
||||
color: 'source',
|
||||
curveness: 0.5,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
borderColor: "transparent"
|
||||
borderColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -332,6 +334,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -34,23 +34,23 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
|
||||
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -61,6 +61,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -34,10 +34,10 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
|
||||
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
|
|
@ -47,12 +47,12 @@ const options = {
|
|||
[20, 34, 10, 38],
|
||||
[40, 35, 30, 50],
|
||||
[31, 38, 33, 44],
|
||||
[38, 15, 5, 42]
|
||||
]
|
||||
[38, 15, 5, 42],
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -63,6 +63,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -34,22 +34,22 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -67,35 +67,35 @@ const options = {
|
|||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
position: 'inside',
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
{ value: 100, name: 'Show' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -106,6 +106,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,54 +2,53 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
|
||||
tooltip: {
|
||||
formatter: '{a} <br/>{b} : {c}%'
|
||||
formatter: '{a} <br/>{b} : {c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Pressure',
|
||||
type: 'gauge',
|
||||
detail: {
|
||||
formatter: '{value}'
|
||||
formatter: '{value}',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 50,
|
||||
name: 'SCORE'
|
||||
name: 'SCORE',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -60,6 +59,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,59 +2,59 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
|
||||
const axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun']
|
||||
const data = axisData.map(function (item, i) {
|
||||
return Math.round(Math.random() * 1000 * (i + 1));
|
||||
});
|
||||
return Math.round(Math.random() * 1000 * (i + 1))
|
||||
})
|
||||
const links = data.map(function (item, i) {
|
||||
return {
|
||||
source: i,
|
||||
target: i + 1
|
||||
};
|
||||
});
|
||||
links.pop();
|
||||
target: i + 1,
|
||||
}
|
||||
})
|
||||
links.pop()
|
||||
const options = {
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: axisData
|
||||
data: axisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -63,19 +63,19 @@ const options = {
|
|||
coordinateSystem: 'cartesian2d',
|
||||
symbolSize: 40,
|
||||
label: {
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
data: data,
|
||||
links: links,
|
||||
lineStyle: {
|
||||
color: '#2f4554'
|
||||
color: '#2f4554',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -86,6 +86,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,32 +10,32 @@ const chartsRef = ref<HTMLElement|null>()
|
|||
const props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
xAxisData: {
|
||||
type: Array,
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => {},
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260]
|
||||
default: () => [150, 230, 224, 218, 135, 147, 260],
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -47,18 +47,18 @@ const options = {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xAxisData
|
||||
data: props.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: props.seriesData,
|
||||
type: 'line'
|
||||
}
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
...props.config
|
||||
...props.config,
|
||||
}
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
|
|
@ -74,6 +74,4 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -2,45 +2,43 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
let category = [];
|
||||
let dottedBase = +new Date();
|
||||
let lineData = [];
|
||||
let barData = [];
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
let category = []
|
||||
let dottedBase = +new Date()
|
||||
let lineData = []
|
||||
let barData = []
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let date = new Date((dottedBase += 3600 * 24 * 1000));
|
||||
category.push(
|
||||
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
|
||||
);
|
||||
let b = Math.random() * 200;
|
||||
let d = Math.random() * 200;
|
||||
barData.push(b);
|
||||
lineData.push(d + b);
|
||||
let date = new Date((dottedBase += 3600 * 24 * 1000))
|
||||
category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
|
||||
let b = Math.random() * 200
|
||||
let d = Math.random() * 200
|
||||
barData.push(b)
|
||||
lineData.push(d + b)
|
||||
}
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -48,36 +46,36 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
backgroundColor: '#0f375f',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['line', 'bar'],
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
}
|
||||
color: '#ccc',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -87,7 +85,7 @@ const options = {
|
|||
showAllSymbol: true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 15,
|
||||
data: lineData
|
||||
data: lineData,
|
||||
},
|
||||
{
|
||||
name: 'bar',
|
||||
|
|
@ -97,10 +95,10 @@ const options = {
|
|||
borderRadius: 5,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#14c8d4' },
|
||||
{ offset: 1, color: '#43eec6' }
|
||||
])
|
||||
{ offset: 1, color: '#43eec6' },
|
||||
]),
|
||||
},
|
||||
data: barData
|
||||
data: barData,
|
||||
},
|
||||
{
|
||||
name: 'line',
|
||||
|
|
@ -111,28 +109,28 @@ const options = {
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(20,200,212,0.5)' },
|
||||
{ offset: 0.2, color: 'rgba(20,200,212,0.2)' },
|
||||
{ offset: 1, color: 'rgba(20,200,212,0)' }
|
||||
])
|
||||
{ offset: 1, color: 'rgba(20,200,212,0)' },
|
||||
]),
|
||||
},
|
||||
z: -12,
|
||||
data: lineData
|
||||
data: lineData,
|
||||
},
|
||||
{
|
||||
name: 'dotted',
|
||||
type: 'pictorialBar',
|
||||
symbol: 'rect',
|
||||
itemStyle: {
|
||||
color: '#0f375f'
|
||||
color: '#0f375f',
|
||||
},
|
||||
symbolRepeat: true,
|
||||
symbolSize: [12, 4],
|
||||
symbolMargin: 1,
|
||||
z: -10,
|
||||
data: lineData
|
||||
data: lineData,
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -143,6 +141,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -34,14 +34,14 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
top: '0%',
|
||||
left: 'center'
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -51,29 +51,29 @@ const options = {
|
|||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -84,6 +84,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const dataBJ = [
|
||||
[55, 9, 56, 0.46, 18, 6, 1],
|
||||
|
|
@ -59,8 +59,8 @@ const dataBJ = [
|
|||
[160, 120, 186, 2.77, 91, 50, 28],
|
||||
[134, 96, 165, 2.76, 83, 41, 29],
|
||||
[52, 24, 60, 1.03, 50, 21, 30],
|
||||
[46, 5, 49, 0.28, 10, 6, 31]
|
||||
];
|
||||
[46, 5, 49, 0.28, 10, 6, 31],
|
||||
]
|
||||
|
||||
const dataGZ = [
|
||||
[26, 37, 27, 1.163, 27, 13, 1],
|
||||
|
|
@ -93,8 +93,8 @@ const dataGZ = [
|
|||
[56, 48, 68, 1.336, 37, 9, 28],
|
||||
[82, 92, 174, 3.29, 0, 13, 29],
|
||||
[106, 116, 188, 3.628, 101, 16, 30],
|
||||
[118, 50, 0, 1.383, 76, 11, 31]
|
||||
];
|
||||
[118, 50, 0, 1.383, 76, 11, 31],
|
||||
]
|
||||
|
||||
const dataSH = [
|
||||
[91, 45, 125, 0.82, 34, 23, 1],
|
||||
|
|
@ -127,13 +127,13 @@ const dataSH = [
|
|||
[93, 68, 96, 1.05, 79, 29, 28],
|
||||
[188, 143, 197, 1.66, 99, 51, 29],
|
||||
[174, 131, 174, 1.55, 108, 50, 30],
|
||||
[187, 143, 201, 1.39, 89, 53, 31]
|
||||
];
|
||||
[187, 143, 201, 1.39, 89, 53, 31],
|
||||
]
|
||||
|
||||
const lineStyle = {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
};
|
||||
opacity: 0.5,
|
||||
}
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#161627',
|
||||
|
|
@ -141,8 +141,8 @@ const options = {
|
|||
text: 'AQI - Radar',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#eee'
|
||||
}
|
||||
color: '#eee',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
|
|
@ -151,9 +151,9 @@ const options = {
|
|||
itemGap: 20,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
selectedMode: 'single'
|
||||
selectedMode: 'single',
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
|
|
@ -162,12 +162,12 @@ const options = {
|
|||
{ name: 'PM10', max: 300, min: 1 },
|
||||
{ name: 'CO', max: 5, min: 1 },
|
||||
{ name: 'NO2', max: 200, min: 1 },
|
||||
{ name: 'SO2', max: 100,min:1 }
|
||||
{ name: 'SO2', max: 100, min: 1 },
|
||||
],
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
axisName: {
|
||||
color: 'rgb(238, 197, 102)'
|
||||
color: 'rgb(238, 197, 102)',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
|
|
@ -177,18 +177,18 @@ const options = {
|
|||
'rgba(238, 197, 102, 0.4)',
|
||||
'rgba(238, 197, 102, 0.6)',
|
||||
'rgba(238, 197, 102, 0.8)',
|
||||
'rgba(238, 197, 102, 1)'
|
||||
].reverse()
|
||||
}
|
||||
'rgba(238, 197, 102, 1)',
|
||||
].reverse(),
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(238, 197, 102, 0.5)'
|
||||
}
|
||||
}
|
||||
color: 'rgba(238, 197, 102, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -198,11 +198,11 @@ const options = {
|
|||
data: dataBJ,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#F9713C'
|
||||
color: '#F9713C',
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
opacity: 0.1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Shanghai',
|
||||
|
|
@ -211,11 +211,11 @@ const options = {
|
|||
data: dataSH,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#B3E4A1'
|
||||
color: '#B3E4A1',
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.05
|
||||
}
|
||||
opacity: 0.05,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Guangzhou',
|
||||
|
|
@ -224,15 +224,15 @@ const options = {
|
|||
data: dataGZ,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: 'rgb(238, 197, 102)'
|
||||
color: 'rgb(238, 197, 102)',
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.05
|
||||
opacity: 0.05,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -243,6 +243,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,31 @@
|
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { EChartsType } from 'echarts/core'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
default: () => {},
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
default: 'chart',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
default: '200px',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
default: '200px',
|
||||
},
|
||||
})
|
||||
const options = {
|
||||
grid: {
|
||||
|
|
@ -34,7 +34,7 @@ const options = {
|
|||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
|
|
@ -63,13 +63,13 @@ const options = {
|
|||
[12.0, 6.26],
|
||||
[12.0, 8.84],
|
||||
[7.08, 5.82],
|
||||
[5.02, 5.68]
|
||||
[5.02, 5.68],
|
||||
],
|
||||
type: 'scatter',
|
||||
},
|
||||
],
|
||||
type: 'scatter'
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
let chart: EChartsType
|
||||
const initChart = () => {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
|
|
@ -80,6 +80,5 @@ onMounted(()=>{
|
|||
window.addEventListener('resize', function () {
|
||||
chart && chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import Chart from '@/components/Charts/LineMarker.vue'
|
||||
|
||||
// export default {
|
||||
|
|
@ -21,4 +20,3 @@ import Chart from '@/components/Charts/LineMarker.vue'
|
|||
height: calc(100vh - 130px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import MapCharts from './components/map/index.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import MigrationCharts from './components/migration/index.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<u-container-layout style="width: 100%;">
|
||||
<u-container-layout style="width: 100%">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
<span>柱状图</span>
|
||||
</div>
|
||||
</template>
|
||||
<bar-charts height="200px" width="100%" id="bar"/>
|
||||
</el-card></el-col>
|
||||
<bar-charts height="200px" width="100%" id="bar" /> </el-card
|
||||
></el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
|
|
@ -102,9 +102,6 @@
|
|||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -118,9 +115,7 @@
|
|||
import RadarCharts from './components/simple/radar.vue'
|
||||
import GraphCharts from './components/simple/graph.vue'
|
||||
import PictorialBarCharts from './components/simple/pictorialBar.vue'
|
||||
import PictorialBar from "@/views/charts/components/simple/pictorialBar.vue";
|
||||
|
||||
|
||||
import PictorialBar from '@/views/charts/components/simple/pictorialBar.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export const chatData = [
|
|||
is_self: 0,
|
||||
created_at: '2022-03-11',
|
||||
content: 'hello 你好呀!',
|
||||
id:1
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
is_self: 1,
|
||||
|
|
@ -11,5 +11,5 @@ export const chatData = [
|
|||
content: 'hello 你好呀!',
|
||||
id: 2,
|
||||
type: 1, // 文字
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="g-container-chat">
|
||||
<div class="g-layout-content-center" style="width:100%;" ref="chatContentBoxs">
|
||||
<div v-for="item,index in chatDatas" :key="item.id" style="padding-top: 15px;">
|
||||
<div class="g-layout-content-center" style="width: 100%" ref="chatContentBoxs">
|
||||
<div v-for="(item, index) in chatDatas" :key="item.id" style="padding-top: 15px">
|
||||
<div class="from_user_info" v-if="item.is_self === 0">
|
||||
<div class="contact-nickname">{{ item.created_at }} 林峰</div>
|
||||
<div class="receive-message-wrap">
|
||||
|
|
@ -21,7 +21,12 @@
|
|||
<div class="text-content" v-html="item.content"></div>
|
||||
</div>
|
||||
<div class="public-show-pic" v-else-if="item.type === 2">
|
||||
<el-image :src="item.content" :preview-src-list="[item.content]" style="max-width:200px;" :data-resid="Date.now()"/>
|
||||
<el-image
|
||||
:src="item.content"
|
||||
:preview-src-list="[item.content]"
|
||||
style="max-width: 200px"
|
||||
:data-resid="Date.now()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar-show">
|
||||
|
|
@ -36,14 +41,12 @@
|
|||
@blur="contentBlur"
|
||||
ref="contenteditableInputs"
|
||||
class="g-chat-container-footer-input"
|
||||
contenteditable=true></div>
|
||||
contenteditable="true"
|
||||
></div>
|
||||
<div class="g-chat-container-footer-btn">
|
||||
<div class="" style="margin-right:10px">
|
||||
Ctrl+V粘贴, Ctrl+Enter换行
|
||||
</div>
|
||||
<div class="" style="margin-right: 10px"> Ctrl+V粘贴, Ctrl+Enter换行 </div>
|
||||
<el-button @click="sendInfoAction">发送</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -52,8 +55,8 @@
|
|||
import UToolbar from '../u-toolbar/index.vue'
|
||||
import defalutAvator from '@/assets/image/avator.png'
|
||||
import { chatData } from './chat.js'
|
||||
import {ElMessage} from "element-plus";
|
||||
import dayjs from "dayjs";
|
||||
import { ElMessage } from 'element-plus'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const range = ref<HTMLElement | null>(null)
|
||||
const selection = ref<any>(null)
|
||||
|
|
@ -72,12 +75,14 @@
|
|||
}
|
||||
|
||||
const keepLastIndex = (obj) => {
|
||||
if (window.getSelection) { // ie11 10 9 ff safari
|
||||
if (window.getSelection) {
|
||||
// ie11 10 9 ff safari
|
||||
obj.focus() // 解决ff不获取焦点无法定位问题
|
||||
let range = window.getSelection() // 创建range
|
||||
range.selectAllChildren(obj) // range 选择obj下所有子内容
|
||||
range.collapseToEnd() // 光标移至最后
|
||||
} else if (document.selection) { // ie10 9 8 7 6 5
|
||||
} else if (document.selection) {
|
||||
// ie10 9 8 7 6 5
|
||||
let range = document.selection.createRange() // 创建选择对象
|
||||
// var range = document.body.createTextRange();
|
||||
range.moveToElementText(obj) // range定位到obj
|
||||
|
|
@ -140,21 +145,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
const sendMessageData = (content:string,type:number=1)=>{
|
||||
const day = dayjs().format('YYYY-MM-DD');
|
||||
const sendMessageData = (content: string, type = 1) => {
|
||||
const day = dayjs().format('YYYY-MM-DD')
|
||||
return {
|
||||
is_self: 1,
|
||||
created_at: day,
|
||||
content,
|
||||
type,
|
||||
id:Date.now()+Math.random()
|
||||
id: Date.now() + Math.random(),
|
||||
}
|
||||
}
|
||||
|
||||
const getPreviewList = () => {
|
||||
preview_src_data.value = []
|
||||
nextTick(() => {
|
||||
chatDatas.value.forEach(item=>{
|
||||
chatDatas.value.forEach((item) => {
|
||||
if (item.type === 2) {
|
||||
preview_src_data.value.push(item.content)
|
||||
}
|
||||
|
|
@ -189,8 +194,8 @@
|
|||
setCursor()
|
||||
return ElMessage.error('请填写发送内容')
|
||||
}
|
||||
let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/ig
|
||||
let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/ig
|
||||
let reg = /<img.*?src="(.*?)".*?title="(.*?)".*?>/gi
|
||||
let reg1 = /<img.*?src="(.*?)".*?insert="(.*?)">/gi
|
||||
let content = value.replace(reg, '[$2]')
|
||||
|
||||
let data = []
|
||||
|
|
@ -226,7 +231,6 @@
|
|||
focusContentEditable()
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -242,7 +246,9 @@
|
|||
border-bottom: 1px solid #ededed;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
[contenteditable]:focus{outline: none;}
|
||||
[contenteditable]:focus {
|
||||
outline: none;
|
||||
}
|
||||
.g-chat-container-footer-input {
|
||||
word-break: break-all;
|
||||
padding: 8px;
|
||||
|
|
@ -255,7 +261,6 @@
|
|||
padding-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
}
|
||||
.g-chat-container-footer-btn {
|
||||
height: 50px;
|
||||
|
|
@ -326,10 +331,10 @@
|
|||
width: 372px;
|
||||
padding: 10px;
|
||||
z-index: 9;
|
||||
border: 1px solid #D9D9D9;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
.title-emoje {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
|
@ -351,7 +356,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.from_user_info {
|
||||
width: 100%;
|
||||
// overflow: hidden;
|
||||
|
|
@ -434,7 +438,7 @@
|
|||
.receive-message-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center
|
||||
align-items: center;
|
||||
}
|
||||
.receive-message-info {
|
||||
background: #9eea6a;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div class="g-layout-content-chat-util">
|
||||
|
||||
<div class="item-left">
|
||||
<div class="emoje" title="选择表情" @click.stop="selectEmojiAction">
|
||||
<img src="static/face/emoji-after.png" alt="" style="width:20px">
|
||||
<img src="static/face/emoji-after.png" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="upload-picture" title="上传图片">
|
||||
<el-upload action multiple :show-file-list="false" :before-upload="beforeUploadAction">
|
||||
|
|
@ -11,11 +10,12 @@
|
|||
</el-upload>
|
||||
</div>
|
||||
<div class="emoje-border-wrap" v-show="isShowEmoji">
|
||||
|
||||
<div class="title-emoje"
|
||||
<div
|
||||
class="title-emoje"
|
||||
v-for="(item, index) in emojis"
|
||||
@click.stop="selectSigleEmojeAction($event, item)"
|
||||
:key="index">
|
||||
:key="index"
|
||||
>
|
||||
<img :src="`static/face/${item}.png`" :title="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,10 +25,8 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineEmits, onMounted } from 'vue'
|
||||
import {
|
||||
FolderOpened
|
||||
} from '@element-plus/icons-vue'
|
||||
import {ElMessage} from "element-plus";
|
||||
import { FolderOpened } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import emoji from '@/utils/emojis'
|
||||
const emojis = ref<string[]>(emoji.imgs)
|
||||
|
|
@ -53,7 +51,7 @@
|
|||
const beforeUploadAction = (file, fileList) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
var reader = new FileReader()
|
||||
let reg = (/\.jpg$|\.jpeg$|\.gif$|\.png$/i)
|
||||
let reg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i
|
||||
reader.readAsDataURL(file)
|
||||
let name = file.name
|
||||
if (reg.test(name)) {
|
||||
|
|
@ -73,7 +71,6 @@
|
|||
isShowEmoji.value = false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -134,10 +131,10 @@
|
|||
width: 372px;
|
||||
padding: 10px;
|
||||
z-index: 9;
|
||||
border: 1px solid #D9D9D9;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
.title-emoje {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
|
||||
<div style="margin-bottom: 15px"
|
||||
>聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div
|
||||
>
|
||||
<u-chat-box />
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
|
@ -11,6 +13,4 @@
|
|||
import UChatBox from './components/u-chartBox/index.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<u-container-layout>
|
||||
<el-card style="margin-bottom: 20px">
|
||||
<div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
|
||||
<el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
|
||||
<el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
|
||||
<el-button type="primary" @click="handleCopy(inputData, $event)">
|
||||
<el-icon style="margin-right: 6px"><document-copy /></el-icon> 复制
|
||||
</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
|
||||
<el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" />
|
||||
<el-input v-model="testValue" placeholder="请输入" style="width: 400px; max-width: 100%" />
|
||||
</el-card>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基础用法
|
||||
</span>
|
||||
<span>基础用法 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -40,8 +39,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>禁用状态
|
||||
</span>
|
||||
<span>禁用状态 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -63,8 +61,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>文字按钮
|
||||
</span>
|
||||
<span>文字按钮 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -76,8 +73,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>图标按钮
|
||||
</span>
|
||||
<span>图标按钮 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -94,8 +90,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>按钮组
|
||||
</span>
|
||||
<span>按钮组 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -112,8 +107,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>加载中
|
||||
</span>
|
||||
<span>加载中 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -146,8 +140,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>自定义颜色
|
||||
</span>
|
||||
<span>自定义颜色 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -155,25 +148,14 @@
|
|||
<el-button color="#626aef" plain class="item">Plain</el-button>
|
||||
|
||||
<el-button color="#626aef" disabled class="item">Disabled</el-button>
|
||||
<el-button color="#626aef" disabled plain class="item"
|
||||
>Disabled Plain</el-button
|
||||
>
|
||||
<el-button color="#626aef" disabled plain class="item">Disabled Plain</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Check,
|
||||
Delete,
|
||||
Edit,
|
||||
Message,
|
||||
Search,
|
||||
Share,
|
||||
Star
|
||||
} from '@element-plus/icons-vue'
|
||||
import { Check, Delete, Edit, Message, Search, Share, Star } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style>
|
||||
.card-header {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基础用法
|
||||
</span>
|
||||
<span>基础用法 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -17,8 +16,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>禁用状态
|
||||
</span>
|
||||
<span>禁用状态 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -30,8 +28,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>多选框组
|
||||
</span>
|
||||
<span>多选框组 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -48,8 +45,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>中间状态
|
||||
</span>
|
||||
<span>中间状态 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -59,13 +55,8 @@
|
|||
@change="handleCheckAllChange"
|
||||
>全选</el-checkbox
|
||||
>
|
||||
<el-checkbox-group
|
||||
v-model="checkedCities"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<el-checkbox v-for="city in cities" :key="city" :label="city">{{
|
||||
city
|
||||
}}</el-checkbox>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -73,8 +64,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>按钮样式
|
||||
</span>
|
||||
<span>按钮样式 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -89,8 +79,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>带有边框
|
||||
</span>
|
||||
<span>带有边框 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -100,7 +89,6 @@
|
|||
</el-card>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -4,24 +4,18 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>日期和时间点
|
||||
</span>
|
||||
<span>日期和时间点 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-date-picker
|
||||
v-model="value1"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间点"
|
||||
/>
|
||||
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间点" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>日期时间格式
|
||||
</span>
|
||||
<span>日期时间格式 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -37,8 +31,7 @@
|
|||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>日期和时间范围
|
||||
</span>
|
||||
<span>日期和时间范围 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -53,12 +46,10 @@
|
|||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>默认的起始与结束时刻
|
||||
</span>
|
||||
<span>默认的起始与结束时刻 </span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -71,13 +62,8 @@
|
|||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
@ -85,10 +71,7 @@
|
|||
const value4 = ref('')
|
||||
const value5 = ref('')
|
||||
const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)]
|
||||
const value3 = ref([
|
||||
new Date(2000, 10, 10, 10, 10),
|
||||
new Date(2000, 10, 11, 10, 10),
|
||||
])
|
||||
const value3 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)])
|
||||
const shortcuts = [
|
||||
{
|
||||
text: 'Today',
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import ZbPipeline from "@/components/pipeline/index.vue";
|
||||
import ZbPipeline from '@/components/pipeline/index.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue