96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
|
<div class="j-nested-ring-chart" ref="jNestedRingChart"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts4'
|
|
export default {
|
|
props: {},
|
|
mounted() {
|
|
this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
|
|
this.createChart()
|
|
},
|
|
data() {
|
|
return {
|
|
jNestedRingChart: null
|
|
}
|
|
},
|
|
methods: {
|
|
createChart() {
|
|
const { title } = this
|
|
const option = {
|
|
title: {
|
|
x: '29%',
|
|
y: '35%',
|
|
show: true,
|
|
text: 654,
|
|
subtext: '本周总任务',
|
|
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: false,
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
label: false,
|
|
color: ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0', 'red'],
|
|
radius: ['65%', '80%'],
|
|
center: ['30%', '50%'],
|
|
data: [
|
|
{ value: 45, name: '未戴安全帽' },
|
|
{ value: 5, name: '危险区域闯入' },
|
|
{ value: 15, name: '人员聚集报警' },
|
|
{ value: 10, name: '未穿反光衣' },
|
|
{ value: 45, name: '明火监测报警' },
|
|
{ value: 45, name: '烟雾监测报警' }
|
|
]
|
|
},
|
|
{
|
|
type: 'pie',
|
|
label: false,
|
|
roseType: 'area',
|
|
color: ['#0B1B35', '#244D8F'],
|
|
radius: ['58%', '54%'],
|
|
center: ['30%', '50%'],
|
|
data: [30, 40, 30, 40]
|
|
}
|
|
]
|
|
}
|
|
this.jNestedRingChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.j-nested-ring-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|