feat: add options for autoresize

* add `throttle: number` to specify throttle delay (#419 #562)
* add `onResize: () => void` to specify a resize callback (#714)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.5.5
+
+* Removed the custom element registration enhancement for strict CSP builds so that they won't contain `new Function`.
+
 ## 6.5.4
 
 * Cleaned up the `console.log` call sneaked in by mistake.

README.md

@@ -225,9 +225,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -246,8 +246,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -290,9 +290,9 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/dem
 
   Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See `echartsInstance.group` [here →](https://echarts.apache.org/en/api.html#echartsInstance.group)
 
-- `autoresize: boolean` (default: `false`)
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }` (default: `false`)
 
-  Whether the chart should be resized automatically whenever its root is resized.
+  Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
 
 - `loading: boolean` (default: `false`)
 

README.zh-Hans.md

@@ -225,9 +225,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -246,8 +246,8 @@ app.component('v-chart', VueECharts)
 <!-- vue2Scripts:start -->
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.4"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -290,9 +290,9 @@ Vue.component("v-chart", VueECharts);
 
   图表的分组，用于[联动](https://echarts.apache.org/zh/api.html#echarts.connect)。请参考 `echartsInstance.group`。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.group)
 
-- `autoresize: boolean`（默认值`false`）
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }`（默认值`false`）
 
-  图表在组件根元素尺寸变化时是否需要自动进行重绘。
+  图表在组件根元素尺寸变化时是否需要自动进行重绘。也可以传入一个选项对象来指定自定义的节流延迟和尺寸变化时的额外回调函数。
 
 - `loading: boolean`（默认值：`false`）
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.5.4",
+  "version": "6.6.0",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@vue/cli-plugin-babel": "^5.0.7",
@@ -45,6 +46,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^8.7.1",
+    "pinia": "^2.1.3",
     "postcss": "^8.4.14",
     "postcss-loader": "^5.3.0",
     "postcss-nested": "^5.0.6",
@@ -60,7 +62,7 @@
     "rollup-plugin-ts": "^2.0.7",
     "tslib": "^2.4.0",
     "typescript": "4.6.4",
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
     "vue2": "npm:vue@^2.7.14",
     "webpack": "^5.73.0"
   },

rollup.config.js

@@ -1,25 +1,28 @@
 import typescript from "rollup-plugin-ts";
 import { terser } from "rollup-plugin-terser";
 import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
 import styles from "rollup-plugin-styles";
 import { injectVueDemi } from "./scripts/rollup";
 
 /**
- * Convert Rollup option to a style extracted/injected version
- * @param {import('rollup').RollupOptions} option
- * @param {boolean} extract
- * @returns {import('rollup').RollupOptions}
+ * Modifies the Rollup options for a build to support strict CSP
+ * @param {import('rollup').RollupOptions} options the original options
+ * @param {boolean} csp whether to support strict CSP
+ * @returns {import('rollup').RollupOptions} the modified options
  */
-function handleStyle(option, extract) {
-  // inject styles plugin
-  const result = { ...option };
+function configBuild(options, csp) {
+  const result = { ...options };
   const { plugins, output } = result;
-  result.plugins = (plugins || []).concat(
-    extract ? styles({ mode: ["extract", "style.css"] }) : styles()
-  );
+
+  result.plugins = [
+    ...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
+    ...plugins,
+    csp ? styles({ mode: ["extract", "style.css"] }) : styles()
+  ];
 
   // modify output file names
-  if (extract && output) {
+  if (csp && output) {
     result.output = (Array.isArray(output) ? output : [output]).map(output => {
       return {
         ...output,
@@ -33,7 +36,7 @@ function handleStyle(option, extract) {
 }
 
 /** @type {import('rollup').RollupOptions[]} */
-const options = [
+const builds = [
   {
     input: "src/index.ts",
     plugins: [
@@ -133,6 +136,6 @@ const options = [
 ];
 
 export default [
-  ...options.map(option => handleStyle(option, false)),
-  ...options.map(option => handleStyle(option, true))
+  ...builds.map(options => configBuild(options, false)),
+  ...builds.map(options => configBuild(options, true))
 ];

scripts/docs.js

@@ -8,9 +8,9 @@ const { readFile, writeFile } = fs.promises;
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.2.45",
+  "vue@3": "3.3.4",
   "vue@2": "2.7.14",
-  echarts: "5.4.1",
+  echarts: "5.4.2",
   [name]: version
 };
 

src/ECharts.ts

@@ -41,7 +41,8 @@ import { omitOn, unwrapInjected } from "./utils";
 import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
-const wcRegistered = register();
+const __CSP__ = false;
+const wcRegistered = __CSP__ ? false : register();
 
 if (Vue2) {
   Vue2.config.ignoredElements.push(TAG_NAME);

src/composables/autoresize.ts

@@ -1,26 +1,42 @@
-import { Ref, watch } from "vue-demi";
+import { watch, type Ref, type PropType } from "vue-demi";
 import { throttle } from "echarts/core";
-import { addListener, removeListener, ResizeCallback } from "resize-detector";
-import { EChartsType } from "../types";
+import {
+  addListener,
+  removeListener,
+  type ResizeCallback
+} from "resize-detector";
+import { type EChartsType } from "../types";
+
+type AutoresizeProp =
+  | boolean
+  | {
+      throttle?: number;
+      onResize?: () => void;
+    };
 
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
-  autoresize: Ref<boolean>,
+  autoresize: Ref<AutoresizeProp | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
   let resizeListener: ResizeCallback | null = null;
 
   watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
     if (root && chart && autoresize) {
-      resizeListener = throttle(() => {
-        chart.resize();
-      }, 100);
+      const autoresizeOptions = autoresize === true ? {} : autoresize;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;
 
+      const callback = () => {
+        chart.resize();
+        onResize?.();
+      };
+
+      resizeListener = wait ? throttle(callback, wait) : callback;
       addListener(root, resizeListener);
     }
 
     cleanup(() => {
-      if (resizeListener && root) {
+      if (root && resizeListener) {
         removeListener(root, resizeListener);
       }
     });
@@ -28,5 +44,5 @@ export function useAutoresize(
 }
 
 export const autoresizeProps = {
-  autoresize: Boolean
+  autoresize: [Boolean, Object] as PropType<AutoresizeProp>
 };

src/composables/loading.ts

@@ -4,21 +4,20 @@ import {
   computed,
   watchEffect,
   type Ref,
-  type InjectionKey
+  type InjectionKey,
+  type PropType
 } from "vue-demi";
-import { EChartsType } from "../types";
+import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =
   "ecLoadingOptions" as unknown as InjectionKey<
-    UnknownRecord | Ref<UnknownRecord>
+    LoadingOptions | Ref<LoadingOptions>
   >;
 
-type UnknownRecord = Record<string, unknown>;
-
 export function useLoading(
   chart: Ref<EChartsType | undefined>,
   loading: Ref<boolean>,
-  loadingOptions: Ref<UnknownRecord | undefined>
+  loadingOptions: Ref<LoadingOptions | undefined>
 ): void {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
@@ -42,5 +41,5 @@ export function useLoading(
 
 export const loadingProps = {
   loading: Boolean,
-  loadingOptions: Object
+  loadingOptions: Object as PropType<LoadingOptions>
 };

src/demo/Demo.vue

@@ -165,8 +165,8 @@
       </p>
     </section>
 
-    <!-- <h2 id="radar">
-      <a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
+    <h2 id="radar">
+      <a href="#radar">Radar chart <small>(with Pinia integration)</small></a>
       <button
         :class="{
           round: true,
@@ -179,20 +179,35 @@
     <section v-if="expand.radar">
       <figure>
         <v-chart
-        class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
+          :option="getRadarData(metricIndex)"
+          :init-options="initOptions"
+          autoresize
+        />
       </figure>
       <p>
         <select v-model="metricIndex">
-          <option v-for="(metric, index) in metrics" :value="index" :key="index"
-            >{{ metric }}
+          <option
+            v-for="(metric, index) in metrics"
+            :value="index"
+            :key="index"
+          >
+            {{ metric }}
           </option>
         </select>
-        <button @click="increase(1)" :disabled="isMax">Increase</button>
-        <button @click="increase(-1)" :disabled="isMin">Decrease</button>
-        <input id="async" type="checkbox" v-model="asyncCount" />
-        <label for="async">Async</label>
+        <button
+          @click="increase(metricIndex, 1)"
+          :disabled="isMax(metricIndex)"
+        >
+          Increase
+        </button>
+        <button
+          @click="increase(metricIndex, -1)"
+          :disabled="isMin(metricIndex)"
+        >
+          Decrease
+        </button>
       </p>
-    </section>-->
+    </section>
 
     <h2 id="connect">
       <a href="#connect">Connectable charts</a>
@@ -334,6 +349,7 @@ import {
 } from "echarts/components";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import "echarts-liquidfill";
+import { mapState, mapActions } from "pinia";
 import logo from "./data/logo";
 import getBar from "./data/bar";
 import pie from "./data/pie";
@@ -341,6 +357,7 @@ import polar from "./data/polar";
 import scatter from "./data/scatter";
 import map from "./data/map";
 import { c1, c2 } from "./data/connect";
+import { useScoreStore } from "./store";
 
 // custom theme
 import theme from "./theme.json";
@@ -434,6 +451,15 @@ export default {
       }
     };
   },
+  computed: {
+    autoresize() {
+      return { throttle: 200, onResize: this.handleResize };
+    },
+    ...mapState(useScoreStore, ["scores"]),
+    metrics() {
+      return this.scores.map(({ name }) => name);
+    }
+  },
   methods: {
     handleClick(...args) {
       console.log("click from echarts", ...args);
@@ -441,6 +467,9 @@ export default {
     handleZrClick(...args) {
       console.log("click from zrender", ...args);
     },
+    handleResize() {
+      console.log("resize");
+    },
     refresh() {
       // simulating async data from server
       this.seconds = 3;
@@ -566,7 +595,8 @@ export default {
     },
     stopActions() {
       clearInterval(this.actionTimer);
-    }
+    },
+    ...mapActions(useScoreStore, ["getRadarData", "increase", "isMax", "isMin"])
   },
   watch: {
     connected: {

src/demo/main.ts

@@ -1,4 +1,8 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import Demo from "./Demo.vue";
 
-createApp(Demo).mount("#app");
+const pinia = createPinia();
+const app = createApp(Demo);
+app.use(pinia);
+app.mount("#app");

src/demo/store.ts

@@ -0,0 +1,76 @@
+import { defineStore } from "pinia";
+
+export const useScoreStore = defineStore("score", {
+  state: () => {
+    return {
+      scores: [
+        { name: "Attack", max: 20, value: 19 },
+        { name: "Defense", max: 20, value: 9 },
+        { name: "Speed", max: 20, value: 18 },
+        { name: "Strength", max: 20, value: 16 },
+        { name: "Endurance", max: 20, value: 16 },
+        { name: "Agility", max: 20, value: 20 }
+      ],
+      index: 0
+    };
+  },
+  getters: {
+    scoreRadar({ scores }) {
+      return {
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: scores.map(({ name, max }) => {
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    }
+  },
+  actions: {
+    getRadarData(activeIndex: number) {
+      return {
+        animation: false,
+        title: {
+          text: "Player Ability"
+        },
+        tooltip: {},
+        radar: {
+          indicator: this.scores.map(({ name, max }, index) => {
+            if (index === activeIndex) {
+              return { name, max, color: "goldenrod" };
+            }
+            return { name, max };
+          })
+        },
+        series: [
+          {
+            name: "Value",
+            type: "radar",
+            data: [{ value: this.scores.map(({ value }) => value) }]
+          }
+        ]
+      };
+    },
+    increase(index: number, amount: number) {
+      const metric = this.scores[index];
+      metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    },
+    isMax(index: number) {
+      const { value, max } = this.scores[index];
+      return value === max;
+    },
+    isMin(index: number) {
+      return this.scores[index].value === 0;
+    }
+  }
+});

src/types.ts

@@ -25,6 +25,21 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
 
+export type LoadingOptions = {
+  text?: string;
+  textColor?: string;
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  fontStyle?: string;
+  fontFamily?: string;
+  maskColor?: string;
+  showSpinner?: boolean;
+  color?: string;
+  spinnerRadius?: number;
+  lineWidth?: number;
+  zlevel?: number;
+};
+
 type MouseEventName =
   | "click"
   | "dblclick"

vue.config.js

@@ -21,6 +21,13 @@ module.exports = {
       .test(/\.svg$/)
       .use("raw-loader")
       .loader("raw-loader");
+
+    config.plugin("define").tap(([options]) => [
+      {
+        ...options,
+        __CSP__: "false"
+      }
+    ]);
   },
   devServer: {
     allowedHosts: "all"