javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-14 02:42:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: use stackblitz for demos

Browse Source
This commit is contained in:
Justineo
2022-07-13 18:22:45 +08:00
parent 6d2d3baa5d
commit e44c9dfd40
10 changed files with 32 additions and 1461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
strict-peer-dependencies = false

6
README.md
View File

@ -304,7 +304,7 @@ export default {
Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
<details>
<summary>Vue 3 <!-- vue3DemoLink:start --><a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHgHYc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACsbzeXwCAL-vh-gJmcwWBCWKzWGy2u32h2Op3Ol2utwKqJK5UxADYXniQOJvoSCP9fqLpAA1W44CYqWgAQWMAAozKgLOhlARlMqAJSmcwWYT1AhVUrqtVGo19LqoeyWq1G2hYAgAZW0sHthsdRrA1AIADFlERoFp7AByACSNBgpQANMIMgAJWEJU4QcjKYQAORgtwyCYVk2UUATcGUqDgBTgsYgYHD3sdXjjjatnQInoN6p9TuwBHsGW4pWUYEg5GErsoZvI8ALrcdsDA_cTIBnMdKGXnFmbW-EtUoUE6hi93Z7e8m1mssYHIAgtCIc9PPb9pSIWtopRvwGUXmEjAipRDMAES_va5C_qq6BeAApLqm5PlaO4IUasBXhgJ5nhYdQQHQy4ZGm5QZiWj6YcIi54SA5EkZhmravYADau5WhkrAQPU5AENRpEZIIb7QFxmEZAq6A5qcADudQANZwAJZ4ZJKKQwJQwjCTJIAtshPoZK6KhzHgwiCKg1hoLOIBMcIAC6u5IWeNaTPADHmQ6pGoMGMA3kOI5jhOU5zKZGmkRY2iGO5K6GDhsk9sO8RVCsK5Yli0GRT6a4fo5IBYk4SXqSuPJZRkFkBYFtHKI5mk9sAwgJCWtz2A8DxYgmrlEKFLFsainEgMINmBRYlXVVAtXCA8ACMThNW5N68co_FdT1vX9TVoXPA8DgTS1N7CaJBASaU0kZN1RULVVS32CNDXra1IAKZgymqQd82BYtg2hSNWIOAAHJdN46WUxQGUZJlqd15kWIVoPCDARCGCUcAQHFzmBXeUPukEGG9UacAlOglBiQAQoNn7CGNR0Y1jqi4-wo41gQAAa9jjRDVrkzjYmcAedQ3qU1gRDq43CPzgs4FicFmeVPo-OLRqS6RMs9lZyFy9unjdpLXhwd2sqUND1C4cq-FFFynUJtKMCCJwRtwBrFg4EQU40PrIAGMYGS6irwriiEUQxCEcjiCAXiB0AA">Demo →</a><!-- vue3DemoLink:end --></summary>
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
<!-- vue3Scripts:start -->
```html
@ -324,11 +324,11 @@ app.component('v-chart', VueECharts)
</details>
<details>
<summary>Vue 2 <!-- vue2DemoLink:start --><a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwAdhwAZhz_ccmOsYmpiqzeYZRbLVbrTY7PYwA4JI4nM4XK4wYplAhwO4AVne70-AX-v183wBMzmCwISxWaw2W12-0Ox1O50u11uBRRJXKGIAbDgnh8QOIvgSCH8fqLpAA1W44KhEQzUOgEAAUGUKqPKGQANMJpTBBJxOeiAJSeVDSE4Ad11t2VZlQFhh9gyBmM2vMwnQygIymVxtMHos9QIVVKDvtFkjwj6XVQ9gjUcjtCwBAAytpYPHA4mLGBqAQAGLKIjQLT2ADkAEkaDBSjqMgAJGEJU4QcjKYQAORgt21wgAgpNlFAdXBlKg4AU4LWIGBy9mo14tQukxACJmAw6c0nsARnSBuKVlGBIORhKnKKHyPB3Vvt8JYGA98IMtea6UMiuLEuv8JapQoE6QwszvbcCEmaxrFrfc1xgIhb3vXM6iIb1aFKfdgGULxhEYCJSiGYAImw-NyGwu10C8ABSY1P1AxdlzoyNYCgjAQMQ6NJiVfcW3KNthwQxDH2fDIhIE-8vR9ewAG1fyjDJWAgepyAIMTEIyQQUOgVT7wyft0C7U5LTqABrOBtO3DJJRSGBKAHdAzJABj2IsDJUxUOY8GEQRUGsNAbxAWThAAXV_H9GIsadOJWYQZPCyME3Y1BixgfdD2PU9z0vOZ_Kc5ztEMFKXxAQwIBgcycyPeIqmijJMUxSjysTN80Ok2qnAaxyiu5dqMiC3L2Ik5RWrinNgGEBJh1uew3jeTEdSSohCvkxSURUkBhDC5z4vGybCreABGJx5uS_cNOULT1s2rbTB2qApuEB43gcY7Fv3PSDIIIzSlMjINv65yxomu7Cv22aXqWkArMwWy9Icv7AqjQHdvsfbMQcAAOcH9zcspii8ny_LhnwRsjPqEeEODDBKOAIGihLnNgoh0yCNjroikp0EoS0ACE7vQ4RDv-ra4A5rn2BPacCAADXsI7yajEXVC5zgALqfdSmsCJfSO4Qdb1nBMRogKScXcnifY83txCxjLe_M1v28U1fHxcUQiiGIQjkcQQC8X2gA">Demo →</a><!-- vue2DemoLink:end --></summary>
<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2-global?file=index.html">Demo →</a></summary>
<!-- vue2Scripts:start -->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
```

7
README.zh-Hans.md
View File

@ -302,7 +302,8 @@ export default {
用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
<details>
<summary>Vue 3 <!-- vue3DemoLink:start --><a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHgHYc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACsbzeXwCAL-vh-gJmcwWBCWKzWGy2u32h2Op3Ol2utwKqJK5UxADYXniQOJvoSCP9fqLpAA1W44CYqWgAQWMAAozKgLOhlARlMqAJSmcwWYT1AhVUrqtVGo19LqoeyWq1G2hYAgAZW0sHthsdRrA1AIADFlERoFp7AByACSNBgpQANMIMgAJWEJU4QcjKYQAORgtwyCYVk2UUATcGUqDgBTgsYgYHD3sdXjjjatnQInoN6p9TuwBHsGW4pWUYEg5GErsoZvI8ALrcdsDA_cTIBnMdKGXnFmbW-EtUoUE6hi93Z7e8m1mssYHIAgtCIc9PPb9pSIWtopRvwGUXmEjAipRDMAES_va5C_qq6BeAApLqm5PlaO4IUasBXhgJ5nhYdQQHQy4ZGm5QZiWj6YcIi54SA5EkZhmravYADau5WhkrAQPU5AENRpEZIIb7QFxmEZAq6A5qcADudQANZwAJZ4ZJKKQwJQwjCTJIAtshPoZK6KhzHgwiCKg1hoLOIBMcIAC6u5IWeNaTPADHmQ6pGoMGMA3kOI5jhOU5zKZGmkRY2iGO5K6GDhsk9sO8RVCsK5Yli0GRT6a4fo5IBYk4SXqSuPJZRkFkBYFtHKI5mk9sAwgJCWtz2A8DxYgmrlEKFLFsainEgMINmBRYlXVVAtXCA8ACMThNW5N68co_FdT1vX9TVoXPA8DgTS1N7CaJBASaU0kZN1RULVVS32CNDXra1IAKZgymqQd82BYtg2hSNWIOAAHJdN46WUxQGUZJlqd15kWIVoPCDARCGCUcAQHFzmBXeUPukEGG9UacAlOglBiQAQoNn7CGNR0Y1jqi4-wo41gQAAa9jjRDVrkzjYmcAedQ3qU1gRDq43CPzgs4FicFmeVPo-OLRqS6RMs9lZyFy9unjdpLXhwd2sqUND1C4cq-FFFynUJtKMCCJwRtwBrFg4EQU40PrIAGMYGS6irwriiEUQxCEcjiCAXiB0AA">Demo →</a><!-- vue3DemoLink:end --></summary>
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
<!-- vue3Scripts:start -->
```html
@ -322,11 +323,11 @@ app.component('v-chart', VueECharts)
</details>
<details>
<summary>Vue 2 <!-- vue2DemoLink:start --><a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwAdhwAZhz_ccmOsYmpiqzeYZRbLVbrTY7PYwA4JI4nM4XK4wYplAhwO4AVne70-AX-v183wBMzmCwISxWaw2W12-0Ox1O50u11uBRRJXKGIAbDgnh8QOIvgSCH8fqLpAA1W44KhEQzUOgEAAUGUKqPKGQANMJpTBBJxOeiAJSeVDSE4Ad11t2VZlQFhh9gyBmM2vMwnQygIymVxtMHos9QIVVKDvtFkjwj6XVQ9gjUcjtCwBAAytpYPHA4mLGBqAQAGLKIjQLT2ADkAEkaDBSjqMgAJGEJU4QcjKYQAORgt21wgAgpNlFAdXBlKg4AU4LWIGBy9mo14tQukxACJmAw6c0nsARnSBuKVlGBIORhKnKKHyPB3Vvt8JYGA98IMtea6UMiuLEuv8JapQoE6QwszvbcCEmaxrFrfc1xgIhb3vXM6iIb1aFKfdgGULxhEYCJSiGYAImw-NyGwu10C8ABSY1P1AxdlzoyNYCgjAQMQ6NJiVfcW3KNthwQxDH2fDIhIE-8vR9ewAG1fyjDJWAgepyAIMTEIyQQUOgVT7wyft0C7U5LTqABrOBtO3DJJRSGBKAHdAzJABj2IsDJUxUOY8GEQRUGsNAbxAWThAAXV_H9GIsadOJWYQZPCyME3Y1BixgfdD2PU9z0vOZ_Kc5ztEMFKXxAQwIBgcycyPeIqmijJMUxSjysTN80Ok2qnAaxyiu5dqMiC3L2Ik5RWrinNgGEBJh1uew3jeTEdSSohCvkxSURUkBhDC5z4vGybCreABGJx5uS_cNOULT1s2rbTB2qApuEB43gcY7Fv3PSDIIIzSlMjINv65yxomu7Cv22aXqWkArMwWy9Icv7AqjQHdvsfbMQcAAOcH9zcspii8ny_LhnwRsjPqEeEODDBKOAIGihLnNgoh0yCNjroikp0EoS0ACE7vQ4RDv-ra4A5rn2BPacCAADXsI7yajEXVC5zgALqfdSmsCJfSO4Qdb1nBMRogKScXcnifY83txCxjLe_M1v28U1fHxcUQiiGIQjkcQQC8X2gA">Demo →</a><!-- vue2DemoLink:end --></summary>
<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2-global?file=index.html">Demo →</a></summary>
<!-- vue2Scripts:start -->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.2.3"></script>
```

3
package.json
View File

@ -38,7 +38,6 @@
"@vue/composition-api": "^1.7.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"codesandbox": "^2.2.3",
"comment-mark": "^1.0.0",
"core-js": "^3.23.0",
"echarts": "^5.3.2",
@ -61,7 +60,7 @@
"tslib": "^2.4.0",
"typescript": "4.6.4",
"vue": "^3.2.33",
"vue2": "npm:vue@^2.6.14",
"vue2": "npm:vue@^2.7.4",
"webpack": "^5.72.1"
},
"peerDependencies": {

1308
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

41
scripts/docs.js
View File

@ -1,7 +1,6 @@
import fs from "fs";
import { resolve } from "path";
import commentMark from "comment-mark";
import { getParameters } from "codesandbox/lib/api/define";
import { name, version } from "../package.json";
const { readFile, writeFile } = fs.promises;
@ -10,7 +9,7 @@ const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
const DEP_VERSIONS = {
"vue@3": "3.2.37",
"vue@2": "2.7.3",
"vue@2": "2.7.5",
echarts: "5.3.3",
[name]: version
};
@ -39,38 +38,6 @@ const scripts = {
3: getScripts(3)
};
async function getSandboxParams(version) {
const [html, js, css] = await Promise.all(
["index.html", `vue${version}.js`, "index.css"].map(async name => {
const file = resolve(__dirname, `./sandbox/${name}`);
return readFile(file, "utf8");
})
);
return {
files: {
"index.html": {
content: `<!DOCTYPE html>
<html>
<head>
<style>
${css}</style>
</head>
<body>
${html}${scripts[version]}
<script>
${js}</script>
</body>
</html>`
}
}
};
}
async function getDemoLink(version) {
const parameters = getParameters(await getSandboxParams(version));
return `<a href="https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}">Demo →</a>`;
}
const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
resolve(__dirname, "..", name)
);
@ -80,15 +47,11 @@ function exec() {
README_FILES.map(async file => {
const content = await readFile(file, "utf8");
const [link2, link3] = await Promise.all([2, 3].map(getDemoLink));
return writeFile(
file,
commentMark(content, {
vue2Scripts: getCodeBlock(scripts[2]),
vue3Scripts: getCodeBlock(scripts[3]),
vue2DemoLink: link2,
vue3DemoLink: link3
vue3Scripts: getCodeBlock(scripts[3])
}),
"utf8"
);

55
scripts/sandbox/v2.js
View File

@ -1,55 +0,0 @@
Vue.component("v-chart", VueECharts);
new Vue({
el: "#app",
data() {
return {
option: {
textStyle: {
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
},
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
});

54
scripts/sandbox/v3.js
View File

@ -1,54 +0,0 @@
Vue.createApp({
data() {
return {
option: {
textStyle: {
fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
},
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
})
.component("v-chart", VueECharts)
.mount("#app");

16
src/composables/loading.ts
View File

@ -1,7 +1,17 @@
import { inject, unref, computed, Ref, watchEffect, InjectionKey } from "vue-demi";
import {
inject,
unref,
computed,
Ref,
watchEffect,
InjectionKey
} from "vue-demi";
import { EChartsType } from "../types";
export const LOADING_OPTIONS_KEY = "ecLoadingOptions" as unknown as InjectionKey<UnknownRecord | Ref<UnknownRecord>>;
export const LOADING_OPTIONS_KEY =
"ecLoadingOptions" as unknown as InjectionKey<
UnknownRecord | Ref<UnknownRecord>
>;
type UnknownRecord = Record<string, unknown>;
@ -10,7 +20,7 @@ export function useLoading(
loading: Ref<boolean>,
loadingOptions: Ref<UnknownRecord | undefined>
): void {
const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {})
const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
const realLoadingOptions = computed(() => ({
...unref(defaultLoadingOptions),
...loadingOptions?.value