123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- <!--
- * @Author: your name
- * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-03-21 14:20:42
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
- -->
- <template>
- <div>
- <!-- 图表控制面板 -->
- <div style="display: flex; align-items: center">
- <div style="margin-right: 20px; display: flex; align-items: center">
- <el-color-picker
- size="small"
- v-model="color1"
- show-alpha
- @change="updateChartColor"
- ></el-color-picker>
- <span style="margin-left: 10px">自定义颜色</span>
- </div>
- <div>
- <el-button size="small" @click="toggleChartType">
- 切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}
- </el-button>
- </div>
- </div>
- <!-- 图表容器 -->
- <div
- v-loading="loading"
- :id="`bar-chart-${inds}`"
- style="width: 100%; height: 400px"
- >
- <el-empty v-if="isError" description="请求失败"></el-empty>
- </div>
- </div>
- </template>
- <script>
- import { nextTick } from "vue"; // 导入 nextTick
- import Plotly from "plotly.js-dist";
- import axios from "axios";
- import { myMixin } from "@/mixins/chartRequestMixin";
- export default {
- props: {
- fileAddr: {
- default: "",
- type: String,
- },
- inds: {
- type: String,
- default() {
- return "0";
- },
- },
- },
- mixins: [myMixin],
- data() {
- return {
- chartData: {
- analysisTypeCode: "",
- engineCode: "",
- engineTypeName: "",
- xaixs: "",
- yaixs: "",
- data: [
- // {
- // xData: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
- // yData: [10, 20, 30, 40, 50],
- // title: "数据集1",
- // },
- ],
- },
- chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
- color1: "#588CF0", // 默认颜色
- // normalRangeMin: 5, // 最低范围
- // normalRangeMax: 18, // 最高范围
- };
- },
- mounted() {
- this.getData();
- },
- methods: {
- async getData() {
- if (this.fileAddr !== "") {
- try {
- this.loading = true;
- this.cancelToken = axios.CancelToken.source();
- const resultChartsData = await axios.get(this.fileAddr, {
- cancelToken: this.cancelToken.token,
- });
- this.chartData = resultChartsData.data;
- // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
- nextTick(() => {
- this.drawChart();
- this.isError = false;
- this.loading = false;
- });
- } catch (error) {
- console.error("Error loading data:", error);
- this.isError = true;
- this.loading = false;
- }
- }
- },
- // 绘制图表
- drawChart() {
- if (this.chartData.data && this.chartData.data.length === 0) return;
- const chartDataset = this.chartData.data[0];
- const trace = {
- x: chartDataset.xData, // 横坐标数据
- y: chartDataset.yData, // 纵坐标数据
- type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
- marker: {
- color: this.color1, // 柱状图颜色
- },
- line: {
- color: this.color1, // 折线图颜色
- },
- name: chartDataset.title || "数据", // 图例名称
- hovertemplate:
- `${this.chartData.xaixs}:` +
- ` %{x} <br> ` +
- `${this.chartData.yaixs}:` +
- "%{y} <br>",
- };
- const layout = {
- title: {
- text: chartDataset.title,
- font: {
- size: 16, // 设置标题字体大小(默认 16)
- weight: "bold",
- },
- }, // 图表标题
- xaxis: {
- title: this.chartData.xaixs || "X轴", // 横坐标标题
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- backgroundcolor: "#e5ecf6",
- },
- yaxis: {
- title: this.chartData.yaixs || "Y轴", // 纵坐标标题
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- backgroundcolor: "#e5ecf6",
- title_standoff: 100, // 设置标题与轴的距离
- },
- margin: {
- l: 50,
- r: 50,
- t: 50,
- b: 50,
- },
- plot_bgcolor: "#e5ecf6",
- gridcolor: "#fff",
- bgcolor: "#e5ecf6", // 设置背景颜色
- autosize: true, // 开启自适应
- };
- // **如果 Y 轴是 "温度偏差",添加两条红色虚线**
- if (this.chartData.yaixs === "温度偏差") {
- layout.shapes = [
- {
- type: "line",
- xref: "paper", // x 轴相对于整个图
- yref: "y",
- x0: 0,
- x1: 1, // 从左到右整个图表
- y0: 5,
- y1: 5,
- line: {
- color: "red",
- width: 2,
- dash: "dash", // 虚线
- },
- // ✅ 添加 hoverlabel
- hovertext: "上限: 5°C",
- hoverinfo: "text",
- },
- {
- type: "line",
- xref: "paper",
- yref: "y",
- x0: 0,
- x1: 1,
- y0: -5,
- y1: -5,
- line: {
- color: "red",
- width: 2,
- dash: "dash", // 虚线
- },
- hovertext: "下限: -5°C",
- hoverinfo: "text",
- },
- ];
- layout.hovermode = "x unified";
- }
- if (
- this.chartData.xaixs === "机组" ||
- this.chartData.xaixs === "机组名称"
- ) {
- layout.xaxis.tickvals = this.chartData.data[0].xData;
- layout.xaxis.ticktext = this.chartData.data[0].xData;
- }
- // 渲染图表
- Plotly.newPlot(
- `bar-chart-${this.inds}`,
- // [trace, normalRangeLine, normalRangeMaxLine],
- [trace],
- { ...layout, displaylogo: false },
- {
- responsive: true,
- modeBarButtonsToRemove: [
- // "pan2d", // 平移按钮
- "zoom2d", // 缩放按钮
- // "select2d", // 选择框
- // "lasso2d", // 套索选择
- // "resetScale2d", // 重置轴
- // // "zoomIn", // 放大
- // // "zoomOut", // 缩小
- // "home", // 重置
- // "toImage", // 导出为图片
- // "hoverClosestCartesian", // 悬浮信息
- // "zoomIn2d", // 缩放按钮(详细版本)
- // "zoomOut2d", // 缩放按钮(详细版本)
- // "autoScale2D",
- // "plotlylogo2D",
- // "Produced with Plotly.js(v2.35)", // 删除 Plotly logo
- ],
- // modeBarButtonsToAdd: [
- // {
- // name: "保存图片", // 直接写中文翻译
- // icon: Plotly.Icons["camera"],
- // click: function () {
- // console.log("选择框");
- // Plotly.downloadImage(gd, {
- // format: "png",
- // width: 800,
- // height: 600,
- // });
- // },
- // },
- // {
- // name: "选择框", // 直接写中文翻译
- // icon: Plotly.Icons["selectbox"],
- // click: function () {
- // console.log("选择框");
- // },
- // },
- // {
- // name: "套索选择", // 直接写中文翻译
- // icon: Plotly.Icons.lasso,
- // click: function () {
- // console.log("套索选择");
- // },
- // },
- // {
- // name: "放大", // 直接写中文翻译
- // icon: Plotly.Icons["zoom_plus"],
- // click: function () {
- // console.log("放大", Plotly.Icons);
- // },
- // },
- // {
- // name: "缩小", // 直接写中文翻译
- // icon: Plotly.Icons["zoom_minus"],
- // click: function () {
- // console.log("缩小", Plotly.Icons);
- // },
- // },
- // {
- // name: "缩放", // 直接写中文翻译
- // icon: Plotly.Icons["zoombox"],
- // click: function () {
- // console.log("缩放", Plotly.Icons);
- // },
- // },
- // {
- // name: "平移", // 直接写中文翻译
- // icon: Plotly.Icons.pan,
- // click: function () {
- // console.log("平移");
- // },
- // },
- // {
- // name: "还原", // 直接写中文翻译
- // icon: Plotly.Icons.home,
- // click: function () {
- // // 获取图表的 DOM 元素
- // var gd = document.getElementById(`bar-chart${this.inds}`);
- // Plotly.relayout(gd, {
- // "xaxis.range": null,
- // "yaxis.range": null,
- // });
- // },
- // },
- // ], // 这个必须是数组类型
- }
- ).then(function (gd) {
- // 获取工具栏按钮
- const toolbar = gd.querySelector(".modebar");
- const buttons = toolbar.querySelectorAll(".modebar-btn");
- // 定义一个映射对象,方便修改按钮提示
- const titleMap = {
- "Download plot as a png": "保存图片",
- Autoscale: "缩放",
- Pan: "平移",
- "Zoom out": "放大",
- "Zoom in": "缩小",
- "Box Select": "选择框操作",
- "Lasso Select": "套索选择操作",
- "Reset axes": "重置操作",
- };
- // 遍历所有按钮,修改它们的 title
- buttons.forEach(function (button) {
- const dataTitle = button.getAttribute("data-title");
- // 如果标题匹配,修改属性值
- if (titleMap[dataTitle]) {
- button.setAttribute("data-title", titleMap[dataTitle]);
- }
- });
- });
- },
- // 切换图表类型
- toggleChartType() {
- this.chartType = this.chartType === "bar" ? "scatter" : "bar";
- this.drawChart();
- },
- // 更新图表颜色
- updateChartColor() {
- this.drawChart();
- },
- },
- };
- </script>
- <style scoped>
- /* 样式可以根据需求自定义 */
- </style>
|