[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10028":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":32,"discoverSource":33},10028,"vue-echarts","ecomfe\u002Fvue-echarts","ecomfe","Vue.js component for Apache ECharts™.","https:\u002F\u002Fvue-echarts.dev",null,"TypeScript",10715,1499,137,2,0,5,8,28,18,86.33,"MIT License",false,"main",true,[27,28,5],"echarts","vue","2026-06-12 04:00:48","\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fvue-echarts.dev\u002F\">\u003Cimg alt=\"Vue ECharts\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fecomfe\u002Fvue-echarts\u002Frefs\u002Fheads\u002Fmain\u002Fdemo\u002Fpublic\u002Ffavicon.svg\" width=\"96\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch1 align=\"center\">Vue ECharts\u003C\u002Fh1>\n\n\u003Cp align=\"center\">Vue.js component for Apache ECharts™.\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Ca href=\"https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fvue-echarts\">\u003Cimg alt=\"npm version\" src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-echarts\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fcodecov.io\u002Fgh\u002Fecomfe\u002Fvue-echarts\">\u003Cimg alt=\"test coverage\" src=\"https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Fecomfe\u002Fvue-echarts\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fvue-echarts.dev\u002F\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDemo%20%C2%BB-20c3aa\" alt=\"View demo\">\u003C\u002Fa> \u003Ca href=\".\u002FREADME.zh-Hans.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000\" alt=\"前往中文版\">\u003C\u002Fa>\u003C\u002Fp>\n\n> Still using Vue 2? Read v7 docs [here →](https:\u002F\u002Fgithub.com\u002Fecomfe\u002Fvue-echarts\u002Ftree\u002F7.x)\n\n## Installation & usage\n\n### npm\n\n```sh\nnpm install echarts vue-echarts\n```\n\n#### Example\n\n\u003Cdetails open>\n\u003Csummary>\u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fvue-echarts-8?file=src%2FApp.vue\">Demo →\u003C\u002Fa>\u003C\u002Fsummary>\n\n```vue\n\u003Ctemplate>\n  \u003CVChart class=\"chart\" :option=\"option\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { use } from \"echarts\u002Fcore\";\nimport { CanvasRenderer } from \"echarts\u002Frenderers\";\nimport { PieChart } from \"echarts\u002Fcharts\";\nimport { TitleComponent, TooltipComponent, LegendComponent } from \"echarts\u002Fcomponents\";\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\u002F>{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\u002Fscript>\n\n\u003Cstyle scoped>\n.chart {\n  height: 400px;\n}\n\u003C\u002Fstyle>\n```\n\n\u003C\u002Fdetails>\n\n#### On-demand importing \u003Csup>\u003Ca href=\"#on-demand-importing\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Frecommended-10B981\" alt=\"recommended\" align=\"middle\" height=\"16\">\u003C\u002Fa>\u003C\u002Fsup>\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:\u002F\u002Fvue-echarts.dev\u002F#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you.\n\n\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"assets\u002Fcodegen-dark.webp\">\n  \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"assets\u002Fcodegen-light.webp\">\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\u002Fcodegen-light.webp\">\n\u003C\u002Fpicture>\n\n[Try it →](https:\u002F\u002Fvue-echarts.dev\u002F#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>` inside your HTML file and access the component via `window.VueECharts`.\n\n\u003Cdetails>\n\u003Csummary>\u003Ca href=\"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fvue-echarts-8-global?file=index.html\">Demo →\u003C\u002Fa>\u003C\u002Fsummary>\n\n\u003C!-- scripts:start -->\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fecharts@6.0.0\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue@3.5.27\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue-echarts@8.1.0-beta.2\">\u003C\u002Fscript>\n```\n\n\u003C!-- scripts:end -->\n\n```js\nconst app = Vue.createApp(...)\n\n\u002F\u002F register globally (or you can do it locally)\napp.component('VChart', VueECharts)\n```\n\n\u003C\u002Fdetails>\n\nSee more examples [here](https:\u002F\u002Fgithub.com\u002Fecomfe\u002Fvue-echarts\u002Ftree\u002Fmain\u002Fdemo).\n\n### Props\n\n- `init-options: object`\n\n  Optional chart init configurations. See `echarts.init`'s `opts` parameter [here →](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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:\u002F\u002Fecharts.apache.org\u002Fen\u002Foption.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\u002Fanonymous 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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echarts.connect). See `echartsInstance.group` [here →](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.group)\n\n- `autoresize: boolean | { throttle?: number, onResize?: () => 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\u002For 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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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>\n  \u003CVChart :option=\"option\" @highlight=\"handleHighlight\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n> [!NOTE]\n> 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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.highlight)\n- `downplay` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.downplay)\n- `selectchanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.selectchanged)\n- `legendselectchanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendselectchanged)\n- `legendselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendselected)\n- `legendunselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendunselected)\n- `legendselectall` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendselectall)\n- `legendinverseselect` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendinverseselect)\n- `legendscroll` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.legendscroll)\n- `datazoom` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.datazoom)\n- `datarangeselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.datarangeselected)\n- `timelinechanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.timelinechanged)\n- `timelineplaychanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.timelineplaychanged)\n- `restore` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.restore)\n- `dataviewchanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.dataviewchanged)\n- `magictypechanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.magictypechanged)\n- `geoselectchanged` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.geoselectchanged)\n- `geoselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.geoselected)\n- `geounselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.geounselected)\n- `axisareaselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.axisareaselected)\n- `brush` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.brush)\n- `brushEnd` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.brushEnd)\n- `brushselected` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.brushselected)\n- `globalcursortaken` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.globalcursortaken)\n- `rendered` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.rendered)\n- `finished` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.finished)\n- Mouse events\n  - `click` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.click)\n  - `dblclick` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.dblclick)\n  - `mouseover` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.mouseover)\n  - `mouseout` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.mouseout)\n  - `mousemove` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.mousemove)\n  - `mousedown` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.mousedown)\n  - `mouseup` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.mouseup)\n  - `globalout` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#events.Mouse%20events.globalout)\n  - `contextmenu` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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>\n  \u003CVChart @native:click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>\n```\n\nEvent handlers passed via attrs are reactive by default. Updating `onClick`, `onZr:*`, or `onNative:*` handlers will rebind them automatically.\n\n### Provide \u002F inject\n\nVue ECharts provides provide\u002Finject 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>\n\u003Csummary>Composition API\u003C\u002Fsummary>\n\n```js\nimport { THEME_KEY } from \"vue-echarts\";\nimport { provide } from \"vue\";\n\nprovide(THEME_KEY, \"dark\");\n\n\u002F\u002F or provide a ref\nconst theme = ref(\"dark\");\nprovide(THEME_KEY, theme);\n\n\u002F\u002F getter is also supported\nprovide(THEME_KEY, () => theme.value);\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>Options API\u003C\u002Fsummary>\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\u002F\u002F Or make injections reactive\nexport default {\n  data() {\n    return {\n      theme: 'dark'\n    }\n  },\n  provide() {\n    return {\n      [THEME_KEY]: computed(() => this.theme)\n    }\n  }\n}\n```\n\n\u003C\u002Fdetails>\n\n### Methods\n\n- `setOption` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.setOption)\n- `getWidth` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getWidth)\n- `getHeight` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getHeight)\n- `getDom` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getDom)\n- `getOption` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getOption)\n- `resize` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.resize)\n- `dispatchAction` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.dispatchAction)\n- `convertToPixel` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.convertToPixel)\n- `convertFromPixel` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.convertFromPixel)\n- `containPixel` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.containPixel)\n- `getDataURL` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getDataURL)\n- `getConnectedDataURL` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.getConnectedDataURL)\n- `clear` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.clear)\n- `dispose` [→](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.dispose)\n\n> [!NOTE]\n> The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):\n>\n> - [`showLoading`](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.showLoading) \u002F [`hideLoading`](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead.\n> - [`setTheme`](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.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:\u002F\u002Fecharts.apache.org\u002Fen\u002Foption.html#tooltip.formatter).\n- Callback slots for [`toolbox.feature.dataView.optionToContent`](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Foption.html#toolbox.feature.dataView.optionToContent).\n- Optional `#graphic` slot (enabled by importing `vue-echarts\u002Fgraphic`) for building [`option.graphic`](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Foption.html#graphic) declaratively with `G*` components.\n\n#### Callback slot naming convention (`tooltip*` \u002F `dataView*`)\n\nThese naming rules apply to callback slots only. The graphic slot name is always `#graphic`.\n\n- Slot names begin with `tooltip`\u002F`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>\n\u003Csummary>Usage\u003C\u002Fsummary>\n\n```vue\n\u003Ctemplate>\n  \u003CVChart :option=\"chartOptions\">\n    \u003C!-- Global `tooltip.formatter` -->\n    \u003Ctemplate #tooltip=\"params\">\n      \u003Cdiv v-for=\"(param, i) in params\" :key=\"i\">\n        \u003Cspan v-html=\"param.marker\" \u002F>\n        \u003Cspan>{{ param.seriesName }}\u003C\u002Fspan>\n        \u003Cspan>{{ param.value[0] }}\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n\n    \u003C!-- Tooltip on xAxis -->\n    \u003Ctemplate #tooltip-xAxis=\"params\">\n      \u003Cdiv>X-Axis : {{ params.value }}\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n\n    \u003C!-- Data View Content -->\n    \u003Ctemplate #dataView=\"option\">\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth v-for=\"(t, i) in option.dataset[0].source[0]\" :key=\"i\">\n              {{ t }}\n            \u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr v-for=\"(row, i) in option.dataset[0].source.slice(1)\" :key=\"i\">\n            \u003Cth>{{ row[0] }}\u003C\u002Fth>\n            \u003Ctd v-for=\"(v, i) in row.slice(1)\" :key=\"i\">{{ v }}\u003C\u002Ftd>\n          \u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVChart>\n\u003C\u002Ftemplate>\n```\n\n[Example →](https:\u002F\u002Fvue-echarts.dev\u002F#line)\n\n\u003C\u002Fdetails>\n\n> [!NOTE]\n> Slots take precedence over the corresponding callback defined in `props.option`.\n\n#### Graphic slot \u003Csup>\u003Ca href=\"#slots\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fnew-A855F7\" alt=\"new\" align=\"middle\" height=\"16\">\u003C\u002Fa>\u003C\u002Fsup>\n\n```ts\nimport { GGroup, GRect, GText } from \"vue-echarts\u002Fgraphic\";\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:\u002F\u002Fecharts.apache.org\u002Fen\u002Foption.html#graphic)\n\n> [!NOTE]\n>\n> - Graphic element events additionally support `dblclick` and `contextmenu`.\n> - Event listeners support the `.once` modifier.\n> - `#graphic` overrides `option.graphic`. In `manual-update` mode, call `chartRef.setOption(...)` to apply changes.\n\n\u003Cdetails>\n\u003Csummary>Usage\u003C\u002Fsummary>\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport type { ElementEvent } from \"echarts\u002Fcore\";\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\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVChart :option=\"option\">\n    \u003Ctemplate #graphic>\n      \u003CGGroup id=\"drag-handle\" :x=\"overlay.x\" :y=\"overlay.y\">\n        \u003CGRect :width=\"88\" :height=\"28\" :r=\"6\" fill=\"#5470c6\" draggable @drag=\"onDrag\" \u002F>\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        \u002F>\n      \u003C\u002FGGroup>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVChart>\n\u003C\u002Ftemplate>\n```\n\n\u003C\u002Fdetails>\n\n### Static methods\n\nStatic methods can be accessed from [`echarts` itself](https:\u002F\u002Fecharts.apache.org\u002Fen\u002Fapi.html#echarts).\n\n## CSP: `style-src` or `style-src-elem`\n\nIf you are **both** enforcing a strict CSP that prevents inline `\u003Cstyle>` injection and targeting browsers that don't support the [CSSStyleSheet() constructor](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCSSStyleSheet\u002FCSSStyleSheet#browser_compatibility), you need to manually include `vue-echarts\u002Fstyle.css`.\n\n## Migration to v8\n\n> [!NOTE]\n> Please make sure to read the [upgrade guide](https:\u002F\u002Fecharts.apache.org\u002Fhandbook\u002Fen\u002Fbasics\u002Frelease-note\u002Fv6-upgrade-guide\u002F) 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:\u002F\u002Fgithub.com\u002Fecomfe\u002Fvue-echarts\u002Ftree\u002F7.x).\n\n- **Browser compatibility changes:** We no longer provide compatibility for browsers without native [`class`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FClasses#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\u002Fcsp` is removed. Use `vue-echarts` instead. You only need to manually include `vue-echarts\u002Fstyle.css` if you are **both** enforcing a strict CSP that prevents inline `\u003Cstyle>` injection and targeting browsers that don't support the [`CSSStyleSheet()` constructor](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCSSStyleSheet\u002FCSSStyleSheet#browser_compatibility).\n\n## Local development\n\n```sh\npnpm i\npnpm dev\n```\n\nOpen `http:\u002F\u002Flocalhost:5173` to see the demo.\n\nFor testing and CI details, see [`tests\u002FTESTING.md`](tests\u002FTESTING.md).\n\n## Notice\n\nThe Apache Software Foundation [Apache ECharts, ECharts](https:\u002F\u002Fecharts.apache.org\u002F), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https:\u002F\u002Fwww.apache.org\u002F).\n","Vue ECharts 是一个用于在 Vue.js 项目中集成 Apache ECharts 的组件。它支持通过简单的配置即可在 Vue 应用中展示丰富的图表类型，如饼图、折线图等，并且能够与 Vue 的响应式系统无缝结合。该项目使用 TypeScript 开发，确保了代码的健壮性和可维护性。此外，它还提供了按需加载功能，帮助开发者优化应用的加载性能。Vue Echarts 适用于需要在 Web 应用中可视化数据的各种场景，尤其是那些已经采用或计划采用 Vue 框架进行前端开发的项目。","2026-06-11 03:26:12","top_topic"]