⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.1
Server IP:
185.238.29.86
Server:
Linux server2 6.8.12-6-pve #1 SMP PREEMPT_DYNAMIC PMX 6.8.12-6 (2024-12-19T19:05Z) x86_64
Server Software:
nginx/1.18.0
PHP Version:
8.1.31
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
var
/
www
/
invoice
/
node_modules
/
vue-echarts
/
Edit File: README.md
<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"><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> --- <h2>π‘ Heads up π‘ <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%F0%9F%87%A8%F0%9F%87%B3-%E4%B8%AD%E6%96%87%E7%89%88-white?labelColor=white" alt="εεΎδΈζη" align="right" height="24"/></a></h2> If you are migrating from `vue-echarts` β€ 5, you should read the _[Migration to v6](#migration-to-v6)_ section before you update to v6. Not ready yet? Read documentation for older versions [here β](https://github.com/ecomfe/vue-echarts/tree/5.x) ## Installation & Usage ### npm & ESM ```bash $ npm install echarts vue-echarts ``` To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed: ```sh npm i -D @vue/composition-api ``` If you are using _NuxtJS_ on top of _Vue 2_, you'll also need `@nuxtjs/composition-api`: ```sh npm i -D @nuxtjs/composition-api ``` And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`. #### Example <details> <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo β</a></summary> ```vue <template> <v-chart class="chart" :option="option" /> </template> <script setup> import { use } from "echarts/core"; import { CanvasRenderer } from "echarts/renderers"; import { PieChart } from "echarts/charts"; import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components"; import VChart, { THEME_KEY } from "vue-echarts"; import { ref, provide } from "vue"; use([ CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent ]); provide(THEME_KEY, "dark"); const option = ref({ 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)" } } } ] }); </script> <style scoped> .chart { height: 400px; } </style> ``` </details> <details> <summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue">Demo β</a></summary> ```vue <template> <v-chart class="chart" :option="option" /> </template> <script> import { use } from "echarts/core"; import { CanvasRenderer } from "echarts/renderers"; import { PieChart } from "echarts/charts"; import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components"; import VChart, { THEME_KEY } from "vue-echarts"; use([ CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent ]); export default { name: "HelloWorld", components: { VChart }, provide: { [THEME_KEY]: "dark" }, data() { return { option: { 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)" } } } ] } }; } }; </script> <style scoped> .chart { height: 400px; } </style> ``` </details> We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here β](https://github.com/apache/echarts/blob/master/src/echarts.all.ts) But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code: ```js import "echarts"; ``` ### CDN & Global variable Drop `<script>` inside your HTML file and access the component via `window.VueECharts`. <details> <summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo β</a></summary> <!-- vue3Scripts:start --> ```html <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script> <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script> ``` <!-- vue3Scripts:end --> ```js const app = Vue.createApp(...) // register globally (or you can do it locally) app.component('v-chart', VueECharts) ``` </details> <details> <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.14"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2"></script> <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script> ``` <!-- vue2Scripts:end --> ```js // register globally (or you can do it locally) Vue.component("v-chart", VueECharts); ``` </details> See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/demo). ### Props - `init-options: object` Optional chart init configurations. See `echarts.init`'s `opts` parameter [here β](https://echarts.apache.org/en/api.html#echarts.init) Injection key: `INIT_OPTIONS_KEY`. - `theme: string | object` Theme to be applied. See `echarts.init`'s `theme` parameter [here β](https://echarts.apache.org/en/api.html#echarts.init) Injection key: `THEME_KEY`. - `option: object` ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here β](https://echarts.apache.org/en/option.html) > π‘ When `update-options` is not specified, `notMerge: false` will be specified by default when the `setOption` method is called if the `option` object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to `option`, ` notMerge: true` will be specified. - `update-options: object` Options for updating chart option. See `echartsInstance.setOption`'s `opts` parameter [here β](https://echarts.apache.org/en/api.html#echartsInstance.setOption) Injection key: `UPDATE_OPTIONS_KEY`. - `group: string` Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See `echartsInstance.group` [here β](https://echarts.apache.org/en/api.html#echartsInstance.group) - `autoresize: boolean` (default: `false`) Whether the chart should be resized automatically whenever its root is resized. - `loading: boolean` (default: `false`) Whether the chart is in loading state. - `loading-options: object` Configuration item of loading animation. See `echartsInstance.showLoading`'s `opts` parameter [here β](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) Injection key: `LOADING_OPTIONS_KEY`. - `manual-update: boolean` (default: `false`) For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for `option` prop. By specifying `manual-update` prop with `true` and not providing `option` prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with `ref` and manually call `setOption` method to update the chart. ### Provide / Inject Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `init-options` you can use the provide API like this: <details> <summary>Vue 3</summary> ```js import { THEME_KEY } from 'vue-echarts' import { provide } from 'vue' // composition API provide(THEME_KEY, 'dark') // options API { provide: { [THEME_KEY]: 'dark' } } ``` </details> <details> <summary>Vue 2</summary> ```js import { THEME_KEY } from 'vue-echarts' // in component options { provide: { [THEME_KEY]: 'dark' } } ``` > **Note** > > You need to provide an object for Vue 2 if you want to change it dynamically. > > ```js > // in component options > { > data () { > return { > theme: { value: 'dark' } > } > }, > provide () { > return { > [THEME_KEY]: this.theme > } > } > } > ``` </details> ### Methods - `setOption` [β](https://echarts.apache.org/en/api.html#echartsInstance.setOption) - `getWidth` [β](https://echarts.apache.org/en/api.html#echartsInstance.getWidth) - `getHeight` [β](https://echarts.apache.org/en/api.html#echartsInstance.getHeight) - `getDom` [β](https://echarts.apache.org/en/api.html#echartsInstance.getDom) - `getOption` [β](https://echarts.apache.org/en/api.html#echartsInstance.getOption) - `resize` [β](https://echarts.apache.org/en/api.html#echartsInstance.resize) - `dispatchAction` [β](https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction) - `convertToPixel` [β](https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel) - `convertFromPixel` [β](https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel) - `containPixel` [β](https://echarts.apache.org/en/api.html#echartsInstance.containPixel) - `showLoading` [β](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) - `hideLoading` [β](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading) - `getDataURL` [β](https://echarts.apache.org/en/api.html#echartsInstance.getDataURL) - `getConnectedDataURL` [β](https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL) - `clear` [β](https://echarts.apache.org/en/api.html#echartsInstance.clear) - `dispose` [β](https://echarts.apache.org/en/api.html#echartsInstance.dispose) ### Static Methods Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts). ### Events You can bind events with Vue's `v-on` directive. ```vue <template> <v-chart :option="option" @highlight="handleHighlight" /> </template> ``` > **Note** > > Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system. Vue-ECharts support the following events: - `highlight` [β](https://echarts.apache.org/en/api.html#events.highlight) - `downplay` [β](https://echarts.apache.org/en/api.html#events.downplay) - `selectchanged` [β](https://echarts.apache.org/en/api.html#events.selectchanged) - `legendselectchanged` [β](https://echarts.apache.org/en/api.html#events.legendselectchanged) - `legendselected` [β](https://echarts.apache.org/en/api.html#events.legendselected) - `legendunselected` [β](https://echarts.apache.org/en/api.html#events.legendunselected) - `legendselectall` [β](https://echarts.apache.org/en/api.html#events.legendselectall) - `legendinverseselect` [β](https://echarts.apache.org/en/api.html#events.legendinverseselect) - `legendscroll` [β](https://echarts.apache.org/en/api.html#events.legendscroll) - `datazoom` [β](https://echarts.apache.org/en/api.html#events.datazoom) - `datarangeselected` [β](https://echarts.apache.org/en/api.html#events.datarangeselected) - `timelinechanged` [β](https://echarts.apache.org/en/api.html#events.timelinechanged) - `timelineplaychanged` [β](https://echarts.apache.org/en/api.html#events.timelineplaychanged) - `restore` [β](https://echarts.apache.org/en/api.html#events.restore) - `dataviewchanged` [β](https://echarts.apache.org/en/api.html#events.dataviewchanged) - `magictypechanged` [β](https://echarts.apache.org/en/api.html#events.magictypechanged) - `geoselectchanged` [β](https://echarts.apache.org/en/api.html#events.geoselectchanged) - `geoselected` [β](https://echarts.apache.org/en/api.html#events.geoselected) - `geounselected` [β](https://echarts.apache.org/en/api.html#events.geounselected) - `axisareaselected` [β](https://echarts.apache.org/en/api.html#events.axisareaselected) - `brush` [β](https://echarts.apache.org/en/api.html#events.brush) - `brushEnd` [β](https://echarts.apache.org/en/api.html#events.brushEnd) - `brushselected` [β](https://echarts.apache.org/en/api.html#events.brushselected) - `globalcursortaken` [β](https://echarts.apache.org/en/api.html#events.globalcursortaken) - `rendered` [β](https://echarts.apache.org/en/api.html#events.rendered) - `finished` [β](https://echarts.apache.org/en/api.html#events.finished) - Mouse events - `click` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.click) - `dblclick` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick) - `mouseover` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover) - `mouseout` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout) - `mousemove` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove) - `mousedown` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown) - `mouseup` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup) - `globalout` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout) - `contextmenu` [β](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu) - ZRender events - `zr:click` - `zr:mousedown` - `zr:mouseup` - `zr:mousewheel` - `zr:dblclick` - `zr:contextmenu` See supported events [here β](https://echarts.apache.org/en/api.html#events) ## CSP: `style-src` or `style-src-elem` If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually. ## Migration to v6 > π‘ Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well. 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. ### Props - `options` is renamed to **`option`** to align with ECharts itself. - Updating `option` will respect **`update-options`** configs instead of checking reference change. - `watch-shallow` is removed. Use **`manual-update`** for performance critical scenarios. ### Methods - `mergeOptions` is renamed to **`setOption`** to align with ECharts itself. - `showLoading` and `hideLoading` is removed. Use the **`loading` and `loading-options`** props instead. - `appendData` is removed. (Due to ECharts 5's breaking change.) - All static methods are removed from `vue-echarts`. Use those methods from `echarts` directly. ### Computed getters - Computed getters (`width`, `height`, `isDisposed` and `computedOptions`) are removed. Use the **`getWidth`, `getHeight`, `isDisposed` and `getOption`** methods instead. ### Styles - Now the root element of the component have **`100%Γ100%`** size by default, instead of `600Γ400`. ## Local development ```bash $ npm i $ npm run serve ``` Open `http://localhost:8080` to see the demo.
Simpan