javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-15 03:33:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use custom element, update vue-demi

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -283,11 +283,10 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
<!-- vue3Scripts:start --> <!-- vue3Scripts:start -->
```html ```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script> <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/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 --> <!-- vue3Scripts:end -->
```js ```js
@ -308,11 +307,10 @@ app.component('v-chart', VueECharts)
```html ```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <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/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/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 --> <!-- vue2Scripts:end -->
```js ```js

10
README.zh-Hans.md
View File

@ -281,11 +281,10 @@ export default {
<!-- vue3Scripts:start --> <!-- vue3Scripts:start -->
```html ```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script> <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/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 --> <!-- vue3Scripts:end -->
```js ```js
@ -306,11 +305,10 @@ app.component('v-chart', VueECharts)
```html ```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <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/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/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 --> <!-- vue2Scripts:end -->
```js ```js

1004
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -1,7 +1,10 @@
{ {
"name": "vue-echarts", "name": "vue-echarts",
"description": "Vue.js component for Apache 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": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build:demo": "vue-cli-service build", "build:demo": "vue-cli-service build",
@ -20,7 +23,7 @@
], ],
"dependencies": { "dependencies": {
"resize-detector": "^0.3.0", "resize-detector": "^0.3.0",
"vue-demi": "^0.6.1" "vue-demi": "^0.7.0"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-node-resolve": "^11.1.1", "@rollup/plugin-node-resolve": "^11.1.1",
@ -57,7 +60,7 @@
"peerDependencies": { "peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.2", "@vue/composition-api": "^1.0.0-rc.2",
"echarts": "^5.0.2", "echarts": "^5.0.2",
"vue": "^2.6.11 || ^3.0.0" "vue": "^2.6.12 || ^3.0.0"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@vue/composition-api": { "@vue/composition-api": {

4
scripts/readme.js
View File

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

11
src/ECharts.ts
View File

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

2
src/style.css
View File

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