中建四局(CIM+)：完成模型内审布局
This commit is contained in:
Jack
parent
dac68308e8
commit
50e23bcf27
154
src/views/projectAdmin/common/jChart/bar/JBarChart.vue
Normal file
154
src/views/projectAdmin/common/jChart/bar/JBarChart.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="j-bar-chart" ref="jBarChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: ''
|
||||
})
|
||||
},
|
||||
tooltip: {
|
||||
type: Object,
|
||||
default: () => ({ show: false })
|
||||
},
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['15%', '2%', '2%', '2%']
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#5EC2D0', '#61D2B9', '#F67F51', '#7851F6']
|
||||
},
|
||||
xData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
yData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jBarChart = echarts.init(this.$refs.jBarChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { jBarChart: null }
|
||||
},
|
||||
watch:{
|
||||
xData:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
},
|
||||
yData:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, tooltip, grid, color, xData, yData, series } = this
|
||||
const configSeries = (series => {
|
||||
if (series.length) {
|
||||
return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
|
||||
} else {
|
||||
return [{ data: yData, type: 'bar', barWidth: 15 }]
|
||||
}
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
fontSize: '14px',
|
||||
color: '#5EC2D0',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip,
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
color,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#323D50'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: configSeries
|
||||
}
|
||||
this.jBarChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-bar-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
139
src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
Normal file
139
src/views/projectAdmin/common/jChart/bar/JProgressChart.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="j-progress-chart" ref="JProgressChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['10', '8%', '10', '10']
|
||||
},
|
||||
seriesData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
yData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.JProgressChart = echarts.init(this.$refs.JProgressChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { JProgressChart: null }
|
||||
},
|
||||
watch:{
|
||||
seriesData:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { grid, seriesData, yData } = this
|
||||
const max = Math.max(...seriesData)
|
||||
const maxData = seriesData.map(item => max)
|
||||
const option = {
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: () => ''
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: yData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#4A90E2' },
|
||||
{ offset: 1, color: '#4ADEE2' }
|
||||
]),
|
||||
barBorderRadius: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: 'white',
|
||||
textStyle: {
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
data: seriesData,
|
||||
barWidth: 13
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
barBorderRadius: 3
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// color: 'white',
|
||||
// textStyle: {
|
||||
// fontSize: 15
|
||||
// }
|
||||
// },
|
||||
barGap: '-100%',
|
||||
barCategoryGap: '40%',
|
||||
data: maxData,
|
||||
barWidth: 13,
|
||||
animation: false
|
||||
}
|
||||
]
|
||||
}
|
||||
this.JProgressChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-progress-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
165
src/views/projectAdmin/common/jChart/line/JLineChart.vue
Normal file
165
src/views/projectAdmin/common/jChart/line/JLineChart.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="j-line-chart" ref="JLineChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({ text: '' })
|
||||
},
|
||||
grid: {
|
||||
type: Array,
|
||||
default: () => ['12%', '2%', '6%', '1%']
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#FAC915', '#ff6c7f', '#6ee4f0', '#F67F51', '#7851F6']
|
||||
},
|
||||
xData: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
series: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => [{}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.JLineChart = echarts.init(this.$refs.JLineChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return { JLineChart: null }
|
||||
},
|
||||
watch: {
|
||||
xData: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
series: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.createChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, grid, color, xData, series } = this
|
||||
|
||||
const fmtSeries = (series => {
|
||||
return series.map(item => ({
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: item.data,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.areaColor[0] },
|
||||
{ offset: 1, color: item.areaColor[1] }
|
||||
])
|
||||
},
|
||||
showSymbol: item.showSymbol,
|
||||
itemStyle: {
|
||||
emphasis: item.emphasis
|
||||
}
|
||||
}))
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
fontSize: '14px',
|
||||
color: '#5EC2D0',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: 20,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: grid[0],
|
||||
right: grid[1],
|
||||
bottom: grid[2],
|
||||
left: grid[3],
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
color,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, .8)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#364252'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, .8)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#787E8A'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: [5, 10],
|
||||
color: '#364252'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: fmtSeries
|
||||
}
|
||||
this.JLineChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-line-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
108
src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
Normal file
108
src/views/projectAdmin/common/jChart/pie/JNestedRingChart.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: '',
|
||||
subTitle: '',
|
||||
x: '48%',
|
||||
y: '36%'
|
||||
})
|
||||
},
|
||||
legend: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
series: {
|
||||
required: true,
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
||||
this.createChart()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jNestedRingChart: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createChart() {
|
||||
const { title, legend, series } = this
|
||||
const setSeries = (series => {
|
||||
return series.map(item => ({
|
||||
type: 'pie',
|
||||
label: false,
|
||||
center: ['50%', '50%'],
|
||||
radius: item.radius || ['65%', '80%'],
|
||||
roseType: item.roseType,
|
||||
color: item.color,
|
||||
data: item.data
|
||||
}))
|
||||
})(series)
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: title.text,
|
||||
subtext: title.subTitle,
|
||||
x: title.x || '49%',
|
||||
y: title.y || '40%',
|
||||
show: true,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
show: legend.show === false ? false : true,
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 50,
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
selectedMode: false,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: legend.formatter
|
||||
},
|
||||
series: setSeries
|
||||
}
|
||||
this.jNestedRingChart.setOption(option)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
series() {
|
||||
this.createChart()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-nested-ring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
123
src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
Normal file
123
src/views/projectAdmin/common/jChart/pie/JProblemChart.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<!-- 质量问题 -->
|
||||
<div class="myChart" ref="myChart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: "",
|
||||
subTitle: "",
|
||||
x: "48%",
|
||||
y: "36%"
|
||||
})
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [{ value: 1, name: "" }]
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.initMyChart();
|
||||
},
|
||||
methods: {
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
const option = {
|
||||
title: {
|
||||
x: this.title.x || "29%",
|
||||
y: this.title.y || "43%",
|
||||
show: true,
|
||||
text: this.title.text,
|
||||
subtext: this.title.subTitle,
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "normal",
|
||||
color: "#fff"
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: "normal",
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
right: 50,
|
||||
top: "center",
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
selectedMode: true,
|
||||
icon: "circle",
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: this.color,
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["30%", "25%"],
|
||||
center: ["30%", "50%"],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
// x:'-20%',
|
||||
color: ["#07162b", "#244e92", "#07162b", "#244e92"],
|
||||
data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["50%", "65%"],
|
||||
center: ["30%", "50%"],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: "20",
|
||||
color: "#fff",
|
||||
fontWeight: "bold"
|
||||
},
|
||||
scaleSize: 12
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
114
src/views/projectAdmin/common/jChart/pie/JRingChart.vue
Normal file
114
src/views/projectAdmin/common/jChart/pie/JRingChart.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="j-ring-chart" ref="jRingChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => [{ value: 1, name: '' }]
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
|
||||
},
|
||||
title: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
text: '',
|
||||
subTitle: '',
|
||||
x: '48%',
|
||||
y: '36%'
|
||||
})
|
||||
},
|
||||
radius: {
|
||||
type: Array,
|
||||
default: () => ['65%', '80%']
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createRingChart()
|
||||
},
|
||||
watch:{
|
||||
data:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createRingChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
immediate:true,
|
||||
},
|
||||
title:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != oldVal){
|
||||
this.createRingChart();
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
immediate:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createRingChart() {
|
||||
const jRingChart = echarts.init(this.$refs.jRingChart)
|
||||
const { title } = this
|
||||
const option = {
|
||||
color: this.color,
|
||||
title: {
|
||||
show: true,
|
||||
text: title.text,
|
||||
x: title.x || '48%',
|
||||
y: title.y || '36%',
|
||||
z: 5,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: 20
|
||||
},
|
||||
subtext: title.subTitle,
|
||||
subtextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: 0
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: this.radius,
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
console.log(option, '草')
|
||||
jRingChart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.j-ring-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,74 @@
|
||||
<template>
|
||||
<Card title="模型内审">
|
||||
模型内审
|
||||
<div class="chart">
|
||||
<JNestedRingChart :title="{ text: '33', subTitle: '问题总数' }" :series="series" :legend="{ show: false }" />
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item">未查看</div>
|
||||
<div class="legend-item">未解决</div>
|
||||
<div class="legend-item">已解决</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import JNestedRingChart from '../../common/jChart/pie/JNestedRingChart.vue'
|
||||
export default {
|
||||
components: { Card }
|
||||
components: { Card, JNestedRingChart },
|
||||
data() {
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
roseType: 'area',
|
||||
radius: ['58%', '52%'],
|
||||
color: ['#0B1B35', '#4A8C9C'],
|
||||
data: [30, 40, 30, 40]
|
||||
},
|
||||
{
|
||||
radius: ['65%', '82%'],
|
||||
color: ['#E86129', '#FFC303', '#6EE4F0'],
|
||||
data: [
|
||||
{ value: 11, name: '未查看' },
|
||||
{ value: 11, name: '未解决' },
|
||||
{ value: 11, name: '已解决' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
height: 70%;
|
||||
}
|
||||
.legend {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
margin-right: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:nth-child(1)::before {
|
||||
background-color: #e86129;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
background-color: #ffc303;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
background-color: #6ee4f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user