| 1 |
- {"ast":null,"code":"import * as echarts from 'echarts';\nimport { getComplianceRate } from '@/api';\nexport default {\n name: 'ComplianceRing',\n data() {\n return {\n chart: null\n };\n },\n async mounted() {\n const res = await getComplianceRate();\n this.$nextTick(() => this.initChart(res.data));\n },\n beforeDestroy() {\n if (this.chart) this.chart.dispose();\n },\n methods: {\n initChart(data) {\n this.chart = echarts.init(this.$refs.chart);\n const option = {\n series: [{\n type: 'gauge',\n startAngle: 225,\n endAngle: -45,\n radius: '85%',\n center: ['50%', '55%'],\n min: 0,\n max: 100,\n progress: {\n show: true,\n width: 14,\n itemStyle: {\n color: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 1,\n y2: 0,\n colorStops: [{\n offset: 0,\n color: '#1e88e5'\n }, {\n offset: 0.5,\n color: '#00e5ff'\n }, {\n offset: 1,\n color: '#4caf50'\n }]\n }\n }\n },\n axisLine: {\n lineStyle: {\n width: 14,\n color: [[1, 'rgba(255,255,255,0.08)']]\n }\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n show: false\n },\n pointer: {\n show: false\n },\n title: {\n show: false\n },\n detail: {\n fontSize: 40,\n fontWeight: 'bold',\n color: '#fff',\n offsetCenter: [0, 0],\n formatter: '{value}%',\n fontFamily: 'Courier New'\n },\n data: [{\n value: data.rate\n }]\n }]\n };\n this.chart.setOption(option);\n }\n }\n};","map":{"version":3,"names":["echarts","getComplianceRate","name","data","chart","mounted","res","$nextTick","initChart","beforeDestroy","dispose","methods","init","$refs","option","series","type","startAngle","endAngle","radius","center","min","max","progress","show","width","itemStyle","color","x","y","x2","y2","colorStops","offset","axisLine","lineStyle","axisTick","splitLine","axisLabel","pointer","title","detail","fontSize","fontWeight","offsetCenter","formatter","fontFamily","value","rate","setOption"],"sources":["src/components/LabStats/ComplianceRing.vue"],"sourcesContent":["<template>\n <div class=\"panel-box compliance-ring\">\n <div class=\"panel-title\">安全合规率</div>\n <div class=\"panel-content\">\n <div ref=\"chart\" class=\"chart-area\"></div>\n </div>\n </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts'\nimport { getComplianceRate } from '@/api'\n\nexport default {\n name: 'ComplianceRing',\n data() {\n return { chart: null }\n },\n async mounted() {\n const res = await getComplianceRate()\n this.$nextTick(() => this.initChart(res.data))\n },\n beforeDestroy() {\n if (this.chart) this.chart.dispose()\n },\n methods: {\n initChart(data) {\n this.chart = echarts.init(this.$refs.chart)\n const option = {\n series: [\n {\n type: 'gauge',\n startAngle: 225,\n endAngle: -45,\n radius: '85%',\n center: ['50%', '55%'],\n min: 0,\n max: 100,\n progress: {\n show: true,\n width: 14,\n itemStyle: {\n color: {\n type: 'linear',\n x: 0, y: 0, x2: 1, y2: 0,\n colorStops: [\n { offset: 0, color: '#1e88e5' },\n { offset: 0.5, color: '#00e5ff' },\n { offset: 1, color: '#4caf50' }\n ]\n }\n }\n },\n axisLine: {\n lineStyle: {\n width: 14,\n color: [[1, 'rgba(255,255,255,0.08)']]\n }\n },\n axisTick: { show: false },\n splitLine: { show: false },\n axisLabel: { show: false },\n pointer: { show: false },\n title: { show: false },\n detail: {\n fontSize: 40,\n fontWeight: 'bold',\n color: '#fff',\n offsetCenter: [0, 0],\n formatter: '{value}%',\n fontFamily: 'Courier New'\n },\n data: [{ value: data.rate }]\n }\n ]\n }\n this.chart.setOption(option)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.compliance-ring {\n height: 100%;\n}\n.chart-area {\n width: 100%;\n height: 200px;\n}\n</style>\n"],"mappings":"AAUA,YAAAA,OAAA;AACA,SAAAC,iBAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MAAAC,KAAA;IAAA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAL,iBAAA;IACA,KAAAM,SAAA,YAAAC,SAAA,CAAAF,GAAA,CAAAH,IAAA;EACA;EACAM,cAAA;IACA,SAAAL,KAAA,OAAAA,KAAA,CAAAM,OAAA;EACA;EACAC,OAAA;IACAH,UAAAL,IAAA;MACA,KAAAC,KAAA,GAAAJ,OAAA,CAAAY,IAAA,MAAAC,KAAA,CAAAT,KAAA;MACA,MAAAU,MAAA;QACAC,MAAA,GACA;UACAC,IAAA;UACAC,UAAA;UACAC,QAAA;UACAC,MAAA;UACAC,MAAA;UACAC,GAAA;UACAC,GAAA;UACAC,QAAA;YACAC,IAAA;YACAC,KAAA;YACAC,SAAA;cACAC,KAAA;gBACAX,IAAA;gBACAY,CAAA;gBAAAC,CAAA;gBAAAC,EAAA;gBAAAC,EAAA;gBACAC,UAAA,GACA;kBAAAC,MAAA;kBAAAN,KAAA;gBAAA,GACA;kBAAAM,MAAA;kBAAAN,KAAA;gBAAA,GACA;kBAAAM,MAAA;kBAAAN,KAAA;gBAAA;cAEA;YACA;UACA;UACAO,QAAA;YACAC,SAAA;cACAV,KAAA;cACAE,KAAA;YACA;UACA;UACAS,QAAA;YAAAZ,IAAA;UAAA;UACAa,SAAA;YAAAb,IAAA;UAAA;UACAc,SAAA;YAAAd,IAAA;UAAA;UACAe,OAAA;YAAAf,IAAA;UAAA;UACAgB,KAAA;YAAAhB,IAAA;UAAA;UACAiB,MAAA;YACAC,QAAA;YACAC,UAAA;YACAhB,KAAA;YACAiB,YAAA;YACAC,SAAA;YACAC,UAAA;UACA;UACA3C,IAAA;YAAA4C,KAAA,EAAA5C,IAAA,CAAA6C;UAAA;QACA;MAEA;MACA,KAAA5C,KAAA,CAAA6C,SAAA,CAAAnC,MAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
