可视化测试页面
This commit is contained in:
code_nan
parent
933a36712f
commit
1248690858
@ -16,6 +16,9 @@
|
|||||||
<el-table-column prop="message" label="日志内容"></el-table-column>
|
<el-table-column prop="message" label="日志内容"></el-table-column>
|
||||||
<el-table-column prop="timestamp" label="时间戳"></el-table-column>
|
<el-table-column prop="timestamp" label="时间戳"></el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<el-container style="height: 400px;">
|
||||||
|
<el-chart :options="chartOptions" ref="myChart"></el-chart>
|
||||||
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -32,8 +35,26 @@
|
|||||||
logs: [ // 这里可以根据需要从后台获取真实数据
|
logs: [ // 这里可以根据需要从后台获取真实数据
|
||||||
{ id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
|
{ id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
|
||||||
{ id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
|
{ id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
|
||||||
]
|
],
|
||||||
|
chartOptions: {
|
||||||
|
title: {
|
||||||
|
text: '柱状图示例'
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
xAxis: {
|
||||||
|
data: ['类别1', '类别2', '类别3', '类别4', '类别5']
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [{
|
||||||
|
name: '数量',
|
||||||
|
type: 'bar',
|
||||||
|
data: [5, 20, 36, 10, 10]
|
||||||
|
}]
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.renderChart()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchLogs() {
|
fetchLogs() {
|
||||||
@ -57,6 +78,10 @@
|
|||||||
// 将返回的日志数据赋值给logs数组
|
// 将返回的日志数据赋值给logs数组
|
||||||
this.logs = response.data;
|
this.logs = response.data;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
},
|
||||||
|
renderChart() {
|
||||||
|
const myChart = echarts.init(this.$refs.myChart)
|
||||||
|
myChart.setOption(this.chartOptions)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
38
src/views/modules/monitoring/chart-test.vue
Normal file
38
src/views/modules/monitoring/chart-test.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
|
||||||
|
<el-card shadow="always">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>数据上报</span>
|
||||||
|
<span class="card-div-desc">{{ lineCardTitle }}</span>
|
||||||
|
<el-radio-group style="float: right; padding: 3px 0" v-model="lineDataType"
|
||||||
|
size="mini" @change="handleLineChange">
|
||||||
|
<el-radio-button label="order">运行情况</el-radio-button>
|
||||||
|
<el-radio-button label="sale">应用情况</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<LineHeapChart
|
||||||
|
height="600px"
|
||||||
|
:xAxisData="lineXAxisData"
|
||||||
|
:seriesData="lineSeriesData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
import LineHeapChart from '../../../components/charts/LineHeapChart.vue'
|
||||||
|
import PieFlatChart from '../../../components/charts/PieFlatChart.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'index',
|
||||||
|
components: {
|
||||||
|
LineHeapChart,
|
||||||
|
PieFlatChart
|
||||||
|
},
|
||||||
|
}
|
||||||
266
src/views/modules/monitoring/chart-test2.vue
Normal file
266
src/views/modules/monitoring/chart-test2.vue
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="10" style="margin-bottom:10px">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="color:#409EFF">
|
||||||
|
<div><i class="el-icon-user-solid"/>运行设备数量</div>
|
||||||
|
<div style="padding:10px 0;text-align:center;font-weight:bold">{{total}}</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="color:#F56C6C">
|
||||||
|
<div><i class="el-icon-money"/>设备总量</div>
|
||||||
|
<div style="padding:10px 0;text-align:center;font-weight:bold">1000</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="color:#67C23A">
|
||||||
|
<div><i class="el-icon-bank-card"/>覆盖地区</div>
|
||||||
|
<div style="padding:10px 0;text-align:center;font-weight:bold">320</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card style="color:#409EFF">
|
||||||
|
<div style="color:#409EFF"><i class="el-icon-s-shop"/>上报数量</div>
|
||||||
|
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="10" style="margin-bottom:10px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card style="color:#409EFF">
|
||||||
|
<div><i class="el-icon-bank-card"/>覆盖地区</div>
|
||||||
|
<div id="main" style="width:500px; height:400px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card style="color:#409EFF">
|
||||||
|
<div><i class="el-icon-bank-card"/>覆盖地区</div>
|
||||||
|
<div id="pie" style="width:500px; height:400px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="10" style="margin-bottom:10px">
|
||||||
|
<el-card style="color:#409EFF">
|
||||||
|
<div><i class="el-icon-bank-card"/>流量上报</div>
|
||||||
|
<div id="stacked-area" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
name:"Home",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
total:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){ //使用mounted的目的是为了等页面元素渲染之后再触发
|
||||||
|
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var charOption;
|
||||||
|
charOption = {
|
||||||
|
title: {
|
||||||
|
text: '运行设备统计',
|
||||||
|
subtext: '趋势图',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ["龙华区","福田区","龙岗区","南山区"]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [150, 230, 224, 218, 135],
|
||||||
|
type: 'line'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [150, 230, 224, 218, 135],
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var pieDom = document.getElementById('pie');
|
||||||
|
var pieChart = echarts.init(pieDom);
|
||||||
|
var pieOption;
|
||||||
|
|
||||||
|
pieOption = {
|
||||||
|
title: {
|
||||||
|
text: '运行设备统计',
|
||||||
|
subtext: '比例图',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '70%',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'inner',
|
||||||
|
textStyle:{
|
||||||
|
fontWeight:300,
|
||||||
|
fontSize:16,
|
||||||
|
color:"#fff"
|
||||||
|
},
|
||||||
|
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [ { value: 1048, name: '龙华区' },
|
||||||
|
{ value: 735, name: '龙岗区' },
|
||||||
|
{ value: 580, name: '南山区' },
|
||||||
|
{ value: 484, name: '福田区' },
|
||||||
|
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
var StackedareaDom = document.getElementById('stacked-area');
|
||||||
|
var StackedareaChart = echarts.init(StackedareaDom);
|
||||||
|
var StackedareaOption;
|
||||||
|
|
||||||
|
StackedareaOption = {
|
||||||
|
title: {
|
||||||
|
// text: '数据上报统计图',
|
||||||
|
// left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
// feature: {
|
||||||
|
// saveAsImage: {}
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Email',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Union Ads',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Video Ads',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Direct',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Search Engine',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// this.request("http://localhost:8002/echarts").then(res=>{
|
||||||
|
// console.log(res.data);
|
||||||
|
// charOption.series[0].data=res.data;
|
||||||
|
// charOption.series[1].data=res.data;
|
||||||
|
// this.total=res.data[4];
|
||||||
|
myChart.setOption(charOption);
|
||||||
|
|
||||||
|
// pieOption.series[0].data=[
|
||||||
|
// {name:"第一季度",value:res.data[0]},
|
||||||
|
// {name:"第二季度",value:res.data[1]},
|
||||||
|
// {name:"第三季度",value:res.data[2]},
|
||||||
|
// {name:"第四季度",value:res.data[3]}
|
||||||
|
// ];
|
||||||
|
pieChart.setOption(pieOption);
|
||||||
|
// })
|
||||||
|
|
||||||
|
StackedareaChart.setOption(StackedareaOption);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user