msb-public
/
dc3-web
mirror of https://gitee.com/pnoker/dc3-web.git
1
0
Code Issues Projects Releases Wiki Activity

update

Browse Source
pull/1/head
peter-no 5 years ago
parent f65a0f6df6
commit 0176447a36
4 changed files with 240 additions and 694 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -16,7 +16,6 @@
"@smallwei/avue": "^2.5.3", "@smallwei/avue": "^2.5.3",
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "^4.8.0",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"insert-css": "^2.0.0", "insert-css": "^2.0.0",
"js-base64": "latest", "js-base64": "latest",

180
src/plugins/echart/macarons.project.json
Unescape View File

@ -1,180 +0,0 @@
{
"version": 1,
"themeName": "macarons",
"theme": {
"seriesCnt": "4",
"backgroundColor": "rgba(0,0,0,0)",
"titleColor": "#008acd",
"subtitleColor": "#aaaaaa",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#eeeeee",
"color": [
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
],
"borderColor": "#ccc",
"borderWidth": 0,
"visualMapColor": [
"#5ab1ef",
"#e0ffff"
],
"legendTextColor": "#333333",
"kColor": "#d87a80",
"kColor0": "#2ec7c9",
"kBorderColor": "#d87a80",
"kBorderColor0": "#2ec7c9",
"kBorderWidth": 1,
"lineWidth": 2,
"symbolSize": 3,
"symbol": "emptyCircle",
"symbolBorderWidth": 1,
"lineSmooth": true,
"graphLineWidth": 1,
"graphLineColor": "#aaaaaa",
"mapLabelColor": "#d87a80",
"mapLabelColorE": "rgb(100,0,0)",
"mapBorderColor": "#eeeeee",
"mapBorderColorE": "#444444",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#dddddd",
"mapAreaColorE": "rgba(254,153,78,1)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#eeeeee",
"axisTickShow": true,
"axisTickColor": "#eeeeee",
"axisLabelShow": true,
"axisLabelColor": "#eeeeee",
"splitLineShow": true,
"splitLineColor": [
"#aaaaaa"
],
"splitAreaShow": false,
"splitAreaColor": [
"#eeeeee"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#008acd",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": false,
"splitLineColor": [
"#eee"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": true,
"axisLineColor": "#008acd",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#eee"
],
"splitAreaShow": true,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": true,
"axisLineColor": "#008acd",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#eee"
],
"splitAreaShow": true,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#008acd",
"axisTickShow": true,
"axisTickColor": "#333",
"axisLabelShow": true,
"axisLabelColor": "#333",
"splitLineShow": true,
"splitLineColor": [
"#eee"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
],
"axisSeperateSetting": true,
"toolboxColor": "#2ec7c9",
"toolboxEmpasisColor": "#18a4a6",
"tooltipAxisColor": "#008acd",
"tooltipAxisWidth": "1",
"timelineLineColor": "#008acd",
"timelineLineWidth": 1,
"timelineItemColor": "#008acd",
"timelineItemColorE": "#a9334c",
"timelineCheckColor": "#2ec7c9",
"timelineCheckBorderColor": "rgba(46,199,201,0.4)",
"timelineItemBorderWidth": 1,
"timelineControlColor": "#008acd",
"timelineControlBorderColor": "#008acd",
"timelineControlBorderWidth": 0.5,
"timelineLabelColor": "#008acd",
"datazoomBackgroundColor": "rgba(47,69,84,0)",
"datazoomDataColor": "rgba(239,239,255,1)",
"datazoomFillColor": "rgba(182,162,222,0.2)",
"datazoomHandleColor": "#008acd",
"datazoomHandleWidth": "100",
"datazoomLabelColor": "#333333"
}
}

147
src/views/home/Home.vue
Unescape View File

