File was renamed from admin-web/src/views/dashboard/components/GDLX.vue |
| | |
| | | <template> |
| | | <div style="width: 100%"> |
| | | <div id="main3" /> |
| | | <p style="text-align: center;font-size: 16px;font-weight: 600">工单类型</p> |
| | | <el-card class="box-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="font-18 font-bold">类别数量统计</span> |
| | | </div> |
| | | <div id="LBSLTJ" style="height: 300px"/> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import * as echarts from 'echarts'; |
| | | import * as dash from "@/api/dashboard/dash"; |
| | | |
| | | export default { |
| | | name: 'GDLX', |
| | | name: 'LBSLTJ', |
| | | props: { |
| | | activeId: { |
| | | type: String, |
| | |
| | | }, |
| | | mounted() { |
| | | this.getCenterLine(); |
| | | // 监听屏幕宽度变化:当浏览器发生resize事件的时候,触发echart的resize事件,重绘canvas |
| | | window.addEventListener('resize', () => { |
| | | this.changeWidth(); |
| | | }); |
| | | }, |
| | | methods: { |
| | | |
| | | getCenterLine() { |
| | | // getCenterLine({ |
| | | // id: this.activeId, |
| | |
| | | // endDay: this.value2 ? this.value2[1] : null |
| | | // }).then(res => { |
| | | // const data = res.data |
| | | var chartDom = document.getElementById('main3'); |
| | | var chartDom = document.getElementById('LBSLTJ'); |
| | | this.myChart = echarts.init(chartDom); |
| | | // 监听屏幕宽度变化:当浏览器发生resize事件的时候,触发echart的resize事件,重绘canvas |
| | | window.addEventListener('resize', () => { |
| | | this.changeWidth(); |
| | | }); |
| | | this.options = { |
| | | color: [ '#1877FF','#5EDEA5','#F7BE12','#55C6E1','#ED653B'], |
| | | tooltip: { |
| | |
| | | type: 'shadow', |
| | | }, |
| | | }, |
| | | |
| | | // toolbox: { |
| | | // show: true, |
| | | // orient: 'vertical', |
| | | // left: 'right', |
| | | // top: 'center', |
| | | // feature: { |
| | | // mark: { show: true }, |
| | | // dataView: { show: true, readOnly: false }, |
| | | // magicType: { show: true, type: ['line', 'bar', 'stack'] }, |
| | | // restore: { show: true }, |
| | | // saveAsImage: { show: true }, |
| | | // }, |
| | | // }, |
| | | |
| | | legend: { |
| | | orient: 'vertical', |
| | | right: 0, |
| | | top: 60, |
| | | bottom: 20, |
| | | }, |
| | | series: [ |
| | | { |
| | | |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%','65%'], |
| | | minAngle: 2, // 最小的扇区角度(0~360),用于防止某个值过小导致扇区太小影响交互 |
| | | avoidLabelOverlap: true, // 是否启用防止标签重叠策略 |
| | | itemStyle: { |
| | |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '计划工单' }, |
| | | { value: 735, name: '故障工单' }, |
| | | { value: 580, name: '日常工单' }, |
| | | { value: 100, name: '等级一' }, |
| | | { value: 100, name: '等级二' }, |
| | | { value: 100, name: '等级三' }, |
| | | |
| | | ] |
| | | }] |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | #main3 { |
| | | #main2 { |
| | | width: 100%; |
| | | height: 300px; |
| | | } |