| | |
| | | const option = { |
| | | color: colors, |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: "cross", |
| | | label: { |
| | | backgroundColor: "red" |
| | | }, |
| | | lineStyle: { |
| | | color: "#9eb2cb" |
| | | } |
| | | } |
| | | show: false |
| | | }, |
| | | |
| | | legend: { |
| | | show: false, |
| | | top: "top", |
| | | left: "2%", |
| | | textStyle: { |
| | | color: "#000" |
| | | }, |
| | | itemHeight: 2, |
| | | data: ['预约数', '已进场', '已作业', '已离场'] |
| | | show: false |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | maxSize: '80%', |
| | | gap: 4, |
| | | label: { |
| | | show: false |
| | | }, |
| | | |
| | | itemStyle: { //去掉默认白色边框线 |
| | | borderWidth: 0, |
| | | borderColor: '#fff' |
| | | }, |
| | | data: [ |
| | | { value: 100, name: '预约数', }, |
| | | { value: 50, name: '已进场' }, |
| | | { value: 20, name: '已作业' }, |
| | | { value: 30, name: '已离场' }, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'funnel', |
| | | left: '15%', |
| | | right: '45%', |
| | | top: '10%', |
| | | bottom: '10%', |
| | | minSize: '80%', |
| | | maxSize: '80%', |
| | | gap: 4, |
| | | z: 1, |
| | | label: { |
| | | show: true, |
| | | position: 'outside', |
| | | formatter: '{a|{b}} {a|{c}%}', |
| | |
| | | } |
| | | }, |
| | | labelLine: { |
| | | length: 80, |
| | | lineStyle: { |
| | | width: 1, |
| | | type: 'dashed' |
| | | } |
| | | show: true, |
| | | normal: { |
| | | length: 80, |
| | | position: 'right', |
| | | lineStyle: { |
| | | width: 1, |
| | | type: 'dashed', |
| | | color: 'rgba(102, 160, 239,.5)' |
| | | } |
| | | }, |
| | | }, |
| | | itemStyle: { //去掉默认白色边框线 |
| | | borderWidth: 0, |
| | | borderColor: '#fff' |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: 'transparent', |
| | | borderWidth: 0, |
| | | opacity: 1 |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 100, name: '预约数', }, |
| | | { value: 50, name: '已进场' }, |
| | | { value: 20, name: '已作业' }, |
| | | { value: 30, name: '已离场' }, |
| | | |
| | | ] |
| | | }, |
| | | ] |
| | |
| | | margin: 0 20px 0; |
| | | width: 100%; |
| | | height: 222px; |
| | | |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | height: 33px; |
| | | color: #D2E0FF; |
| | | width: 100%; |
| | | |
| | | .time_wrap { |
| | | display: flex; |
| | | align-items: center; |
| | | width: 52px; |
| | | color: #FFFFFF; |
| | | |
| | | .time { |
| | | width: 40px; |
| | | height: 18px; |