@ -1,151 +1,19 @@
<template> <template>
<div class="home"> <div class="home">
<el-col :span="24"> <base-card>
<el-col :span="9"> <div id="device-map"/>
<title-card title="设备在线统计"> </base-card>
<div id="c1"/>
</title-card>
</el-col>
<el-col :span="6">
<title-card title="设备状态统计">
<div id="c2"/>
</title-card>
</el-col>
<el-col :span="9">
<title-card title="设备分组统计">
<div id="c3"/>
</title-card>
</el-col>
</el-col>
<el-col :span="24">
<base-card>
<div id="device-map"/>
</base-card>
</el-col>
</div> </div>
</template> </template>
<script> <script>
import {PointLayer, Scene} from '@antv/l7'; import {PointLayer, Scene} from '@antv/l7';
import {GaodeMap} from '@antv/l7-maps'; import {GaodeMap} from '@antv/l7-maps';
import G2 from '@antv/g2';
export default { export default {
data() { data() {
return {}; return {};
}, },
mounted() { mounted() {
const data1 = [
{year: '1991', value: 3},
{year: '1992', value: 4},
{year: '1993', value: 3.5},
{year: '1994', value: 5},
{year: '1995', value: 4.9},
{year: '1996', value: 6},
{year: '1997', value: 7},
{year: '1998', value: 9},
{year: '1999', value: 13}
];
const chart1 = new G2.Chart({
container: 'c1',
forceFit: true,
height: 300,
padding: [20, 20, 20, 20]
});
chart1.source(data1);
chart1.scale('value', {
min: 0
});
chart1.scale('year', {
range: [0, 1]
});
chart1.tooltip({
crosshairs: {
type: 'line'
}
});
chart1.line().position('year*value');
chart1.point().position('year*value')
.size(4)
.shape('circle')
.style({
stroke: '#fff',
lineWidth: 1
});
chart1.render();
const data2 = [
{item: '事例一', count: 40, percent: 0.4},
{item: '事例二', count: 21, percent: 0.21},
{item: '事例三', count: 17, percent: 0.17},
{item: '事例四', count: 13, percent: 0.13},
{item: '事例五', count: 9, percent: 0.09}
];
const chart2 = new G2.Chart({
container: 'c2',
forceFit: true,
height: 300,
padding: [20, 20, 20, 20]
});
chart2.source(data2, {
percent: {
formatter: val => {
val = (val * 100) + '%';
return val;
}
}
});
chart2.coord('theta', {
radius: 0.75
});
chart2.tooltip({
showTitle: false,
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart2.intervalStack()
.position('percent')
.color('item')
.label('percent', {
formatter: (val, item) => {
return item.point.item + ': ' + val;
}
})
.tooltip('item*percent', (item, percent) => {
percent = percent * 100 + '%';
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: '#fff'
});
chart2.render();
const data3 = [
{year: '1951 年', sales: 38},
{year: '1952 年', sales: 52},
{year: '1956 年', sales: 61},
{year: '1957 年', sales: 145},
{year: '1958 年', sales: 48},
{year: '1959 年', sales: 38},
{year: '1960 年', sales: 38},
{year: '1962 年', sales: 38}
];
const chart3 = new G2.Chart({
container: 'c3',
forceFit: true,
height: 300,
padding: [20, 20, 20, 20]
});
chart3.source(data3);
chart3.scale('sales', {
tickInterval: 20
});
chart3.interval().position('year*sales');
chart3.render();
const scene = new Scene({ const scene = new Scene({
id: 'device-map', id: 'device-map',
map: new GaodeMap({ map: new GaodeMap({
@ -182,7 +50,7 @@
} }
}) })
.shape('name', ['00', '01', '02']) .shape('name', ['00', '01', '02'])
.size(20); .size(15);
scene.addLayer(imageLayer); scene.addLayer(imageLayer);
}); });
} }
@ -190,9 +58,14 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.home {
height: 100%;
}
#device-map { #device-map {
position: relative; position: relative;
width: 100%; width: 100%;
height: 600px; overflow: hidden;
height: 875px;
} }
</style> </style>

606
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save