|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2024-09-11 14:30:17
|
|
|
- * @LastEditTime: 2025-01-20 17:31:39
|
|
|
+ * @LastEditTime: 2025-01-22 12:17:59
|
|
|
* @LastEditors: bogon
|
|
|
* @Description: In User Settings Edit
|
|
|
* @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
|
|
|
@@ -172,11 +172,123 @@ export default {
|
|
|
|
|
|
// [trace, normalRangeLine, normalRangeMaxLine],
|
|
|
[trace],
|
|
|
- layout,
|
|
|
+ { ...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() {
|
liujiejie