| | |
| | | <!-- 进度条类型组件 --> |
| | | <div class="progressChart"> |
| | | <div class="chart" id="progressChart" ref="chartRef"></div> |
| | | <label class="bottom le-0-font">{{ bottomTitle }}</label> |
| | | <el-link class="bottom le-0-font" :underline="false" @click="handleDetail(routerPath)"> |
| | | <label>{{ bottomTitle }}</label> |
| | | </el-link> |
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | // 设置背景圆环样式 |
| | | lineStyle: { |
| | | width: 10, // 圆环宽度 |
| | | color: [[1, '#002865']] // 圆环背景色 |
| | | color: [[1, '#ecf6ff']] // 圆环背景色 |
| | | } |
| | | }, |
| | | // 仪表盘指针 |
| | |
| | | detail: { |
| | | // width: 50, |
| | | // height: 14, |
| | | fontSize: 14, |
| | | fontSize: 20, |
| | | color: 'auto' |
| | | }, |
| | | data: [ |
| | |
| | | detail: { |
| | | // 中心title设置 |
| | | offsetCenter: ['0%', '0%'], |
| | | color: '#01F8FF', |
| | | color: '#dedddd', |
| | | formatter: '{value}%' |
| | | // borderColor: '#01F8FF', |
| | | // borderRadius: 20, |
| | |
| | | type: [Number, String], |
| | | default: 0 |
| | | }, |
| | | routerPath: { |
| | | type: String, |
| | | default: '' |
| | | }, |
| | | bottomTitle: { |
| | | type: String, |
| | | default: '' |
| | | } |
| | | }, |
| | | methods: {}, |
| | | methods: { |
| | | handleDetail(routerUrl) { |
| | | this.$router.push({ |
| | | path: routerUrl, |
| | | }) |
| | | } |
| | | }, |
| | | created() { }, |
| | | mounted() { |
| | | let myChart = echarts.init(this.$refs['chartRef']) // 使用Id无法实现 |
| | |
| | | .progressChart { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | .chart { |
| | | width: 100%; |
| | | height: 75%; |
| | |
| | | .bottom { |
| | | display: inline-block; |
| | | width: 100%; |
| | | color: #01f8ff; |
| | | color: #dedddd; |
| | | text-align: center; |
| | | font-size: 16px; |
| | | font-size: 14px; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | </style> |