| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-card shadow="never" class="aui-card--fill"> |
| 3 | <el-row style="height: 100vh;"> | |
| 4 | <el-col :span="15" style="height: 100vh;border: 1px solid #a6a6a6;"> | |
| 5 | <bar-line :option="chartOption"></bar-line> | |
| 6 | </el-col> | |
| 7 | <el-col :span="8" style="height: 100vh;border: 1px solid #a6a6a6;margin-left: 3vh;"> | |
| 8 | </el-col> | |
| 9 | </el-row> | |
| 10 | </el-card> | |
| 11 | </template> | |
| 12 | ||
| 13 | <script> | |
| 14 | import BarLine from "@/components/chart/bar-line.vue"; | |
| 15 | export default { | |
| 16 | data() { | |
| 17 | return { | |
| 18 | chartOption: {}, | |
| 19 | }; | |
| 20 | }, | |
| 21 | components: { BarLine }, | |
| 22 | mounted() { | |
| 23 | this.getchartOption(); | |
| 24 | }, | |
| 25 | methods: { | |
| 26 | getchartOption() { | |
| 27 | this.chartOption = { | |
| 28 | tooltip: { | |
| 29 | trigger: "axis", | |
| 30 | }, | |
| 31 | xAxis: { | |
| 32 | type: "category", | |
| 33 | boundaryGap: false, | |
| 34 | data: [ | |
| 35 | "Mon", | |
| 36 | "Tue", | |
| 37 | "Wed", | |
| 38 | "Thu", | |
| 39 | "Fri", | |
| 40 | "Sat", | |
| 41 | "Sun", | |
| 42 | "Mon", | |
| 43 | "Tue", | |
| 44 | "Wed", | |
| 45 | "Thu", | |
| 46 | ], | |
| 47 | }, | |
| 48 | yAxis: [ | |
| 49 | { | |
| 50 | type: "value", | |
| 51 | name: "生产量", | |
| 52 | min: 0, | |
| 53 | max: 250, | |
| 54 | position: "right", | |
| 55 | axisLine: { | |
| 56 | lineStyle: { | |
| 57 | color: "green", | |
| 58 | }, | |
| 59 | }, | |
| 60 | }, | |
| 61 | { | |
| 62 | type: "value", | |
| 63 | name: "外运量", | |
| 64 | min: 0, | |
| 65 | max: 250, | |
| 66 | position: "left", | |
| 67 | offset: 50, // y轴位置的偏移量 | |
| 68 | axisLine: { | |
| 69 | lineStyle: { | |
| 70 | color: "red", | |
| 71 | }, | |
| 72 | }, | |
| 73 | }, | |
| 74 | { | |
| 75 | type: "value", | |
| 76 | name: "入洗量", | |
| 77 | min: 0, | |
| 78 | max: 25, | |
| 79 | position: "left", | |
| 80 | axisLine: { | |
| 81 | lineStyle: { | |
| 82 | color: "blue", | |
| 83 | }, | |
| 84 | }, | |
| 85 | }, | |
| 86 | ], | |
| 87 | series: [ | |
| 88 | { | |
| 89 | name: "蒸发量", | |
| 90 | type: "line", | |
| 91 | data: [ | |
| 92 | 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, | |
| 93 | 3.3, | |
| 94 | ], | |
| 95 | }, | |
| 96 | { | |
| 97 | name: "降水量", | |
| 98 | type: "line", | |
| 99 | yAxisIndex: 1, // 对应的y轴的索引值(因为有多个y轴) | |
| 100 | data: [ | |
| 101 | 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, | |
| 102 | 2.3, | |
| 103 | ], | |
| 104 | }, | |
| 105 | { | |
| 106 | name: "平均温度", | |
| 107 | type: "line", | |
| 108 | yAxisIndex: 2, // 对应y轴的索引值(因为有多个y轴) | |
| 109 | data: [ | |
| 110 | 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, | |
| 111 | ], | |
| 112 | }, | |
| 113 | ], | |
| 114 | }; | |
| 115 | }, | |
| 116 | }, | |
| 117 | }; | |
| 118 | </script> | |
