可视化测试页面
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="timestamp" label="时间戳"></el-table-column>
|
||||
</el-table>
|
||||
<el-container style="height: 400px;">
|
||||
<el-chart :options="chartOptions" ref="myChart"></el-chart>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,9 +35,27 @@
|
||||
logs: [ // 这里可以根据需要从后台获取真实数据
|
||||
{ id: 1, message: "日志1", timestamp: "2024-01-05 10:30: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: {
|
||||
fetchLogs() {
|
||||
// 模拟从后端获取日志数据的过程
|
||||
@ -57,7 +78,11 @@
|
||||
// 将返回的日志数据赋值给logs数组
|
||||
this.logs = response.data;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
renderChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart)
|
||||
myChart.setOption(this.chartOptions)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
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