mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-11-05 20:36:09 +08:00
Compare commits
11 Commits
v6.6.5
...
move-to-es
| Author | SHA1 | Date | |
|---|---|---|---|
| d00aa090a6 | |||
| 002b2f2701 | |||
| 40045135af | |||
| 311d588850 | |||
| 2f1910ec87 | |||
| 48a0664c2b | |||
| 05ec40a956 | |||
| dc9dccbf05 | |||
| 476efa4209 | |||
| 7bcf57e77b | |||
| ce3ba29209 |
25
.eslintrc.js
25
.eslintrc.js
@ -1,25 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
||||
parserOptions: {
|
||||
ecmaVersion: 2020,
|
||||
parser: "@typescript-eslint/parser"
|
||||
},
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"vue/multi-word-component-names": "off"
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.ts"],
|
||||
extends: [
|
||||
"@vue/typescript/recommended",
|
||||
"@vue/prettier/@typescript-eslint"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
24
.eslintrc.json
Normal file
24
.eslintrc.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020,
|
||||
"parser": "@typescript-eslint/parser"
|
||||
},
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"vue/multi-word-component-names": "off"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts"],
|
||||
"extends": [
|
||||
"@vue/typescript/recommended",
|
||||
"@vue/prettier/@typescript-eslint"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
16
CHANGELOG.md
16
CHANGELOG.md
@ -1,3 +1,19 @@
|
||||
## 6.6.9
|
||||
|
||||
* Fixed that the chart may not be the same size as the component root element ([#761](https://github.com/ecomfe/vue-echarts/issues/761)).
|
||||
|
||||
## 6.6.8
|
||||
|
||||
* Fixed the postinstall script to patch the correct `types` entry for Vue 2.7.
|
||||
|
||||
## 6.6.7
|
||||
|
||||
* Added missing type file for Vue 2.7.
|
||||
|
||||
## 6.6.6
|
||||
|
||||
* Fixed types for Vue < 2.7.
|
||||
|
||||
## 6.6.5
|
||||
|
||||
* Fixed type for `option` regressed in v6.6.2.
|
||||
|
||||
23
README.md
23
README.md
@ -1,6 +1,6 @@
|
||||
<h1 align="center">Vue-ECharts</h1>
|
||||
|
||||
<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts <sup>(v5)</sup>.</p>
|
||||
<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts™ <sup>(v5)</sup>.</p>
|
||||
<p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
|
||||
<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
|
||||
|
||||
@ -23,17 +23,18 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
|
||||
|
||||
### npm & ESM
|
||||
|
||||
```bash
|
||||
npm install echarts vue-echarts
|
||||
```sh
|
||||
npm i echarts vue-echarts
|
||||
```
|
||||
|
||||
To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
|
||||
To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed (`@vue/runtime-core` for TypeScript support):
|
||||
|
||||
```sh
|
||||
npm i @vue/composition-api
|
||||
npm i @vue/runtime-core # for TypeScript support
|
||||
```
|
||||
|
||||
If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`:
|
||||
If you are using _NuxtJS_ on top of _Vue 2_, you'll need `@nuxtjs/composition-api`:
|
||||
|
||||
```sh
|
||||
npm i @nuxtjs/composition-api
|
||||
@ -235,9 +236,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.3.7"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
|
||||
```
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
@ -255,9 +256,9 @@ app.component('v-chart', VueECharts)
|
||||
|
||||
<!-- vue2Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
|
||||
```
|
||||
<!-- vue2Scripts:end -->
|
||||
|
||||
@ -475,7 +476,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
|
||||
|
||||
### Vue 2 support
|
||||
|
||||
- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2.
|
||||
- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2 (and also `@vue/runtime-core` for TypeScript support).
|
||||
|
||||
### Props
|
||||
|
||||
@ -500,7 +501,7 @@ The following breaking changes are introduced in `vue-echarts@6`:
|
||||
|
||||
## Local development
|
||||
|
||||
```bash
|
||||
```sh
|
||||
pnpm i
|
||||
pnpm serve
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<h1 align="center">Vue-ECharts</h1>
|
||||
|
||||
<p align="center">Apache ECharts <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
|
||||
<p align="center">Apache ECharts™ <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
|
||||
<p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
|
||||
<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
|
||||
|
||||
@ -23,17 +23,18 @@
|
||||
|
||||
### npm & ESM
|
||||
|
||||
```bash
|
||||
npm install echarts vue-echarts
|
||||
```sh
|
||||
npm i echarts vue-echarts
|
||||
```
|
||||
|
||||
要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
|
||||
要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装（TypeScript 支持还需要 `@vue/runtime-core`）：
|
||||
|
||||
```sh
|
||||
npm i @vue/composition-api
|
||||
npm i @vue/runtime-core # TypeScript 支持
|
||||
```
|
||||
|
||||
如果你在使用基于 _Vue 2_ 的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
|
||||
如果你在使用基于 _Vue 2_ 的 _NuxtJS_，则需要安装 `@nuxtjs/composition-api`：
|
||||
|
||||
```sh
|
||||
npm i @nuxtjs/composition-api
|
||||
@ -235,9 +236,9 @@ import "echarts";
|
||||
|
||||
<!-- vue3Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.7"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.19"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
|
||||
```
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
@ -255,9 +256,9 @@ app.component('v-chart', VueECharts)
|
||||
|
||||
<!-- vue2Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.15"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.9"></script>
|
||||
```
|
||||
<!-- vue2Scripts:end -->
|
||||
|
||||
@ -475,7 +476,7 @@ import { THEME_KEY } from 'vue-echarts'
|
||||
|
||||
### Vue 2 支持
|
||||
|
||||
- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`。
|
||||
- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
|
||||
|
||||
### Prop
|
||||
|
||||
@ -500,7 +501,7 @@ import { THEME_KEY } from 'vue-echarts'
|
||||
|
||||
## 本地开发
|
||||
|
||||
```bash
|
||||
```sh
|
||||
pnpm i
|
||||
pnpm serve
|
||||
```
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
presets: ["@vue/cli-plugin-babel/preset"]
|
||||
};
|
||||
3
babel.config.json
Normal file
3
babel.config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@vue/cli-plugin-babel/preset"]
|
||||
}
|
||||
21
package.json
21
package.json
@ -1,7 +1,8 @@
|
||||
{
|
||||
"name": "vue-echarts",
|
||||
"version": "6.6.5",
|
||||
"description": "Vue.js component for Apache ECharts.",
|
||||
"version": "6.6.9",
|
||||
"type": "module",
|
||||
"description": "Vue.js component for Apache ECharts™.",
|
||||
"author": "GU Yiling <justice360@gmail.com>",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@ -28,9 +29,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.2",
|
||||
"@highlightjs/vue-plugin": "^2.1.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-replace": "^5.0.5",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.33.0",
|
||||
"@typescript-eslint/parser": "^4.33.0",
|
||||
"@vercel/analytics": "^1.1.1",
|
||||
@ -45,7 +44,7 @@
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"comment-mark": "^1.1.1",
|
||||
"core-js": "^3.33.2",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"esbuild-wasm": "^0.19.2",
|
||||
@ -61,10 +60,10 @@
|
||||
"raw-loader": "^4.0.2",
|
||||
"resize-detector": "^0.3.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.79.1",
|
||||
"rollup-plugin-dts": "^4.2.3",
|
||||
"rollup-plugin-styles": "^4.0.0",
|
||||
"rollup-plugin-ts": "^2.0.7",
|
||||
"rollup": "^4.12.0",
|
||||
"rollup-plugin-dts": "^6.1.0",
|
||||
"rollup-plugin-esbuild": "^6.1.1",
|
||||
"rollup-plugin-import-css": "^3.5.0",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "4.6.4",
|
||||
"vue": "^3.3.7",
|
||||
@ -73,6 +72,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.5",
|
||||
"@vue/runtime-core": "^3.0.0",
|
||||
"echarts": "^5.4.1",
|
||||
"vue": "^2.6.12 || ^3.1.1"
|
||||
},
|
||||
@ -81,6 +81,9 @@
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"@vue/runtime-core": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"repository": "https://github.com/ecomfe/vue-echarts.git",
|
||||
|
||||
895
pnpm-lock.yaml
generated
895
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter:300,500;display=swap" rel="stylesheet">
|
||||
<title>Vue-ECharts: Vue.js component for Apache ECharts.</title>
|
||||
<title>Vue-ECharts: Vue.js component for Apache ECharts™.</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
124
rollup.config.js
124
rollup.config.js
@ -1,9 +1,8 @@
|
||||
import typescript from "rollup-plugin-ts";
|
||||
import terser from "@rollup/plugin-terser";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import esbuild from "rollup-plugin-esbuild";
|
||||
import { dts } from "rollup-plugin-dts";
|
||||
import replace from "@rollup/plugin-replace";
|
||||
import styles from "rollup-plugin-styles";
|
||||
import { injectVueDemi } from "./scripts/rollup";
|
||||
import css from "rollup-plugin-import-css";
|
||||
import { ignoreCss } from "./scripts/rollup.js";
|
||||
|
||||
/**
|
||||
* Modifies the Rollup options for a build to support strict CSP
|
||||
@ -18,7 +17,7 @@ function configBuild(options, csp) {
|
||||
result.plugins = [
|
||||
...(csp ? [replace({ __CSP__: `${csp}`, preventAssignment: true })] : []),
|
||||
...plugins,
|
||||
csp ? styles({ mode: ["extract", "style.css"] }) : styles()
|
||||
csp ? css({ output: "style.css" }) : css({ inject: true })
|
||||
];
|
||||
|
||||
// modify output file names
|
||||
@ -39,97 +38,37 @@ function configBuild(options, csp) {
|
||||
const builds = [
|
||||
{
|
||||
input: "src/index.ts",
|
||||
plugins: [
|
||||
typescript({
|
||||
tsconfig: resolvedConfig => ({ ...resolvedConfig, declaration: true }),
|
||||
hook: {
|
||||
outputPath: (path, kind) =>
|
||||
kind === "declaration" ? "dist/index.d.ts" : path
|
||||
}
|
||||
})
|
||||
],
|
||||
external: ["vue-demi", "echarts/core", "resize-detector"],
|
||||
output: {
|
||||
file: "dist/index.esm.js",
|
||||
format: "esm",
|
||||
sourcemap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
input: "src/index.ts",
|
||||
plugins: [typescript()],
|
||||
external: ["vue-demi", "echarts/core", "resize-detector"],
|
||||
plugins: [esbuild()],
|
||||
external: ["vue-demi", /^echarts/, "resize-detector"],
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.esm.min.js",
|
||||
file: "dist/index.esm.js",
|
||||
format: "esm",
|
||||
sourcemap: true,
|
||||
plugins: [
|
||||
terser({
|
||||
format: {
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
]
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: "dist/index.cjs.js",
|
||||
format: "cjs",
|
||||
exports: "named",
|
||||
sourcemap: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
input: "src/index.ts",
|
||||
plugins: [esbuild({ minify: true })],
|
||||
external: ["vue-demi", /^echarts/, "resize-detector"],
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.esm.min.js",
|
||||
format: "esm",
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: "dist/index.cjs.min.js",
|
||||
format: "cjs",
|
||||
exports: "named",
|
||||
sourcemap: true,
|
||||
plugins: [
|
||||
terser({
|
||||
format: {
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
input: "src/global.ts",
|
||||
plugins: [resolve(), typescript()],
|
||||
external: ["vue-demi", "echarts", "echarts/core"],
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.umd.js",
|
||||
format: "umd",
|
||||
name: "VueECharts",
|
||||
exports: "default",
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
"vue-demi": "VueDemi",
|
||||
echarts: "echarts",
|
||||
"echarts/core": "echarts"
|
||||
},
|
||||
plugins: [injectVueDemi]
|
||||
},
|
||||
{
|
||||
file: "dist/index.umd.min.js",
|
||||
format: "umd",
|
||||
name: "VueECharts",
|
||||
exports: "default",
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
"vue-demi": "VueDemi",
|
||||
echarts: "echarts",
|
||||
"echarts/core": "echarts"
|
||||
},
|
||||
plugins: [
|
||||
injectVueDemi,
|
||||
terser({
|
||||
format: {
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
]
|
||||
sourcemap: true
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -137,5 +76,22 @@ const builds = [
|
||||
|
||||
export default [
|
||||
...builds.map(options => configBuild(options, false)),
|
||||
...builds.map(options => configBuild(options, true))
|
||||
...builds.map(options => configBuild(options, true)),
|
||||
{
|
||||
input: "src/index.ts",
|
||||
plugins: [
|
||||
ignoreCss,
|
||||
dts({
|
||||
compilerOptions: {
|
||||
// see https://github.com/unjs/unbuild/pull/57/files
|
||||
preserveSymlinks: false
|
||||
}
|
||||
})
|
||||
],
|
||||
external: ["vue-demi", /^echarts/, "resize-detector"],
|
||||
output: {
|
||||
file: "dist/index.d.ts",
|
||||
format: "esm"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
@ -9,6 +9,14 @@ const options = [
|
||||
file: "dist/index.vue2.d.ts",
|
||||
format: "esm"
|
||||
}
|
||||
},
|
||||
{
|
||||
input: "src/index.vue2_7.d.ts",
|
||||
plugins: [dts()],
|
||||
output: {
|
||||
file: "dist/index.vue2_7.d.ts",
|
||||
format: "esm"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
const { readFileSync, writeFileSync } = require("fs");
|
||||
const { resolve } = require("path");
|
||||
const commentMark = require("comment-mark");
|
||||
const { name, version } = require("../package.json");
|
||||
import { readFileSync, writeFileSync } from "node:fs";
|
||||
import commentMark from "comment-mark";
|
||||
import { getPackageMeta, resolvePath } from "./utils";
|
||||
|
||||
function resolvePath(...parts) {
|
||||
return resolve(__dirname, ...parts);
|
||||
}
|
||||
const { name, version } = getPackageMeta();
|
||||
|
||||
const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
|
||||
|
||||
const DEP_VERSIONS = {
|
||||
"vue@3": "3.3.7",
|
||||
"vue@2": "2.7.15",
|
||||
"vue@3": "3.4.19",
|
||||
"vue@2": "2.7.16",
|
||||
echarts: "5.4.3",
|
||||
[name]: version
|
||||
};
|
||||
@ -41,7 +38,7 @@ const scripts = {
|
||||
};
|
||||
|
||||
const README_FILES = ["README.md", "README.zh-Hans.md"].map(name =>
|
||||
resolvePath("..", name)
|
||||
resolvePath(import.meta.url, "..", name)
|
||||
);
|
||||
|
||||
README_FILES.forEach(file => {
|
||||
|
||||
@ -1,43 +1,51 @@
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const path = require("path");
|
||||
const fs = require("fs");
|
||||
import fs from "node:fs";
|
||||
import { resolvePath } from "./utils.js";
|
||||
|
||||
const packageFile = path.resolve(__dirname, "../package.json");
|
||||
const packageFile = resolvePath(import.meta.url, "../package.json");
|
||||
|
||||
const typesPaths = {
|
||||
3: "dist/index.d.ts",
|
||||
2.7: "dist/index.vue2_7.d.ts",
|
||||
2: "dist/index.vue2.d.ts"
|
||||
};
|
||||
|
||||
function switchVersion(version) {
|
||||
const typesPath = typesPaths[version];
|
||||
const package = JSON.parse(fs.readFileSync(packageFile, "utf8"));
|
||||
if (typesPath !== package.types) {
|
||||
package.types = typesPath;
|
||||
fs.writeFileSync(packageFile, JSON.stringify(package, null, " "), "utf8");
|
||||
const pkg = JSON.parse(fs.readFileSync(packageFile, "utf8"));
|
||||
if (typesPath !== pkg.types) {
|
||||
pkg.types = typesPath;
|
||||
fs.writeFileSync(packageFile, JSON.stringify(pkg, null, " "), "utf8");
|
||||
}
|
||||
console.log(`[vue-echarts] Switched to Vue ${version} environment.`);
|
||||
}
|
||||
|
||||
function loadVue() {
|
||||
async function loadVue() {
|
||||
try {
|
||||
return require("vue");
|
||||
const Vue = await import("vue");
|
||||
return Vue;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const Vue = loadVue();
|
||||
async function main() {
|
||||
const Vue = await loadVue();
|
||||
|
||||
// Align the process with vue-demi
|
||||
if (!Vue || typeof Vue.version !== "string") {
|
||||
console.warn(
|
||||
'[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
|
||||
);
|
||||
} else if (Vue.version.startsWith("3.")) {
|
||||
switchVersion(3);
|
||||
} else if (Vue.version.startsWith("2.")) {
|
||||
switchVersion(2);
|
||||
} else {
|
||||
console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
|
||||
// Align the process with vue-demi
|
||||
if (!Vue || typeof Vue.version !== "string") {
|
||||
console.warn(
|
||||
'[vue-echarts] Vue is not found. Please run "npm install vue" to install.'
|
||||
);
|
||||
} else if (Vue.version.startsWith("3.")) {
|
||||
switchVersion(3);
|
||||
} else if (Vue.version.startsWith("2.7.")) {
|
||||
switchVersion(2.7);
|
||||
} else if (Vue.version.startsWith("2.")) {
|
||||
switchVersion(2);
|
||||
} else {
|
||||
console.warn(`[vue-echarts] Vue version v${Vue.version} is not supported.`);
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
@ -1,22 +1,7 @@
|
||||
import { readFileSync } from "fs";
|
||||
|
||||
const VUE_DEMI_IIFE = readFileSync(
|
||||
require.resolve("vue-demi/lib/index.iife.js"),
|
||||
"utf8"
|
||||
);
|
||||
|
||||
/** @type {import('rollup').Plugin} */
|
||||
export const injectVueDemi = {
|
||||
name: "inject-vue-demi",
|
||||
banner() {
|
||||
return `${VUE_DEMI_IIFE};\n;`;
|
||||
}
|
||||
};
|
||||
|
||||
const EMPTY_FILE_ID = "__rollup_empty__";
|
||||
|
||||
/** @type {import('rollup').Plugin} */
|
||||
export const ingoreCss = {
|
||||
export const ignoreCss = {
|
||||
name: "ignore-css",
|
||||
resolveId(source) {
|
||||
if (source.endsWith(".css")) {
|
||||
|
||||
13
scripts/utils.js
Normal file
13
scripts/utils.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve, dirname } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
export function resolvePath(url, ...parts) {
|
||||
return resolve(dirname(fileURLToPath(url)), ...parts);
|
||||
}
|
||||
|
||||
export function getPackageMeta() {
|
||||
return JSON.parse(
|
||||
readFileSync(resolvePath(import.meta.url, "/package.json"), "utf8")
|
||||
);
|
||||
}
|
||||
@ -13,11 +13,20 @@ import {
|
||||
nextTick,
|
||||
watchEffect,
|
||||
getCurrentInstance,
|
||||
Vue2,
|
||||
type PropType,
|
||||
type InjectionKey
|
||||
Vue2
|
||||
} from "vue-demi";
|
||||
import { init as initChart } from "echarts/core";
|
||||
import {
|
||||
usePublicAPI,
|
||||
useAutoresize,
|
||||
autoresizeProps,
|
||||
useLoading,
|
||||
loadingProps
|
||||
} from "./composables";
|
||||
import { omitOn, unwrapInjected } from "./utils";
|
||||
import { register, TAG_NAME } from "./wc";
|
||||
|
||||
import type { PropType, InjectionKey } from "vue-demi";
|
||||
import type {
|
||||
EChartsType,
|
||||
EventTarget,
|
||||
@ -30,15 +39,8 @@ import type {
|
||||
UpdateOptionsInjection,
|
||||
Emits
|
||||
} from "./types";
|
||||
import {
|
||||
usePublicAPI,
|
||||
useAutoresize,
|
||||
autoresizeProps,
|
||||
useLoading,
|
||||
loadingProps
|
||||
} from "./composables";
|
||||
import { omitOn, unwrapInjected } from "./utils";
|
||||
import { register, TAG_NAME, type EChartsElement } from "./wc";
|
||||
import type { EChartsElement } from "./wc";
|
||||
|
||||
import "./style.css";
|
||||
|
||||
const __CSP__ = false;
|
||||
@ -308,7 +310,7 @@ export default defineComponent({
|
||||
attrs.ref = "root";
|
||||
attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
|
||||
return h(TAG_NAME, attrs, [
|
||||
h("div", { ref: "inner", class: "echarts-inner" })
|
||||
h("div", { ref: "inner", class: "vue-echarts-inner" })
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Ref } from "vue-demi";
|
||||
import { EChartsType } from "../types";
|
||||
import type { Ref } from "vue-demi";
|
||||
import type { EChartsType } from "../types";
|
||||
|
||||
const METHOD_NAMES = [
|
||||
"getWidth",
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { watch, type Ref, type PropType } from "vue-demi";
|
||||
import { watch } from "vue-demi";
|
||||
import { throttle } from "echarts/core";
|
||||
import {
|
||||
addListener,
|
||||
removeListener,
|
||||
type ResizeCallback
|
||||
} from "resize-detector";
|
||||
import { type EChartsType } from "../types";
|
||||
import { addListener, removeListener } from "resize-detector";
|
||||
|
||||
import type { Ref, PropType } from "vue-demi";
|
||||
import type { ResizeCallback } from "resize-detector";
|
||||
import type { EChartsType } from "../types";
|
||||
|
||||
type AutoresizeProp =
|
||||
| boolean
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
import { inject, computed, watchEffect } from "vue-demi";
|
||||
import { unwrapInjected } from "../utils";
|
||||
import {
|
||||
inject,
|
||||
computed,
|
||||
watchEffect,
|
||||
type Ref,
|
||||
type InjectionKey,
|
||||
type PropType
|
||||
} from "vue-demi";
|
||||
|
||||
import type { Ref, InjectionKey, PropType } from "vue-demi";
|
||||
import type { EChartsType, LoadingOptions } from "../types";
|
||||
|
||||
export const LOADING_OPTIONS_KEY =
|
||||
|
||||
@ -324,10 +324,6 @@ input[type="number"] {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
|
||||
@ -56,12 +56,23 @@ watch(codeOpen, open => {
|
||||
<a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
|
||||
</h1>
|
||||
<p class="desc">
|
||||
Vue.js component for Apache ECharts. (<a
|
||||
Vue.js component for Apache ECharts™. (<a
|
||||
href="https://github.com/ecomfe/vue-echarts#readme"
|
||||
>docs</a
|
||||
>)
|
||||
</p>
|
||||
|
||||
<h2 class="sep">Examples</h2>
|
||||
<p>
|
||||
<small
|
||||
>See
|
||||
<a href="https://echarts.apache.org/examples/en/index.html"
|
||||
>echarts.apache.org/examples</a
|
||||
>
|
||||
for all examples.</small
|
||||
>
|
||||
</p>
|
||||
|
||||
<bar-chart />
|
||||
<pie-chart />
|
||||
<polar-chart />
|
||||
@ -132,6 +143,19 @@ body {
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 1px 0 0 #42b983;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 0 0 #42b983;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: #2c3e50;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -139,13 +163,32 @@ h1 {
|
||||
font-family: Inter, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #2c3e50;
|
||||
font-weight: 400;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.sep {
|
||||
margin-top: 6em;
|
||||
margin-bottom: 1.8em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 1.25em;
|
||||
color: #7f8c8d;
|
||||
opacity: 0.6;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 48px;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
font-size: 1.2em;
|
||||
@ -208,15 +251,18 @@ footer {
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
padding: 3px 0 6px;
|
||||
color: #7f8c8d;
|
||||
font-size: 2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
a,
|
||||
a:hover {
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 3px solid #42b983;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,6 +25,10 @@ export default {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 12,
|
||||
shadowColor: "rgba(0, 0, 0, 0.25)"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<h2 :id="id">
|
||||
<h3 :id="id">
|
||||
<a :href="`#${id}`">
|
||||
{{ title }}
|
||||
<small v-if="desc">{{ desc }}</small>
|
||||
</a>
|
||||
</h2>
|
||||
</h3>
|
||||
<section>
|
||||
<figure class="fig hero" v-if="!split">
|
||||
<slot />
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import "echarts";
|
||||
import ECharts, * as exported from "./index";
|
||||
|
||||
export default {
|
||||
...ECharts,
|
||||
...exported
|
||||
};
|
||||
3
src/index.vue2.d.ts
vendored
3
src/index.vue2.d.ts
vendored
@ -1,5 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
import type { Ref, DefineComponent } from "vue-demi";
|
||||
import type { DefineComponent } from "@vue/runtime-core";
|
||||
import type { Ref } from "vue-demi";
|
||||
import type {
|
||||
Option,
|
||||
InitOptions,
|
||||
|
||||
63
src/index.vue2_7.d.ts
vendored
Normal file
63
src/index.vue2_7.d.ts
vendored
Normal file
@ -0,0 +1,63 @@
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
import type { Ref, DefineComponent } from "vue-demi";
|
||||
import type {
|
||||
Option,
|
||||
InitOptions,
|
||||
UpdateOptions,
|
||||
EChartsType,
|
||||
Emits
|
||||
} from "./types";
|
||||
|
||||
declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
|
||||
declare const THEME_KEY = "ecTheme";
|
||||
declare const INIT_OPTIONS_KEY = "ecInitOptions";
|
||||
declare const UPDATE_OPTIONS_KEY = "ecUpdateOptions";
|
||||
|
||||
declare type ChartProps = {
|
||||
loading?: boolean;
|
||||
loadingOptions?: Record<string, unknown>;
|
||||
autoresize?: boolean;
|
||||
option?: Option;
|
||||
theme?: string | Record<string, unknown>;
|
||||
initOptions?: InitOptions;
|
||||
updateOptions?: UpdateOptions;
|
||||
group?: string;
|
||||
manualUpdate?: boolean;
|
||||
};
|
||||
|
||||
type MethodNames =
|
||||
| "getWidth"
|
||||
| "getHeight"
|
||||
| "getDom"
|
||||
| "getOption"
|
||||
| "resize"
|
||||
| "dispatchAction"
|
||||
| "convertToPixel"
|
||||
| "convertFromPixel"
|
||||
| "containPixel"
|
||||
| "getDataURL"
|
||||
| "getConnectedDataURL"
|
||||
| "appendData"
|
||||
| "clear"
|
||||
| "isDisposed"
|
||||
| "dispose"
|
||||
| "setOption";
|
||||
|
||||
declare type ChartMethods = Pick<EChartsType, MethodNames>;
|
||||
|
||||
declare const Chart: DefineComponent<
|
||||
ChartProps,
|
||||
{
|
||||
root: Ref<HTMLElement | undefined>;
|
||||
chart: Ref<EChartsType | undefined>;
|
||||
},
|
||||
{},
|
||||
{},
|
||||
ChartMethods,
|
||||
{},
|
||||
{},
|
||||
Emits
|
||||
>;
|
||||
|
||||
export default Chart;
|
||||
export { INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, THEME_KEY, UPDATE_OPTIONS_KEY };
|
||||
@ -1 +1,2 @@
|
||||
x-vue-echarts,.echarts-inner{display:block;width:100%;height:100%;min-width:0}
|
||||
x-vue-echarts{display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
|
||||
.vue-echarts-inner{flex-grow:1;min-width:0}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { init } from "echarts/core";
|
||||
import type { Ref } from "vue-demi";
|
||||
import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { unref } from "vue-demi";
|
||||
|
||||
import type { Injection } from "./types";
|
||||
|
||||
type Attrs = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const nested = require("postcss-nested");
|
||||
import nested from "postcss-nested";
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
outputDir: "demo",
|
||||
css: {
|
||||
loaderOptions: {
|
||||
|
||||
Reference in New Issue
Block a user