异步数据

script setuptheme.jsontemplateglobal

import type { BarSeriesOption } from "echarts/charts";
import { BarChart } from "echarts/charts";
import type { DatasetComponentOption, GridComponentOption } from "echarts/components";
import { DatasetComponent, GridComponent } from "echarts/components";
import type { ComposeOption } from "echarts/core";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GLOBAL_OPTION } from "../echarts";
import theme from "./theme.json";

type EChartsOption = ComposeOption<
  | GridComponentOption
  | DatasetComponentOption
  | BarSeriesOption
>;

definePage({
  style: {
    navigationBarTitleText: "异步数据"
  }
});

echarts.use([
  GridComponent,
  DatasetComponent,
  BarChart,
  CanvasRenderer
]);

echarts.registerTheme("ovilia-green", theme);

const option = ref({
  ...GLOBAL_OPTION,
  grid: {
    top: 20,
    right: 10,
    bottom: 10,
    left: 10,
    outerBoundsMode: "same",
    outerBoundsContain: "axisLabel"
  },
  xAxis: {
    type: "category"
  },
  yAxis: {},
  series: [
    { type: "bar" },
    { type: "bar" },
    { type: "bar" }
  ],
  dataset: {
    dimensions: ["Product", "2023", "2024", "2025"],
    source: getData()
  }
} satisfies EChartsOption);

const loading = shallowRef(false);

const loadingOptions = {
  text: "请稍候...",
  color: "#4ea397",
  maskColor: "rgba(255, 255, 255, 0.8)"
};

function random() {
  return Math.round(300 + Math.random() * 700) / 10;
}

function getData() {
  return [
    {
      Product: "Matcha Latte",
      2023: random(),
      2024: random(),
      2025: random()
    },
    {
      Product: "Milk Tea",
      2023: random(),
      2024: random(),
      2025: random()
    },
    {
      Product: "Cheese Cocoa",
      2023: random(),
      2024: random(),
      2025: random()
    },
    {
      Product: "Walnut Brownie",
      2023: random(),
      2024: random(),
      2025: random()
    }
  ];
}

const surplus = shallowRef(0);

let timer = 0;

function destroyTimer() {
  if (timer === 0) {
    return;
  }

  clearInterval(timer);
  timer = 0;
}

function tick() {
  surplus.value -= 1;

  if (surplus.value <= 0) {
    destroyTimer();

    option.value.dataset.source = getData();
    loading.value = false;
  }
}

function refresh() {
  loading.value = true;
  surplus.value = 3;

  // @ts-expect-error whatever
  timer = setInterval(tick, 1000);
}

onUnload(() => {
  destroyTimer();
});

json

