feat: use custom element, update vue-demi

This commit is contained in:
Justineo
2021-02-28 02:49:19 +08:00
parent 121570378f
commit c400baf8d8
7 changed files with 535 additions and 515 deletions

View File

@ -283,11 +283,10 @@ 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.0.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.1"></script>
```
<!-- vue3Scripts:end -->
```js
@ -308,11 +307,10 @@ app.component('v-chart', VueECharts)
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.1"></script>
```
<!-- vue2Scripts:end -->
```js

View File

@ -281,11 +281,10 @@ export default {
<!-- vue3Scripts:start -->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.1"></script>
```
<!-- vue3Scripts:end -->
```js
@ -306,11 +305,10 @@ app.component('v-chart', VueECharts)
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-beta.1"></script>
```
<!-- vue2Scripts:end -->
```js

1004
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,10 @@
{
"name": "vue-echarts",
"description": "Vue.js component for Apache ECharts.",
"version": "6.0.0-alpha.5",
"version": "6.0.0-beta.1",
"repository": "https://github.com/ecomfe/vue-echarts.git",
"license": "MIT",
"author": "GU Yiling <justice360@gmail.com>",
"scripts": {
"serve": "vue-cli-service serve",
"build:demo": "vue-cli-service build",
@ -20,7 +23,7 @@
],
"dependencies": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.6.1"
"vue-demi": "^0.7.0"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^11.1.1",
@ -57,7 +60,7 @@
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.2",
"echarts": "^5.0.2",
"vue": "^2.6.11 || ^3.0.0"
"vue": "^2.6.12 || ^3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {

View File

@ -10,7 +10,7 @@ const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
const DEP_VERSIONS = {
"vue@3": "3.0.5",
"vue@2": "2.6.12",
"vue-demi": "0.6.1",
"vue-demi": "0.7.0",
"@vue/composition-api": "1.0.0-rc.2",
echarts: "5.0.2",
[name]: version
@ -23,7 +23,7 @@ function getScriptsMd(deps) {
return `<script src="${CDN_PREFIX}${name}@${DEP_VERSIONS[dep]}"></script>`;
})
.join("\n");
return "```html\n" + code + "\n```\n";
return "```html\n" + code + "\n```";
}
const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>

View File

@ -13,7 +13,8 @@ import {
onUnmounted,
h,
PropType,
watchEffect
watchEffect,
Vue2
} from "vue-demi";
import { init as initChart } from "echarts/core";
import {
@ -35,6 +36,12 @@ import {
} from "./composables";
import "./style.css";
const TAG_NAME = "x-vue-echarts";
if (Vue2) {
Vue2.config.ignoredElements.push(TAG_NAME);
}
export const THEME_KEY = "ecTheme";
export const INIT_OPTIONS_KEY = "ecInitOptions";
export const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
@ -229,6 +236,6 @@ export default defineComponent({
return exposed;
},
render() {
return h("div", { class: "echarts", ref: "root" });
return h(TAG_NAME, { class: "echarts", ref: "root" });
}
});

View File

@ -1 +1 @@
.echarts{width:100%;height:100%}
x-vue-echarts{display:block;width:100%;height:100%}