master
parent
c2eae0a5d8
commit
89df343373
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import tdTheme from './theme.json' // 引入默认主题
|
||||
|
||||
export default {
|
||||
name: 'echart',
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '2.5rem'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: ()=>({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler (options) {
|
||||
// 设置true清空echart缓存
|
||||
this.chart.setOption(options, true)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
|
||||
this.initChart();
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
// 初始化echart
|
||||
this.chart = echarts.init(this.$el, 'tdTheme')
|
||||
this.chart.setOption(this.options, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,490 @@
|
||||
{
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#ff9900",
|
||||
"#E46CBB",
|
||||
"#9A66E4",
|
||||
"#ed3f14"
|
||||
],
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#516b91"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#93b7e3"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "2"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "2"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#edafda",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#d680bc",
|
||||
"borderColor0": "#8fd3e8",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": 1,
|
||||
"color": "#aaa"
|
||||
}
|
||||
},
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#2d8cf0",
|
||||
"#19be6b",
|
||||
"#f5ae4a",
|
||||
"#9189d5",
|
||||
"#56cae2",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#f3f3f3",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(165,231,240,1)",
|
||||
"borderColor": "#516b91",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#000"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(81,107,145)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#fff"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#ccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "#8fd3e8",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#8fd3e8",
|
||||
"borderColor": "rgba(138,124,168,0.37)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#8fd3e8"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#516b91",
|
||||
"#59c4e6",
|
||||
"#a5e7f0"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"dataBackgroundColor": "rgba(255,255,255,0.3)",
|
||||
"fillerColor": "rgba(167,183,204,0.4)",
|
||||
"handleColor": "#a7b7cc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#eee"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<Echart
|
||||
:options="options"
|
||||
id="centreLeft1Chart"
|
||||
height="480px"
|
||||
width="100%"
|
||||
></Echart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Echart from './echart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
// 定义颜色
|
||||
colorList: {
|
||||
linearYtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#f5b44d'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
linearGtoB: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#43dfa2'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
linearBtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1c98e8'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#28f8de'
|
||||
}
|
||||
]
|
||||
},
|
||||
areaBtoG: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(35,184,210,.2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(35,184,210,0)'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Echart
|
||||
},
|
||||
props: {
|
||||
cdata: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
cdata: {
|
||||
handler(newData) {
|
||||
this.options = {
|
||||
title: {
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#D3D6DD',
|
||||
fontSize: 24,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: newData.year + '/' + newData.weekCategory[6],
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
},
|
||||
top: 50,
|
||||
left: 80
|
||||
},
|
||||
legend: {
|
||||
top: 120,
|
||||
left: 80,
|
||||
orient: 'vertical',
|
||||
itemGap: 15,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
data: ['平均指标', '我的指标'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
radar: {
|
||||
center: ['68%', '27%'],
|
||||
radius: '40%',
|
||||
name: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: this.colorList.linearYtoG,
|
||||
opacity: 0.6
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.1,
|
||||
shadowBlur: 25,
|
||||
shadowColor: '#000',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: '服务态度',
|
||||
max: newData.maxData
|
||||
},
|
||||
{
|
||||
name: '产品质量',
|
||||
max: 10
|
||||
},
|
||||
{
|
||||
name: '任务效率',
|
||||
max: 12
|
||||
},
|
||||
{
|
||||
name: '售后保障',
|
||||
max: 3.5
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: 90,
|
||||
right: 80,
|
||||
bottom: 40,
|
||||
top: '60%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
position: 'bottom',
|
||||
axisLine: true,
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: 12
|
||||
},
|
||||
data: newData.weekCategory
|
||||
},
|
||||
// 下方Y轴
|
||||
yAxis: {
|
||||
name: '工单',
|
||||
nameLocation: 'end',
|
||||
nameGap: 24,
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,.5)',
|
||||
fontSize: 14
|
||||
},
|
||||
max: newData.maxData,
|
||||
splitNumber: 4,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,.8)',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
data: [
|
||||
{
|
||||
value: newData.radarDataAvg[6],
|
||||
name: '平均指标',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f8d351'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#f8d351',
|
||||
shadowBlur: 25,
|
||||
shadowColor: 'rgba(248,211,81,.3)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -10,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: newData.radarData[6],
|
||||
name: '我的指标',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#43dfa2'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearGtoB,
|
||||
shadowBlur: 15,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 5,
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: this.colorList.linearBtoG,
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: this.colorList.areaBtoG
|
||||
}
|
||||
},
|
||||
data: newData.weekLineData,
|
||||
lineSmooth: true,
|
||||
markLine: {
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
type: 'average',
|
||||
name: '平均值'
|
||||
}
|
||||
],
|
||||
precision: 0,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '平均值: \n {c}'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: 'rgba(248,211,81,.7)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
position: 'top',
|
||||
formatter: '{c} m',
|
||||
backgroundColor: 'rgba(28,152,232,.2)',
|
||||
padding: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占位背景',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: '#000',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
silent: true,
|
||||
barWidth: '50%',
|
||||
data: newData.weekMaxData,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,98 @@
|
||||
// 颜色
|
||||
$colors: (
|
||||
"primary": #1A5CD7,
|
||||
"info-1": #4394e4,
|
||||
"info": #4b67af,
|
||||
"white": #ffffff,
|
||||
"light": #f9f9f9,
|
||||
"grey-1": #999999,
|
||||
"grey": #666666,
|
||||
"dark-1": #5f5f5f,
|
||||
"dark": #222222,
|
||||
"black-1": #171823,
|
||||
"black": #000000,
|
||||
"icon": #5cd9e8
|
||||
);
|
||||
|
||||
// 字体大小
|
||||
$base-font-size: 0.2rem;
|
||||
$font-sizes: (
|
||||
xxs: 0.1,
|
||||
//8px
|
||||
xs: 0.125,
|
||||
//10px
|
||||
sm: 0.2875,
|
||||
//12px
|
||||
md: 0.1625,
|
||||
//13px
|
||||
lg: 0.175,
|
||||
//14px
|
||||
xl: 0.2,
|
||||
//16px
|
||||
xxl: 0.225,
|
||||
//18px
|
||||
xxxl: 0.25 //20px,,,,
|
||||
);
|
||||
|
||||
// 宽高
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
//flex
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
$flex-jc: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly,
|
||||
);
|
||||
|
||||
$flex-ai: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
stretch: stretch,
|
||||
);
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
//.mt-1 => margin top
|
||||
//spacing
|
||||
$spacing-types: (
|
||||
m: margin,
|
||||
p: padding,
|
||||
);
|
||||
$spacing-directions: (
|
||||
t: top,
|
||||
r: right,
|
||||
b: bottom,
|
||||
l: left,
|
||||
);
|
||||
$spacing-base-size: 0.5rem;
|
||||
$spacing-sizes: (
|
||||
0: 0,
|
||||
1: 0.5,
|
||||
2: 1,
|
||||
3: 1.5,
|
||||
4: 2,
|
||||
5: 2.5,
|
||||
);
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="btns">
|
||||
<div class="item">
|
||||
<SvgIcon icon-class="chart" class="item__icon"></SvgIcon>
|
||||
|
||||
<div class="item__text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60" preserveAspectRatio="xMinYMin meet">
|
||||
<path d="M 0 0 L 160 0 L 160 60 L 0 60 Q 30 30 0 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<p>资产总览</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<SvgIcon icon-class="chart" class="item__icon"></SvgIcon>
|
||||
|
||||
<div class="item__text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60" preserveAspectRatio="xMinYMin meet">
|
||||
<path d="M 0 0 L 160 0 L 160 60 L 0 60 Q 30 30 0 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<p>租赁数据</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<SvgIcon icon-class="chart" class="item__icon"></SvgIcon>
|
||||
|
||||
<div class="item__text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60" preserveAspectRatio="xMinYMin meet">
|
||||
<path d="M 0 0 L 160 0 L 160 60 L 0 60 Q 30 30 0 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
<p>安全巡检</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from "@/components/SvgIcon"
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btns {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
color: #7bc8b9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__icon {
|
||||
color: #7bc8b9;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #7bc8b9;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 6px;
|
||||
}
|
||||
&__text {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 160px;
|
||||
color: #7bc8b9;
|
||||
position: relative;
|
||||
& > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: -4%;
|
||||
bottom: 0;
|
||||
}
|
||||
& > p {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item + .item {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="header d-flex">
|
||||
<div class="header-title">
|
||||
<p>智慧资产管理大屏</p>
|
||||
|
||||
<dv-decoration-8 :reverse="true" class="header-title__dvd8" />
|
||||
</div>
|
||||
|
||||
<dv-decoration-1 style="width:200px;height:40px;margin-left: 100px;" />
|
||||
<dv-decoration-2 style="flex: 1;height:5px;" />
|
||||
|
||||
<div class="header-time">
|
||||
<p>{{ time.format('YYYY年MM月DD日 HH:mm:ss') }}</p>
|
||||
<p>{{ time.format('dddd') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: this.$moment(),
|
||||
timer: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateTime() {
|
||||
this.time = this.$moment()
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.timer = setInterval(() => {
|
||||
this.updateTime()
|
||||
}, 1000)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-title {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(to right, #1d413b, #75f9e2);
|
||||
padding: 16px 100px;
|
||||
transform: skewX(-45deg) translateX(-6vw);
|
||||
position: relative;
|
||||
|
||||
& > p {
|
||||
transform: skewX(45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
background: #2ba28a;
|
||||
width: 10%;
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__dvd8 {
|
||||
height: 36px;
|
||||
width: 100px;
|
||||
transform: translate(100%, 0);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
&-time {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="container" ref="appRef">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div v-else>
|
||||
<HeaderComponent></HeaderComponent>
|
||||
|
||||
<div class="body d-flex">
|
||||
<btns></btns>
|
||||
<div class="left">
|
||||
<MapComponent></MapComponent>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<dv-border-box-12><right1></right1></dv-border-box-12>
|
||||
<dv-border-box-12><right2></right2></dv-border-box-12>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "@/mixin/drawMixin";
|
||||
import MapComponent from "./map.vue";
|
||||
import HeaderComponent from "./header.vue";
|
||||
import right1 from "./right1.vue";
|
||||
import right2 from "./right2.vue";
|
||||
import btns from "./btns.vue";
|
||||
export default {
|
||||
components: {
|
||||
MapComponent,
|
||||
HeaderComponent,
|
||||
right1,
|
||||
right2,
|
||||
btns
|
||||
},
|
||||
mixins: [drawMixin],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
},500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~@/styles/scss/style.scss";
|
||||
.page {
|
||||
background: #040608;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
transform-origin: 0 0;
|
||||
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.body {
|
||||
padding-top: 60px;
|
||||
padding-left: 16%;
|
||||
.left {
|
||||
flex-basis: 60%;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-right: 60px;
|
||||
margin-left: 40px;
|
||||
|
||||
div + div {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div id="map">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import WUXI from "@/assets/wuxi.json";
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
initMap () {
|
||||
echarts.registerMap("wuxi", WUXI);
|
||||
let chart = echarts.init(document.querySelector("#map"))
|
||||
chart.setOption({
|
||||
series: [{
|
||||
type: 'map3D', // map、map3D
|
||||
map: 'wuxi' // 注册的地图名称
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="ranking bg-color-black">
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ranking: {
|
||||
data: [
|
||||
{
|
||||
name: '周口',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: '南阳',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: '西峡',
|
||||
value: 78
|
||||
},
|
||||
{
|
||||
name: '驻马店',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: '新乡',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡2',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡3',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡4',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡5',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: '新乡6',
|
||||
value: 80
|
||||
}
|
||||
],
|
||||
carousel: 'single',
|
||||
unit: '人'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ranking {
|
||||
padding: 20px 10px;
|
||||
width: 100%;
|
||||
.dv-scr-rank-board {
|
||||
height: 225px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div id="bottomRight">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span>
|
||||
<icon name="chart-area" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
||||
<div class="decoration2">
|
||||
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Chart :cdata="cdata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from "@/components/Charts"
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
drawTiming: null,
|
||||
cdata: {
|
||||
year: null,
|
||||
weekCategory: [],
|
||||
radarData: [],
|
||||
radarDataAvg: [],
|
||||
maxData: 12000,
|
||||
weekMaxData: [],
|
||||
weekLineData: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Chart,
|
||||
},
|
||||
mounted () {
|
||||
this.drawTimingFn();
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.drawTiming);
|
||||
},
|
||||
methods: {
|
||||
drawTimingFn () {
|
||||
this.setData();
|
||||
this.drawTiming = setInterval(() => {
|
||||
this.setData();
|
||||
}, 6000);
|
||||
},
|
||||
setData () {
|
||||
// 清空轮询数据
|
||||
this.cdata.weekCategory = [];
|
||||
this.cdata.weekMaxData = [];
|
||||
this.cdata.weekLineData = [];
|
||||
this.cdata.radarData = [];
|
||||
this.cdata.radarDataAvg = [];
|
||||
|
||||
let dateBase = new Date();
|
||||
this.cdata.year = dateBase.getFullYear();
|
||||
// 周数据
|
||||
for (let i = 0; i < 7; i++) {
|
||||
// 日期
|
||||
let date = new Date();
|
||||
this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
|
||||
|
||||
// 折线图数据
|
||||
this.cdata.weekMaxData.push(this.cdata.maxData);
|
||||
let distance = Math.round(Math.random() * 11000 + 500);
|
||||
this.cdata.weekLineData.push(distance);
|
||||
|
||||
// 雷达图数据
|
||||
// 我的指标
|
||||
let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
|
||||
let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
|
||||
let hour = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayData = [distance, averageSpeed, maxSpeed, hour];
|
||||
this.cdata.radarData.unshift(radarDayData);
|
||||
|
||||
// 平均指标
|
||||
let distanceAvg = Math.round(Math.random() * 8000 + 4000);
|
||||
let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
|
||||
let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
|
||||
let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
|
||||
let radarDayDataAvg = [
|
||||
distanceAvg,
|
||||
averageSpeedAvg,
|
||||
maxSpeedAvg,
|
||||
hourAvg
|
||||
];
|
||||
this.cdata.radarDataAvg.unshift(radarDayDataAvg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in new issue