{
  "color": [
    "#4ea397",
    "#22c3aa",
    "#7bd9a5"
  ],
  "backgroundColor": "rgba(0,0,0,0)",
  "textStyle": {},
  "title": {
    "textStyle": {
      "color": "#666666"
    },
    "subtextStyle": {
      "color": "#999999"
    }
  },
  "line": {
    "itemStyle": {
      "borderWidth": "2"
    },
    "lineStyle": {
      "width": "3"
    },
    "symbolSize": "10",
    "symbol": "emptyCircle",
    "smooth": true
  },
  "radar": {
    "itemStyle": {
      "borderWidth": "2"
    },
    "lineStyle": {
      "width": "3"
    },
    "symbolSize": "10",
    "symbol": "emptyCircle",
    "smooth": true
  },
  "bar": {
    "itemStyle": {
      "barBorderWidth": "0",
      "barBorderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "barBorderWidth": "0",
        "barBorderColor": "#444444"
      }
    }
  },
  "pie": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "scatter": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "boxplot": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "parallel": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "sankey": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "funnel": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "gauge": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "emphasis": {
      "itemStyle": {
        "borderWidth": "0",
        "borderColor": "#444444"
      }
    }
  },
  "candlestick": {
    "itemStyle": {
      "color": "#d0648a",
      "color0": "#ffffff",
      "borderColor": "#d0648a",
      "borderColor0": "#22c3aa",
      "borderWidth": 1
    }
  },
  "graph": {
    "itemStyle": {
      "borderWidth": "0",
      "borderColor": "#444444"
    },
    "lineStyle": {
      "width": 1,
      "color": "#aaaaaa"
    },
    "symbolSize": "10",
    "symbol": "emptyCircle",
    "smooth": true,
    "color": [
      "#4ea397",
      "#22c3aa",
      "#7bd9a5"
    ],
    "label": {
      "color": "#ffffff"
    }
  },
  "map": {
    "itemStyle": {
      "areaColor": "#eeeeee",
      "borderColor": "#999999",
      "borderWidth": "0.5"
    },
    "emphasis": {
      "itemStyle": {
        "areaColor": "rgba(34,195,170,0.25)",
        "borderColor": "#22c3aa",
        "borderWidth": "0.5"
      },
      "label": {
        "color": "rgb(52,158,142)"
      }
    },
    "label": {
      "color": "#28544e"
    }
  },
  "geo": {
    "itemStyle": {
      "areaColor": "#eeeeee",
      "borderColor": "#999999",
      "borderWidth": "0.5"
    },
    "emphasis": {
      "itemStyle": {
        "areaColor": "rgba(34,195,170,0.25)",
        "borderColor": "#22c3aa",
        "borderWidth": "0.5"
      },
      "label": {
        "color": "rgb(52,158,142)"
      }
    },
    "label": {
      "color": "#28544e"
    }
  },
  "categoryAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333333"
      }
    },
    "axisLabel": {
      "show": true,
      "color": "#999999"
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "valueAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333333"
      }
    },
    "axisLabel": {
      "show": true,
      "color": "#999999"
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "logAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333333"
      }
    },
    "axisLabel": {
      "show": true,
      "color": "#999999"
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "timeAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333333"
      }
    },
    "axisLabel": {
      "show": true,
      "color": "#999999"
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eeeeee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "toolbox": {
    "iconStyle": {
      "borderColor": "#aaaaaa"
    },
    "emphasis": {
      "iconStyle": {
        "borderColor": "#666666"
      }
    }
  },
  "legend": {
    "textStyle": {
      "color": "#999999"
    }
  },
  "tooltip": {
    "axisPointer": {
      "lineStyle": {
        "color": "#cccccc",
        "width": 1
      },
      "crossStyle": {
        "color": "#cccccc",
        "width": 1
      }
    }
  },
  "timeline": {
    "lineStyle": {
      "color": "#349e8e",
      "width": 1
    },
    "itemStyle": {
      "color": "#349e8e",
      "borderWidth": "1"
    },
    "emphasis": {
      "itemStyle": {
        "color": "#57e8d2"
      }
    },
    "controlStyle": {
      "color": "#349e8e",
      "borderColor": "#349e8e",
      "borderWidth": "0"
    },
    "checkpointStyle": {
      "color": "#22c3aa",
      "borderColor": "rgba(34,195,170,0.25)"
    },
    "label": {
      "color": "#349e8e"
    }
  },
  "visualMap": {
    "color": [
      "#d0648a",
      "#22c3aa",
      "rgba(123,217,165,0.2)"
    ]
  },
  "dataZoom": {
    "backgroundColor": "#ffffff",
    "dataBackgroundColor": "#dedede",
    "fillerColor": "rgba(34,195,170,0.25)",
    "handleColor": "#dddddd",
    "handleSize": "100%",
    "textStyle": {
      "color": "#999999"
    }
  },
  "markPoint": {
    "label": {
      "color": "#ffffff",
      "emphasis": {
        "textStyle": {
          "color": "#ffffff"
        }
      }
    }
  }
}

html

<app-page>
  <uni-echarts
    custom-class="h-60"
    :option="option"
    theme="ovilia-green"
    autoresize
    :loading="loading"
    :loading-options="loadingOptions"
  ></uni-echarts>

  <view class="flex flex-col items-center mt-2">
    <text v-if="surplus > 0" class="text-base text-t3">
      数据将在
      <text class="text-primary mx-1">{{ surplus }}</text>
      秒后完成加载...
    </text>

    <wd-button
      v-else
      size="small"
      plain
      @click="refresh()"
    >
      更新数据
    </wd-button>
  </view>
</app-page>

export const GLOBAL_OPTION = {
  textStyle: {
    fontFamily: `MiSans, Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif`
  }
};

异步数据 ​

异步数据