ecomfe / vue-echarts

Vue ECharts Vue.js component for Apache ECharts™. > Still using Vue 2? Read v7 docs here → Installation & usage npm Example Demo → On-demand importing  To 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. Simply paste your code into the tool, and it will generate the exact import statements for you. Try it → But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code: CDN Drop inside your HTML file and access the component via . Demo → See more examples here. Props • Optional chart init configurations. See 's parameter here → Injection key: . • Theme to be applied. See 's parameter here → Injection key: . • ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call . Read more here → #### Smart update • If you supply (via prop or injection), Vue ECharts forwards it directly to and skips the planner. • Manual calls (only available when is ) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations. • Otherwise, Vue ECharts analyses the change: removed objects become , removed arrays become with , ID/anonymous deletions trigger , and risky changes fall back to . • Options for updating chart option. If supplied (or injected), Vue ECharts forwards it directly to , skipping the smart update. See 's parameter here → Injection key: . • Group name to be used in chart connection. See here → • (default: ) 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. • (default: ) Whether the chart is in loading state. • Configuration item of loading animation. See 's parameter here → Injection key: . • (default: ) Handy for performance-sensitive charts (large or high-frequency updates). When set to , Vue only uses the prop for the initial render; later prop changes do nothing and you must drive updates via on a template ref. If the chart re-initializes (for example due to changes, flipping , or a remount), the manual state is discarded and the chart is rendered again from the current value. Events You can bind events with Vue's directive. > [!NOTE] > Only the event modifier is supported as other modifiers are tightly coupled with the DOM event system. Vue ECharts support the following events: • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • → • Mouse events • → • → • → • → • → • → • → • → • → • ZRender events • - • - • - See supported events in the ECharts API reference → Native DOM events As 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 to bind native DOM events. Event handlers passed via attrs are reactive by default. Updating , , or handlers will rebind them automatically. Provide / inject Vue ECharts provides provide/inject API for , , and to help configuring contextual options. eg. for you can use the provide API like this: Composition API Options API Methods • → • → • → • → • → • → • → • → • → • → • → • → • → • → > [!NOTE] > The following ECharts instance methods aren't exposed because their functionality is already provided by component props: > > - / : use the and props instead. > - : use the prop instead. Slots Vue ECharts supports three slot categories: • Callback slots for . • Callback slots for . • Optional slot (enabled by importing ) for building declaratively with components. Callback slot naming convention ( / ) These naming rules apply to callback slots only. The graphic slot name is always . • Slot names begin with / , followed by hyphen-separated path segments to the target. • Each segment corresponds to an property name or an array index (for arrays, use the numeric index). • The constructed slot name maps directly to the nested callback it overrides. **Example mappings**: • → • → • → • → • → • → The slot props correspond to the first parameter of the callback function. Usage Example → > [!NOTE] > Slots take precedence over the corresponding callback defined in . Graphic slot  Available components: • • • • • • • • • • • • • Read more at ECharts → > [!NOTE] > > - Graphic element events additionally support and . > - Event listeners support the modifier. > - overrides . In mode, call to apply changes. Usage Static methods Static methods can be accessed from itself. CSP: or If you are **both** enforcing a strict CSP that prevents inline injection and targeting browsers that don't support the CSSStyleSheet() constructor, you need to manually include . Migration to v8 > [!NOTE] > Please make sure to read the upgrade guide for ECharts 6 as well. The following breaking changes are introduced in : • **Vue 2 support is dropped:** If you still need to stay on Vue 2, use . • **Browser compatibility changes:** We no longer provide compatibility for browsers without native support. If you need to support legacy browsers, you must transpile the code to ES5 yourself. • **CSP entry point removed:** The entry point is removed. Use instead. You only need to manually include if you are **both** enforcing a strict CSP that prevents inline injection and targeting browsers that don't support the constructor. Local development Open to see the demo. For testing and CI details, see . Notice The Apa _...truncated for preview_