| | |
|---|
| | | <div class="ratio"> |
|---|
| | | 占比 |
|---|
| | | <span :style="{ color: item.color }" |
|---|
| | | >{{ ((item.rate * 100) / 100).toFixed(2) }}%</span |
|---|
| | | >{{ item.rate || 0 }}%</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | let { chart } = useEchartsResize(echartsRef); |
|---|
| | | const initChart = val => { |
|---|
| | | let totalNum = val[0].num //val.reduce((sum, item) => sum + item.num, 0); |
|---|
| | | let filteredData = val.filter(item => item.name !== "全部状态"); |
|---|
| | | const data = { |
|---|
| | | total: { |
|---|
| | | title: '总计', |
|---|
| | | figure: totalNum.toString(), // 动态计算总数 |
|---|
| | | }, |
|---|
| | | data: val.map(item => ({ |
|---|
| | | data: filteredData.map(item => ({ |
|---|
| | | value: item.num, |
|---|
| | | name: item.name, |
|---|
| | | rate: _.round((item.num/totalNum)*100, 1), |
|---|
| | |
|---|
| | | const containerWidth = chart.value.clientWidth; |
|---|
| | | const isSmallScreen = containerWidth < 768; // 移动端判断 |
|---|
| | | const echartsOption = { |
|---|
| | | color: ['#FF472F', '#FF7411', '#FFC300', '#0291A1'], |
|---|
| | | color: ['#0291A1', '#FF7411', '#FFC300', '#FF472F'], |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'item', |
|---|
| | | padding: 0, |
|---|
| | |
|---|
| | | .card-item { |
|---|
| | | width: 94px; |
|---|
| | | height: 100%; |
|---|
| | | line-height: 28px; |
|---|
| | | // line-height: 28px; |
|---|
| | | cursor: pointer; |
|---|
| | | font-family: 'Source Han Sans CN'; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #7c8091; |
|---|
| | | border: 1px solid transparent; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-item:first-child { |
|---|
