Skip to content

W
web
Commit b009c13c authored by 高滢's avatar 高滢
Browse files
Options

feat(首页): 标准分类

parent bfb9a14f
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 1 deletion
src/main.js
View file @ b009c13c
......@@ -129,6 +129,10 @@ import VueApollo from 'vue-apollo'
// 全局使用
Vue.use(VueApollo);
// 全局导入Echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 请求graphql使用的apollo API
const apolloClient = new ApolloClient({
// 服务端Url
......
src/views/echartHome/standardClassification.vue 0 → 100644
View file @ b009c13c
<template>
<div ref="chart" style="width: 100%; height: 300px"></div>
</template>
<script>
export default {
name: 'StandardClassification',
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
// 3.配置数据
const option = {
title: {
text: '标准分类占比',
left: 10,
top: 10,
textStyle: {
color: '#606266',
fontWeight: 700,
fontSize: 16
}
},
legend: {
top: 'bottom'
},
color: ['#F6B24B', '#1A6FD7', '#13BE24'],
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: ['40%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 10
},
label: {
formatter: `{b|{b}}\n\n{d}`, // 自定义lable处展示那些数据及其格式
fontSize: 14, // 字体大小
rich: {
b: {
color: ' #606266',
fontSize: 14
}
},
color: 'inherit'
},
labelLine: {
length: 25, // 挨着图例的直线的长度
length2: 10 // 挨着文字的直线的长度
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' }
]
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
src/views/index.vue
View file @ b009c13c
<template>
<div>HomePage</div>
<page-standard>
<el-row :gutter="20">
<el-col :span="8">
<div class="cardOne">
<div class="left">
<ul>
<li style="color: #278ce9">
<div class="textLayout">
<span class="cardOneTitle">支持标准数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #f96f21">
<div class="textLayout">
<span class="cardOneTitle">任务数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #13be24">
<div class="textLayout">
<span class="cardOneTitle">检验员数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #e88069">
<div class="textLayout">
<span class="cardOneTitle">整车样品数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #7f69e8">
<div class="textLayout">
<span class="cardOneTitle">测试类型数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
</ul>
</div>
<div class="right">
<ul>
<li style="color: #12cdaa">
<div class="textLayout">
<span class="cardOneTitle">测试用例数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #f9a221">
<div class="textLayout">
<span class="cardOneTitle">检验报告数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #e55868">
<div class="textLayout">
<span class="cardOneTitle">车企数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #278ce9">
<div class="textLayout">
<span class="cardOneTitle">零部件样品数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
<li style="color: #41d1ff">
<div class="textLayout">
<span class="cardOneTitle">测试场景数量</span
><span class="cardOneNumber">319</span>
</div>
</li>
</ul>
</div>
</div>
</el-col>
<el-col :span="5">
<div class="cardStyle">
<StandardClassification></StandardClassification>
</div>
</el-col>
<el-col :span="6">
<div>3</div>
</el-col>
<el-col :span="5">
<div>4</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="14">
<div>5</div>
</el-col>
<el-col :span="10">
<el-row>
<el-col :span="24">
<div>6</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div>7</div>
</el-col>
</el-row>
</el-col>
</el-row>
</page-standard>
</template>
<script>
import StandardClassification from './echartHome/standardClassification.vue'
export default {
name: 'HomePage',
components: { StandardClassification },
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.cardStyle {
border: 1px solid #dcdfe3;
border-radius: 4px;
}
.cardOne {
height: 300px;
display: flex;
justify-content: space-between;
padding: 20px 30px;
border: 1px solid #dcdfe3;
border-radius: 4px;
.left {
}
.right {
}
}
.cardOneTitle {
font-size: 14px;
font-weight: 400;
color: #606266;
}
.cardOneNumber {
font-size: 18px;
font-weight: 400;
color: #303133;
}
.textLayout {
width: 180px;
display: flex;
justify-content: space-between;
margin: 20px 0;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment