ZingChart加载/缩放卡顿，如何显示等待Logo？

针对百万数据点下重绘、缩放卡顿的情况，可以通过以下两种方式添加等待Logo：

1. 使用ZingChart内置加载指示器 #

直接在图表配置中添加loading配置项，自定义加载时的Logo、文本和样式：

var configTimeAndAngle = {
    "type": "line",
    // 新增加载配置
    "loading": {
        "visible": true, // 默认加载时显示
        "label": "数据处理中...",
        "logo": "https://cdn.zingchart.com/docs/loading/zc-loader-circle.svg", // 可替换为自定义Logo
        "style": {
            "font-size": "14px",
            "color": "#3366ff"
        }
    },
    // 原有配置保持不变
    legend: {
        layout: "1x1",
        x: "35%",
        y: "6%",
    },
    "preview":{"live":true},
    plot: {mode: 'fast'},
    // ... 其他原有配置
};

内置加载器会在图表初始渲染、重绘时自动显示，完成后自动隐藏。

2. 手动控制加载状态（针对缩放等交互操作） #

因为缩放等交互操作触发的重绘，内置加载器可能不会自动触发，需要通过ZingChart的事件监听手动控制：

function chart_AngleTime(timeArray,angle_arr) {
    var configTimeAndAngle = {
        // ... 原有配置
        "events": {
            // 监听缩放开始事件，显示加载状态
            "zoom_start": function() {
                zingchart.exec("lineChart_at", "showloading");
            },
            // 监听缩放结束事件，隐藏加载状态
            "zoom_complete": function() {
                zingchart.exec("lineChart_at", "hideloading");
            },
            // 监听重绘开始/结束事件，覆盖其他操作场景
            "render_start": function() {
                zingchart.exec("lineChart_at", "showloading");
            },
            "render_complete": function() {
                zingchart.exec("lineChart_at", "hideloading");
            }
        }
    };

    // 原有渲染代码
    zingchart.QUOTEDVALUES = true;
    zingchart.render({
        id: "lineChart_at",
        height: "100%",
        width: "100%",
        output: "canvas",
        data: configTimeAndAngle
    });
}

通过zingchart.exec()方法调用showloading和hideloading命令，精准控制加载状态的显示时机。

额外性能优化建议 #

针对百万数据点的卡顿问题，可再优化以下配置：

• 将scale-x.labels直接传数组的方式改为使用formatter函数，避免一次性渲染大量标签：

  'scale-x': {
      zooming: true,
      formatter: function(v) {
          return timeArray[v]; // 根据索引返回对应时间标签
      },
      item: {'font-size':10}
  }
  

• 关闭绘图动画，减少重绘开销：

  plot: {
      mode: 'fast',
      animation: false
  }
  

内容的提问来源于stack exchange，提问作者decent boy