224 lines
4.5 KiB
Vue
224 lines
4.5 KiB
Vue
<template>
|
||
<el-main>
|
||
<el-row :gutter="15">
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option2"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option3"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option4"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option5"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :lg="8">
|
||
<el-card shadow="never">
|
||
<scEcharts height="300px" :option="option6"></scEcharts>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</template>
|
||
|
||
<script>
|
||
import scEcharts from '@/components/scEcharts';
|
||
|
||
/**
|
||
* 引入组件 @/components/scEcharts
|
||
* 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
|
||
* 支持props包括 height，width，option
|
||
* 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
|
||
*/
|
||
|
||
export default {
|
||
name: 'chart',
|
||
components: {
|
||
scEcharts
|
||
},
|
||
data() {
|
||
return {
|
||
option: {
|
||
title: {
|
||
text: '管棒日合格率',
|
||
// subtext: '',
|
||
},
|
||
grid: {
|
||
top: '80px'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'bar',
|
||
barWidth: '15px',
|
||
},
|
||
{
|
||
data: [110, 180, 120, 120, 60, 90, 110],
|
||
type: 'bar',
|
||
barWidth: '15px',
|
||
}]
|
||
},
|
||
option2: {
|
||
title: {
|
||
text: 'AVG日合格率',
|
||
// subtext: '',
|
||
},
|
||
grid: {
|
||
top: '80px'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'line',
|
||
},
|
||
{
|
||
data: [110, 180, 120, 120, 60, 90, 110],
|
||
type: 'line',
|
||
}]
|
||
},
|
||
option3: {
|
||
title: {
|
||
text: '棒不合格统计',
|
||
// subtext: '',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '60%'],
|
||
label: false,
|
||
data: [
|
||
{value: 1048, name: '搜索引擎'},
|
||
{value: 735, name: '直接访问'},
|
||
{value: 580, name: '邮件营销'},
|
||
{value: 484, name: '联盟广告'},
|
||
{value: 300, name: '视频广告'}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
option4: {
|
||
title: {
|
||
text: '管棒月合格率',
|
||
// subtext: '',
|
||
},
|
||
grid: {
|
||
top: '80px'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'bar',
|
||
barWidth: '15px',
|
||
},
|
||
{
|
||
data: [110, 180, 120, 120, 60, 90, 110],
|
||
type: 'bar',
|
||
barWidth: '15px',
|
||
}]
|
||
},
|
||
option5: {
|
||
title: {
|
||
text: 'AVG月合格率',
|
||
// subtext: '',
|
||
},
|
||
grid: {
|
||
top: '80px'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'line',
|
||
},
|
||
{
|
||
data: [110, 180, 120, 120, 60, 90, 110],
|
||
type: 'line',
|
||
}]
|
||
},
|
||
option6: {
|
||
title: {
|
||
text: '管不合格统计',
|
||
// subtext: '',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['50%', '60%'],
|
||
label: false,
|
||
data: [
|
||
{value: 1048, name: '搜索引擎'},
|
||
{value: 735, name: '直接访问'},
|
||
{value: 580, name: '邮件营销'},
|
||
{value: 484, name: '联盟广告'},
|
||
{value: 300, name: '视频广告'}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|