123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <!--
- * @Author: your name
- * @Date: 2025-01-15 15:49:57
- * @LastEditTime: 2025-03-13 16:25:02
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultUntal.vue
- -->
- <template>
- <div>
- <div ref="chart" style="width: 100%; height: 400px"></div>
- </div>
- </template>
- <script>
- import Plotly from "plotly.js-dist";
- export default {
- name: "faultAll",
- props: {
- faultTypes: {
- type: Array,
- default: [],
- }, // 故障机组
- faultCounts: {
- type: Array,
- default: [],
- }, // 故障次数
- faultDurations: {
- type: Array,
- default: [],
- }, // 故障时长
- fenFaultCsvData: {
- type: Array,
- default: [],
- },
- },
- watch: {
- faultCounts: {
- deep: true,
- handler(v) {
- console.log(this.faultDurations, this.faultTypes);
- this.renderChart();
- },
- },
- },
- mounted() {
- this.renderChart();
- },
- methods: {
- renderChart() {
- // 故障次数的散点图数据(左侧 Y 轴)
- const scatterFaultCounts = {
- x: this.faultTypes.slice(0, 10),
- y: this.faultCounts.slice(0, 10),
- mode: "markers", // 散点图
- marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
- name: "故障次数",
- hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 分钟<br>",
- };
- // 故障时长的散点图数据(右侧 Y 轴)
- const scatterFaultDurations = {
- x: this.faultTypes.slice(0, 10),
- y: this.faultDurations.slice(0, 10),
- mode: "markers", // 散点图
- marker: { color: "#1A295D", size: 10 }, // 红色散点
- name: "故障时长",
- yaxis: "y2", // 使用第二个 Y 轴(右侧)
- hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
- };
- // 布局配置,设置双 Y 轴
- const layout = {
- title: "机组故障次数与时长分析Top10",
- xaxis: {
- title: "故障机组",
- tickangle: 30,
- tickmode: "array",
- tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
- ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
- tickfont: { size: 12 },
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- backgroundcolor: "#e5ecf6",
- },
- yaxis: {
- title: "故障次数",
- titlefont: { color: "#64ADC2" },
- tickfont: { color: "#64ADC2" },
- side: "left", // 左侧的 Y 轴
- showline: true,
- linecolor: "#64ADC2",
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- backgroundcolor: "#e5ecf6",
- },
- yaxis2: {
- title: "故障时长(秒)",
- titlefont: { color: "#1A295D" },
- tickfont: { color: "#1A295D" },
- overlaying: "y", // 在第一个 Y 轴上方绘制
- side: "right", // 右侧的 Y 轴
- position: 1, // 调整右侧轴的位置
- showline: true,
- // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
- // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
- linecolor: "#1A295D", // 设置右侧轴线颜色
- },
- plot_bgcolor: "#e5ecf6",
- gridcolor: "#fff",
- bgcolor: "#e5ecf6", // 设置背景颜色
- showlegend: false, // 显示图例
- margin: {
- t: 80, // 上边距
- b: 150, // 下边距,给 X 轴标签更多空间
- },
- };
- // 渲染图表
- Plotly.newPlot(
- this.$refs.chart,
- [scatterFaultCounts, scatterFaultDurations],
- layout
- );
- },
- },
- };
- </script>
- <style scoped>
- /* 你可以根据需要添加样式 */
- </style>
|