{"id":13401831,"url":"https://github.com/ecomfe/vue-echarts","last_synced_at":"2026-02-14T20:16:07.698Z","repository":{"id":37686697,"uuid":"61364083","full_name":"ecomfe/vue-echarts","owner":"ecomfe","description":"Vue.js component for Apache ECharts™.","archived":false,"fork":false,"pushed_at":"2026-02-11T10:25:59.000Z","size":28995,"stargazers_count":10571,"open_issues_count":2,"forks_count":1503,"subscribers_count":138,"default_branch":"main","last_synced_at":"2026-02-11T10:30:50.304Z","etag":null,"topics":["echarts","vue","vue-echarts"],"latest_commit_sha":null,"homepage":"https://vue-echarts.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ecomfe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2016-06-17T09:55:24.000Z","updated_at":"2026-02-11T10:26:01.000Z","dependencies_parsed_at":"2026-01-05T16:00:08.200Z","dependency_job_id":null,"html_url":"https://github.com/ecomfe/vue-echarts","commit_stats":{"total_commits":143,"total_committers":8,"mean_commits":17.875,"dds":0.04895104895104896,"last_synced_commit":"9c34d682c4d6bb1e60d81227fe2acb6d1f793b54"},"previous_names":["justineo/vue-echarts"],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/ecomfe/vue-echarts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fvue-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fvue-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fvue-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fvue-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecomfe","download_url":"https://codeload.github.com/ecomfe/vue-echarts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fvue-echarts/sbom","scorecard":{"id":365695,"data":{"date":"2025-08-11","repo":{"name":"github.com/ecomfe/vue-echarts","commit":"c1035a9e792743c506a4460fab93d4b5c9af6e96"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.6,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: topLevel 'contents' permission set to 'write': .github/workflows/release.yml:10","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":7,"reason":"Found 8/11 approved changesets -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/vue-echarts/release.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/release.yml:53","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":9,"reason":"SAST tool is not run on all commits -- score normalized to 9","details":["Warn: 25 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T11:47:38.970Z","repository_id":37686697,"created_at":"2025-08-18T11:47:38.970Z","updated_at":"2025-08-18T11:47:38.970Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29455205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T15:52:44.973Z","status":"ssl_error","status_checked_at":"2026-02-14T15:52:11.208Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["echarts","vue","vue-echarts"],"created_at":"2024-07-30T19:01:07.710Z","updated_at":"2026-02-14T20:16:07.686Z","avatar_url":"https://github.com/ecomfe.png","language":"TypeScript","funding_links":[],"categories":["JavaScript","TypeScript","Repository","UI Components","Components \u0026 Libraries","Projects List"],"sub_categories":["Data Visualization","Charts","UI Components"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://vue-echarts.dev/\"\u003e\u003cimg alt=\"Vue ECharts\" src=\"https://raw.githubusercontent.com/ecomfe/vue-echarts/refs/heads/main/demo/public/favicon.svg\" width=\"96\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eVue ECharts\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eVue.js component for Apache ECharts™.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://npmjs.com/package/vue-echarts\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/vue-echarts\"\u003e\u003c/a\u003e \u003ca href=\"https://codecov.io/gh/ecomfe/vue-echarts\"\u003e\u003cimg alt=\"test coverage\" src=\"https://img.shields.io/codecov/c/github/ecomfe/vue-echarts\"\u003e\u003c/a\u003e \u003ca href=\"https://vue-echarts.dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo%20%C2%BB-20c3aa\" alt=\"View demo\"\u003e\u003c/a\u003e \u003ca href=\"./README.zh-Hans.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000\" alt=\"前往中文版\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003e Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)\n\n## Installation \u0026 usage\n\n### npm\n\n```sh\nnpm install echarts vue-echarts\n```\n\n#### Example\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003ca href=\"https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue\"\u003eDemo →\u003c/a\u003e\u003c/summary\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cVChart class=\"chart\" :option=\"option\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { use } from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport { PieChart } from \"echarts/charts\";\nimport { TitleComponent, TooltipComponent, LegendComponent } from \"echarts/components\";\nimport VChart, { THEME_KEY } from \"vue-echarts\";\nimport { ref, provide } from \"vue\";\n\nuse([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);\n\nprovide(THEME_KEY, \"dark\");\n\nconst option = ref({\n  title: {\n    text: \"Traffic Sources\",\n    left: \"center\",\n  },\n  tooltip: {\n    trigger: \"item\",\n    formatter: \"{a} \u003cbr/\u003e{b} : {c} ({d}%)\",\n  },\n  legend: {\n    orient: \"vertical\",\n    left: \"left\",\n    data: [\"Direct\", \"Email\", \"Ad Networks\", \"Video Ads\", \"Search Engines\"],\n  },\n  series: [\n    {\n      name: \"Traffic Sources\",\n      type: \"pie\",\n      radius: \"55%\",\n      center: [\"50%\", \"60%\"],\n      data: [\n        { value: 335, name: \"Direct\" },\n        { value: 310, name: \"Email\" },\n        { value: 234, name: \"Ad Networks\" },\n        { value: 135, name: \"Video Ads\" },\n        { value: 1548, name: \"Search Engines\" },\n      ],\n      emphasis: {\n        itemStyle: {\n          shadowBlur: 10,\n          shadowOffsetX: 0,\n          shadowColor: \"rgba(0, 0, 0, 0.5)\",\n        },\n      },\n    },\n  ],\n});\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.chart {\n  height: 400px;\n}\n\u003c/style\u003e\n```\n\n\u003c/details\u003e\n\n#### On-demand importing\u0026nbsp;\u003csup\u003e\u003ca href=\"#on-demand-importing\"\u003e\u003cimg src=\"https://img.shields.io/badge/recommended-10B981\" alt=\"recommended\" align=\"middle\" height=\"16\"\u003e\u003c/a\u003e\u003c/sup\u003e\n\nTo keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, we’ve created an [import code generator](https://vue-echarts.dev/#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you.\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"assets/codegen-dark.webp\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"assets/codegen-light.webp\"\u003e\n  \u003cimg alt=\"A modal for generating ECharts import code. The left panel shows a chart configuration in JSON, while the right panel displays TypeScript import statements for ECharts charts and components.\" src=\"assets/codegen-light.webp\"\u003e\n\u003c/picture\u003e\n\n[Try it →](https://vue-echarts.dev/#codegen)\n\nBut if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:\n\n```js\nimport \"echarts\";\n```\n\n### CDN\n\nDrop `\u003cscript\u003e` inside your HTML file and access the component via `window.VueECharts`.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ca href=\"https://stackblitz.com/edit/vue-echarts-8-global?file=index.html\"\u003eDemo →\u003c/a\u003e\u003c/summary\u003e\n\n\u003c!-- scripts:start --\u003e\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/echarts@6.0.0\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.5.26\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0-beta.1\"\u003e\u003c/script\u003e\n```\n\n\u003c!-- scripts:end --\u003e\n\n```js\nconst app = Vue.createApp(...)\n\n// register globally (or you can do it locally)\napp.component('VChart', VueECharts)\n```\n\n\u003c/details\u003e\n\nSee more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).\n\n### Props\n\n- `init-options: object`\n\n  Optional chart init configurations. See `echarts.init`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)\n\n  Injection key: `INIT_OPTIONS_KEY`.\n\n- `theme: string | object`\n\n  Theme to be applied. See `echarts.init`'s `theme` parameter [here →](https://echarts.apache.org/en/api.html#echarts.init)\n\n  Injection key: `THEME_KEY`.\n\n- `option: object`\n\n  ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call `setOption`. Read more [here →](https://echarts.apache.org/en/option.html)\n\n  #### Smart update\n  - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner.\n  - Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.\n  - Otherwise, Vue ECharts analyses the change: removed objects become `null`, removed arrays become `[]` with `replaceMerge`, ID/anonymous deletions trigger `replaceMerge`, and risky changes fall back to `notMerge: true`.\n\n- `update-options: object`\n\n  Options for updating chart option. If supplied (or injected), Vue ECharts forwards it directly to `setOption`, skipping the [smart update](#smart-update). See `echartsInstance.setOption`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echartsInstance.setOption)\n\n  Injection key: `UPDATE_OPTIONS_KEY`.\n\n- `group: string`\n\n  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)\n\n- `autoresize: boolean | { throttle?: number, onResize?: () =\u003e void }` (default: `false`)\n\n  Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.\n\n- `loading: boolean` (default: `false`)\n\n  Whether the chart is in loading state.\n\n- `loading-options: object`\n\n  Configuration item of loading animation. See `echartsInstance.showLoading`'s `opts` parameter [here →](https://echarts.apache.org/en/api.html#echartsInstance.showLoading)\n\n  Injection key: `LOADING_OPTIONS_KEY`.\n\n- `manual-update: boolean` (default: `false`)\n\n  Handy for performance-sensitive charts (large or high-frequency updates). When set to `true`, Vue only uses the `option` prop for the initial render; later prop changes do nothing and you must drive updates via `setOption` on a template ref. If the chart re-initializes (for example due to `init-options` changes, flipping `manual-update`, or a remount), the manual state is discarded and the chart is rendered again from the current `option` value.\n\n### Events\n\nYou can bind events with Vue's `v-on` directive.\n\n```vue\n\u003ctemplate\u003e\n  \u003cVChart :option=\"option\" @highlight=\"handleHighlight\" /\u003e\n\u003c/template\u003e\n```\n\n\u003e [!NOTE]\n\u003e Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.\n\nVue ECharts support the following events:\n\n- `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)\n- `downplay` [→](https://echarts.apache.org/en/api.html#events.downplay)\n- `selectchanged` [→](https://echarts.apache.org/en/api.html#events.selectchanged)\n- `legendselectchanged` [→](https://echarts.apache.org/en/api.html#events.legendselectchanged)\n- `legendselected` [→](https://echarts.apache.org/en/api.html#events.legendselected)\n- `legendunselected` [→](https://echarts.apache.org/en/api.html#events.legendunselected)\n- `legendselectall` [→](https://echarts.apache.org/en/api.html#events.legendselectall)\n- `legendinverseselect` [→](https://echarts.apache.org/en/api.html#events.legendinverseselect)\n- `legendscroll` [→](https://echarts.apache.org/en/api.html#events.legendscroll)\n- `datazoom` [→](https://echarts.apache.org/en/api.html#events.datazoom)\n- `datarangeselected` [→](https://echarts.apache.org/en/api.html#events.datarangeselected)\n- `timelinechanged` [→](https://echarts.apache.org/en/api.html#events.timelinechanged)\n- `timelineplaychanged` [→](https://echarts.apache.org/en/api.html#events.timelineplaychanged)\n- `restore` [→](https://echarts.apache.org/en/api.html#events.restore)\n- `dataviewchanged` [→](https://echarts.apache.org/en/api.html#events.dataviewchanged)\n- `magictypechanged` [→](https://echarts.apache.org/en/api.html#events.magictypechanged)\n- `geoselectchanged` [→](https://echarts.apache.org/en/api.html#events.geoselectchanged)\n- `geoselected` [→](https://echarts.apache.org/en/api.html#events.geoselected)\n- `geounselected` [→](https://echarts.apache.org/en/api.html#events.geounselected)\n- `axisareaselected` [→](https://echarts.apache.org/en/api.html#events.axisareaselected)\n- `brush` [→](https://echarts.apache.org/en/api.html#events.brush)\n- `brushEnd` [→](https://echarts.apache.org/en/api.html#events.brushEnd)\n- `brushselected` [→](https://echarts.apache.org/en/api.html#events.brushselected)\n- `globalcursortaken` [→](https://echarts.apache.org/en/api.html#events.globalcursortaken)\n- `rendered` [→](https://echarts.apache.org/en/api.html#events.rendered)\n- `finished` [→](https://echarts.apache.org/en/api.html#events.finished)\n- Mouse events\n  - `click` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.click)\n  - `dblclick` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.dblclick)\n  - `mouseover` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover)\n  - `mouseout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseout)\n  - `mousemove` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousemove)\n  - `mousedown` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mousedown)\n  - `mouseup` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseup)\n  - `globalout` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.globalout)\n  - `contextmenu` [→](https://echarts.apache.org/en/api.html#events.Mouse%20events.contextmenu)\n- ZRender events\n  - `zr:click`\n  - `zr:mousedown`\n  - `zr:mouseup`\n  - `zr:mousewheel`\n  - `zr:dblclick`\n  - `zr:contextmenu`\n\nSee supported events in the [ECharts API reference →](https://echarts.apache.org/en/api.html#events)\n\n#### Native DOM events\n\nAs Vue ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events.\n\n```vue\n\u003ctemplate\u003e\n  \u003cVChart @native:click=\"handleClick\" /\u003e\n\u003c/template\u003e\n```\n\nEvent handlers passed via attrs are reactive by default. Updating `onClick`, `onZr:*`, or `onNative:*` handlers will rebind them automatically.\n\n### Provide / inject\n\nVue ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `theme` you can use the provide API like this:\n\n\u003cdetails\u003e\n\u003csummary\u003eComposition API\u003c/summary\u003e\n\n```js\nimport { THEME_KEY } from \"vue-echarts\";\nimport { provide } from \"vue\";\n\nprovide(THEME_KEY, \"dark\");\n\n// or provide a ref\nconst theme = ref(\"dark\");\nprovide(THEME_KEY, theme);\n\n// getter is also supported\nprovide(THEME_KEY, () =\u003e theme.value);\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eOptions API\u003c/summary\u003e\n\n```js\nimport { THEME_KEY } from 'vue-echarts'\nimport { computed } from 'vue'\n\nexport default {\n  {\n    provide: {\n      [THEME_KEY]: 'dark'\n    }\n  }\n}\n\n// Or make injections reactive\nexport default {\n  data() {\n    return {\n      theme: 'dark'\n    }\n  },\n  provide() {\n    return {\n      [THEME_KEY]: computed(() =\u003e this.theme)\n    }\n  }\n}\n```\n\n\u003c/details\u003e\n\n### Methods\n\n- `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption)\n- `getWidth` [→](https://echarts.apache.org/en/api.html#echartsInstance.getWidth)\n- `getHeight` [→](https://echarts.apache.org/en/api.html#echartsInstance.getHeight)\n- `getDom` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDom)\n- `getOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.getOption)\n- `resize` [→](https://echarts.apache.org/en/api.html#echartsInstance.resize)\n- `dispatchAction` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispatchAction)\n- `convertToPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel)\n- `convertFromPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel)\n- `containPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.containPixel)\n- `getDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDataURL)\n- `getConnectedDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL)\n- `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)\n- `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose)\n\n\u003e [!NOTE]\n\u003e The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):\n\u003e\n\u003e - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead.\n\u003e - [`setTheme`](https://echarts.apache.org/en/api.html#echartsInstance.setTheme): use the `theme` prop instead.\n\n### Slots\n\nVue ECharts supports three slot categories:\n\n- Callback slots for [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter).\n- Callback slots for [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent).\n- Optional `#graphic` slot (enabled by importing `vue-echarts/graphic`) for building [`option.graphic`](https://echarts.apache.org/en/option.html#graphic) declaratively with `G*` components.\n\n#### Callback slot naming convention (`tooltip*` / `dataView*`)\n\nThese naming rules apply to callback slots only. The graphic slot name is always `#graphic`.\n\n- Slot names begin with `tooltip`/`dataView`, followed by hyphen-separated path segments to the target.\n- Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).\n- The constructed slot name maps directly to the nested callback it overrides.\n\n**Example mappings**:\n\n- `tooltip` → `option.tooltip.formatter`\n- `tooltip-baseOption` → `option.baseOption.tooltip.formatter`\n- `tooltip-xAxis-1` → `option.xAxis[1].tooltip.formatter`\n- `tooltip-series-2-data-4` → `option.series[2].data[4].tooltip.formatter`\n- `dataView` → `option.toolbox.feature.dataView.optionToContent`\n- `dataView-media-1-option` → `option.media[1].option.toolbox.feature.dataView.optionToContent`\n\nThe slot props correspond to the first parameter of the callback function.\n\n\u003cdetails\u003e\n\u003csummary\u003eUsage\u003c/summary\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cVChart :option=\"chartOptions\"\u003e\n    \u003c!-- Global `tooltip.formatter` --\u003e\n    \u003ctemplate #tooltip=\"params\"\u003e\n      \u003cdiv v-for=\"(param, i) in params\" :key=\"i\"\u003e\n        \u003cspan v-html=\"param.marker\" /\u003e\n        \u003cspan\u003e{{ param.seriesName }}\u003c/span\u003e\n        \u003cspan\u003e{{ param.value[0] }}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003c!-- Tooltip on xAxis --\u003e\n    \u003ctemplate #tooltip-xAxis=\"params\"\u003e\n      \u003cdiv\u003eX-Axis : {{ params.value }}\u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003c!-- Data View Content --\u003e\n    \u003ctemplate #dataView=\"option\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth v-for=\"(t, i) in option.dataset[0].source[0]\" :key=\"i\"\u003e\n              {{ t }}\n            \u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr v-for=\"(row, i) in option.dataset[0].source.slice(1)\" :key=\"i\"\u003e\n            \u003cth\u003e{{ row[0] }}\u003c/th\u003e\n            \u003ctd v-for=\"(v, i) in row.slice(1)\" :key=\"i\"\u003e{{ v }}\u003c/td\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/template\u003e\n  \u003c/VChart\u003e\n\u003c/template\u003e\n```\n\n[Example →](https://vue-echarts.dev/#line)\n\n\u003c/details\u003e\n\n\u003e [!NOTE]\n\u003e Slots take precedence over the corresponding callback defined in `props.option`.\n\n#### Graphic slot\u0026nbsp;\u003csup\u003e\u003ca href=\"#slots\"\u003e\u003cimg src=\"https://img.shields.io/badge/new-A855F7\" alt=\"new\" align=\"middle\" height=\"16\"\u003e\u003c/a\u003e\u003c/sup\u003e\n\n```ts\nimport { GGroup, GRect, GText } from \"vue-echarts/graphic\";\n```\n\nAvailable components:\n\n- `GGroup`\n- `GRect`\n- `GCircle`\n- `GText`\n- `GLine`\n- `GPolyline`\n- `GPolygon`\n- `GImage`\n- `GSector`\n- `GRing`\n- `GArc`\n- `GBezierCurve`\n- `GCompoundPath`\n\nRead more at [ECharts `option.graphic` →](https://echarts.apache.org/en/option.html#graphic)\n\n\u003e [!NOTE]\n\u003e\n\u003e - Graphic element events additionally support `dblclick` and `contextmenu`.\n\u003e - Event listeners support the `.once` modifier.\n\u003e - `#graphic` overrides `option.graphic`. In `manual-update` mode, call `chartRef.setOption(...)` to apply changes.\n\n\u003cdetails\u003e\n\u003csummary\u003eUsage\u003c/summary\u003e\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nimport type { ElementEvent } from \"echarts/core\";\n\nconst option = {\n  xAxis: { type: \"category\", data: [\"Mon\", \"Tue\", \"Wed\"] },\n  yAxis: { type: \"value\" },\n  series: [{ type: \"line\", data: [120, 200, 150] }],\n};\n\nconst overlay = ref({ x: 84, y: 22 });\n\nfunction onDrag(event: ElementEvent) {\n  overlay.value.x = event.offsetX - 44;\n  overlay.value.y = event.offsetY - 14;\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVChart :option=\"option\"\u003e\n    \u003ctemplate #graphic\u003e\n      \u003cGGroup id=\"drag-handle\" :x=\"overlay.x\" :y=\"overlay.y\"\u003e\n        \u003cGRect :width=\"88\" :height=\"28\" :r=\"6\" fill=\"#5470c6\" draggable @drag=\"onDrag\" /\u003e\n        \u003cGText\n          :x=\"10\"\n          :y=\"8\"\n          :text=\"`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`\"\n          text-fill=\"#fff\"\n        /\u003e\n      \u003c/GGroup\u003e\n    \u003c/template\u003e\n  \u003c/VChart\u003e\n\u003c/template\u003e\n```\n\n\u003c/details\u003e\n\n### Static methods\n\nStatic methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).\n\n## CSP: `style-src` or `style-src-elem`\n\nIf you are **both** enforcing a strict CSP that prevents inline `\u003cstyle\u003e` injection and targeting browsers that don't support the [CSSStyleSheet() constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility), you need to manually include `vue-echarts/style.css`.\n\n## Migration to v8\n\n\u003e [!NOTE]\n\u003e Please make sure to read the [upgrade guide](https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide/) for ECharts 6 as well.\n\nThe following breaking changes are introduced in `vue-echarts@8`:\n\n- **Vue 2 support is dropped:** If you still need to stay on Vue 2, use [`vue-echarts@7`](https://github.com/ecomfe/vue-echarts/tree/7.x).\n\n- **Browser compatibility changes:** We no longer provide compatibility for browsers without native [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#browser_compatibility) support. If you need to support legacy browsers, you must transpile the code to ES5 yourself.\n\n- **CSP entry point removed:** The entry point `vue-echarts/csp` is removed. Use `vue-echarts` instead. You only need to manually include `vue-echarts/style.css` if you are **both** enforcing a strict CSP that prevents inline `\u003cstyle\u003e` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet#browser_compatibility).\n\n## Local development\n\n```sh\npnpm i\npnpm dev\n```\n\nOpen `http://localhost:5173` to see the demo.\n\nFor testing and CI details, see [`tests/TESTING.md`](tests/TESTING.md).\n\n## Notice\n\nThe Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fvue-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecomfe%2Fvue-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fvue-echarts/lists"}