| | |
| | | <div class="progressChart"> |
| | | <div class="chart" id="progressChart" ref="chartRef"></div> |
| | | <el-link class="bottom le-0-font" :underline="false" @click="handleDetail(routerPath)"> |
| | | <label >{{ bottomTitle }}</label> |
| | | <label>{{ bottomTitle }}</label> |
| | | </el-link> |
| | | </div> |
| | | </template> |
| | |
| | | // 设置背景圆环样式 |
| | | 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, |
| | |
| | | .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> |