<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2022-09-06 13:42:45 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2022-10-07 17:39:34 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="first-wrapper flex"> <Title text="感知设备数量" /> <div class="two"> <Chars :options="options" /> </div> </div> </template> <script> import Title from "@/views/indexComponents/allComponents/Title"; import Chars from "@/components/allCharsCom/Chars"; export default { name: "", components: { Title, Chars, }, data() { return { options: { xAxis: { show: true, type: "value", lineStyle: { color: "#ffffff", type: "dashed", }, axisTick: { show: true, }, axisLine: { show: true, lineStyle: { color: "rgba(19, 135, 167, 1)", }, }, // 是否显示刻度延长线 splitLine: { show: false, }, min: 0, max: 40, // 文字样式 axisLabel: { show: true, color: "#ffffff", }, }, yAxis: [ { type: "category", data: [ "工业探测器", "压力探测器", "液位探测器", "温度变送器", "视频监控", ].reverse(), // 轴线样式 axisLine: { show: false, lineStyle: { color: "rgba(19, 135, 167, 1)", }, }, // 文字样式 axisLabel: { color: "#ffffff", }, // 刻度延长线样式 splitLine: { show: true, lineStyle: { color: "rgba(19, 135, 167, .5)", type: "dashed", }, }, //刻度 axisTick: { show: false, }, }, // 最右边的y轴 // { // type: "category", // name: "right", // data: [70, 108, 65, 93, 105].reverse(), // position: "right", // show: true, // axisLabel: { // formatter: "{value} 次", // }, // axisLine: { // show: false, // lineStyle: { // color: "#ffffff", // }, // }, // axisTick: { // show: false, // }, // }, ], // 位置与大小 grid: { left: "20%", right: "10%", top: "2%", bottom: "10%", }, series: [ { // realtimeSort: true, // 是否显示底黑 showBackground: true, backgroundStyle: { color: "rgba(0, 0, 0, 1)", borderRadius: [0, 3, 3, 0], }, barWidth: 15, name: "X", type: "bar", data: [28, 7, 7, 7, 9].reverse(), // data: [20, 7, 7, 7, 9], // 柱形样式 itemStyle: { color: "rgba(45, 207, 255, 1)", borderRadius: [0, 3, 3, 0], }, // 跟随文字 label: { show: true, position: "right", color: "#ffffff", valueAnimation: true, formatter: "{c} 个", }, }, ], }, }; }, methods: {}, }; </script> <style lang="scss" scoped> .first-wrapper { width: 100%; height: 33.86%; // background: blue; flex-direction: column; > div { // width: 100%; } .two { flex: 1; // background: wheat; } } </style>