| | |
| | | }); |
| | | const chartRef = ref(null); |
| | | let { chart: lineChart } = useEchartsResize(chartRef); |
| | | const keyMapping = { |
| | | 飞行时长: 'total_flight_time', |
| | | 飞行里程: 'total_flight_distance', |
| | | // 任务成果: 'event_num', |
| | | }; |
| | | // const keyMapping = { |
| | | // '飞行时长': 'total_flight_time', |
| | | // '飞行里程': 'total_flight_distance', |
| | | // // 任务成果: 'event_num', |
| | | // }; |
| | | const unitMap = { |
| | | 飞行时长: '小时', |
| | | 飞行里程: '公里', |
| | | '飞行时长': '小时', |
| | | '飞行里程': '公里', |
| | | |
| | | }; |
| | | const flyTypeList = ref([ |
| | |
| | | }); |
| | | var option = { |
| | | tooltip: { |
| | | trigger: 'item', |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow', |
| | | type: 'shadow' |
| | | }, |
| | | // position: 'top' |
| | | |
| | | }, |
| | | grid: { |
| | | left: '2%', |
| | | right: '4%', |
| | | bottom: '14%', |
| | | top: '16%', |
| | | top: '9%', |
| | | containLabel: true, |
| | | }, |
| | | legend: { |
| | | data: ['飞行时长', '飞行里程'], |
| | | left: 'center', |
| | | top: '5%', |
| | | color: '#383838', // 直接配置颜色 |
| | | // top: '5%', |
| | | color: '#383838', |
| | | itemWidth: 15, |
| | | itemHeight: 10, |
| | | itemGap: 25, |
| | |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | interval: 0, |
| | | // interval: 0, |
| | | color: '#383838', |
| | | }, |
| | | }, |
| | |
| | | nameTextStyle: { |
| | | color: '#383838', |
| | | fontSize: '1.2rem', |
| | | // padding: [0, 0, 14, 0] |
| | | |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | |
| | | nameTextStyle: { |
| | | color: '#383838', |
| | | fontSize: '1.2rem', |
| | | // padding: [0, 0, 14, 0] |
| | | }, |
| | | |
| | | |
| | |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '飞行时长', |
| | | type: 'bar', |
| | | barWidth: '8px', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#91C1FF' }, |
| | | { offset: 1, color: '#2970FF' }, |
| | | ]), |
| | | borderRadius: 4, |
| | | }, |
| | | data: flight_time, |
| | | }, |
| | | |
| | | // {//柱底圆片 |
| | | // name: "", |
| | | // type: "pictorialBar", |
| | | // symbolSize: [8, 10],//调整截面形状 |
| | | // symbolOffset: [0, 5], |
| | | // z: 12, |
| | | // itemStyle: { |
| | | // "normal": { |
| | | // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
| | | // offset: 0, |
| | | // "color": "#91C1FF" |
| | | // }, |
| | | // { |
| | | // offset: 1, |
| | | // "color": "#2970FF" |
| | | // } |
| | | // ],false) |
| | | // } |
| | | // }, |
| | | // data: flight_time, |
| | | // }, |
| | | |
| | | //柱体 |
| | | { |
| | | name: '飞行时长', |
| | | type: 'bar', |
| | | barWidth: '8px', |
| | | itemStyle: { |
| | | |
| | | "normal": { |
| | | "color": { |
| | | "x": 0, |
| | | "y": 0, |
| | | "x2": 0, |
| | | "y2": 1, |
| | | "type": "linear", |
| | | "global": false, |
| | | "colorStops": [{//第一节下面 |
| | | "offset": 0, |
| | | "color": "#91C1FF" |
| | | }, { |
| | | "offset": 1, |
| | | "color": "#2970FF" |
| | | }] |
| | | } |
| | | } |
| | | }, |
| | | data: flight_time, |
| | | }, |
| | | |
| | | //柱顶圆片 |
| | | { |
| | | name: '', |
| | | type: "pictorialBar", |
| | | tooltip: { show: false }, |
| | | symbolSize: [8, 8],//调整截面形状 |
| | | symbolOffset: [0, -3], |
| | | z: 12, |
| | | symbolPosition: "end", |
| | | "itemStyle": { |
| | | "normal": { |
| | | color: new echarts.graphic.LinearGradient(0,0,0,1, |
| | | [{ |
| | | offset: 0, |
| | | color: "#9DC9FD" |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: "#3279FA" |
| | | } |
| | | ], |
| | | false |
| | | ), |
| | | } |
| | | }, |
| | | data: flight_time, |
| | | }, |
| | | { |
| | | name: '飞行里程', |
| | | type: 'line', |
| | |
| | | lineStyle: { |
| | | width: 2, |
| | | type: 'solid', |
| | | color: '#01D0A7', |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 6, |
| | | lineStyle: { |
| | | color: '#01D0A7', |
| | | areaStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { |
| | | offset: 0, |
| | | color: 'rgba(1,208,167,0.4) ' |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: 'rgba(1,208,167,0) ' |
| | | } |
| | | ]) |
| | | }, |
| | | data: flight_distance, |
| | | }, |
| | |
| | | padding: 4px 14px 0 15px; |
| | | background: #ffffff !important; |
| | | margin-top: 5px; |
| | | height: pxToVh(400); |
| | | height: pxToVh(471); |
| | | |
| | | .fytitle { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .flycenter { |
| | | margin-top: 13px; |
| | | margin-top: 8px; |
| | | |
| | | .centerBox { |
| | | display: flex; |
| | |
| | | padding: 7px 7px 0 15px; |
| | | width: 196px; |
| | | flex: 1; |
| | | // height: 80px; |
| | | height: pxToVh(80); |
| | | height: 41px; |
| | | //height: pxToVh(41); |
| | | background: #f6f8fe; |
| | | box-shadow: 0px 5px 4px 0px #ebf1ff; |
| | | border-radius: 8px 8px 8px 8px; |
| | | border: 1px solid #ffffff; |
| | | margin-right: 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | img { |
| | | width: 15px; |
| | |
| | | } |
| | | |
| | | .flydata { |
| | | margin-top: 10px; |
| | | margin-left: 11px; |
| | | text-align: right; |
| | | font-size: 14px; |
| | | color: #7c8091; |
| | |
| | | } |
| | | |
| | | .lineChart { |
| | | height: pxToVh(233) ; |
| | | height: pxToVh(374) ; |
| | | width: 100%; |
| | | |
| | | .lineBox { |
| | | width: 100%; |
| | | height: 100%; |