mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-12-16 06:48:49 +08:00
docs: use codesandbox on air for readme instead of static codepens
This commit is contained in:
Justineo
@@ -1,6 +1,7 @@
|
||||
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;
|
||||
@@ -15,35 +16,84 @@ const DEP_VERSIONS = {
|
||||
[name]: version
|
||||
};
|
||||
|
||||
function getScriptsMd(deps) {
|
||||
const code = deps
|
||||
const markConfig = {
|
||||
vue3Scripts: ["vue@3", "echarts", name],
|
||||
vue2Scripts: ["vue@2", "@vue/composition-api", "echarts", name]
|
||||
};
|
||||
|
||||
function getScripts(version) {
|
||||
const deps = markConfig[`vue${version}Scripts`];
|
||||
return deps
|
||||
.map(dep => {
|
||||
const [, name] = dep.match(/^(.+?)(?:@.+)?$/) || [];
|
||||
return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
function getCodeBlock(code) {
|
||||
return "```html\n" + code + "\n```";
|
||||
}
|
||||
|
||||
const scripts = {
|
||||
2: getScripts(2),
|
||||
3: getScripts(3)
|
||||
};
|
||||
|
||||
async function getSandboxParams(version) {
|
||||
const [html, js, css] = await Promise.all(
|
||||
["index.html", `v${version}.js`, "index.css"].map(async name => {
|
||||
const file = resolve(__dirname, `./sandbox/${name}`);
|
||||
return readFile(file, "utf-8");
|
||||
})
|
||||
);
|
||||
return {
|
||||
files: {
|
||||
"index.html": {
|
||||
content: `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./index.css">
|
||||
</head>
|
||||
<body>
|
||||
${html}${scripts[version]}
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>`
|
||||
},
|
||||
"index.js": {
|
||||
content: js
|
||||
},
|
||||
"index.css": {
|
||||
content: css
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function getDemoLink(version) {
|
||||
const parameters = getParameters(await getSandboxParams(version));
|
||||
return `[Demo →](${`https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`})`;
|
||||
}
|
||||
|
||||
const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
|
||||
resolve(__dirname, "..", name)
|
||||
);
|
||||
|
||||
const markConfig = {
|
||||
vue3Scripts: ["vue@3", "echarts", name],
|
||||
vue2Scripts: ["vue@2", "@vue/composition-api", "echarts", name]
|
||||
};
|
||||
|
||||
function exec() {
|
||||
return Promise.all(
|
||||
README_FILES.map(async file => {
|
||||
const content = await readFile(file, "utf-8");
|
||||
|
||||
writeFile(
|
||||
const [link2, link3] = await Promise.all([2, 3].map(getDemoLink));
|
||||
|
||||
return writeFile(
|
||||
file,
|
||||
commentMark(content, {
|
||||
vue2Scripts: getScriptsMd(markConfig["vue2Scripts"]),
|
||||
vue3Scripts: getScriptsMd(markConfig["vue3Scripts"])
|
||||
vue2Scripts: getCodeBlock(scripts[2]),
|
||||
vue3Scripts: getCodeBlock(scripts[3]),
|
||||
vue2Demo: link2,
|
||||
vue3Demo: link3
|
||||
}),
|
||||
"utf-8"
|
||||
);
|
||||
|
||||
3
scripts/sandbox/index.css
Normal file
3
scripts/sandbox/index.css
Normal file
@@ -0,0 +1,3 @@
|
||||
#app {
|
||||
height: 400px;
|
||||
}
|
||||
3
scripts/sandbox/index.html
Normal file
3
scripts/sandbox/index.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div id="app">
|
||||
<v-chart autoresize :option="option"/>
|
||||
</div>
|
||||
55
scripts/sandbox/v2.js
Normal file
55
scripts/sandbox/v2.js
Normal file
@@ -0,0 +1,55 @@
|
||||
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
Normal file
54
scripts/sandbox/v3.js
Normal file
@@ -0,0 +1,54 @@
|
||||
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");
|
||||
Reference in New Issue
Block a user