Gathering detailed insights and metrics for vue-echarts
Gathering detailed insights and metrics for vue-echarts
Gathering detailed insights and metrics for vue-echarts
Gathering detailed insights and metrics for vue-echarts
npm install vue-echarts
Typescript
Module System
Node Version
NPM Version
81.7
Supply Chain
97
Quality
81.8
Maintenance
100
Vulnerability
99.3
License
JavaScript (42.25%)
Vue (34.63%)
TypeScript (22.31%)
HTML (0.74%)
CSS (0.07%)
Total Downloads
14,648,574
Last Day
3,756
Last Week
97,636
Last Month
410,337
Last Year
4,845,404
MIT License
10,186 Stars
234 Commits
1,502 Forks
140 Watchers
12 Branches
13 Contributors
Updated on Jul 06, 2025
Minified
Minified + Gzipped
Latest Version
7.0.3
Package Id
vue-echarts@7.0.3
Unpacked Size
175.64 kB
Size
27.60 kB
File Count
15
NPM Version
10.2.3
Node Version
20.10.0
Published on
Aug 19, 2024
Cumulative downloads
Total Downloads
Last Day
-11.9%
3,756
Compared to previous day
Last Week
-6.3%
97,636
Compared to previous week
Last Month
-2.5%
410,337
Compared to previous month
Last Year
52.1%
4,845,404
Compared to previous year
1
3
43
Apache ECharts™ 的 Vue.js 组件。
还在使用 v6?可以继续阅读老版本的文档。前往 →
1npm add echarts vue-echarts
1<template> 2 <v-chart class="chart" :option="option" /> 3</template> 4 5<script setup> 6import { use } from "echarts/core"; 7import { CanvasRenderer } from "echarts/renderers"; 8import { PieChart } from "echarts/charts"; 9import { 10 TitleComponent, 11 TooltipComponent, 12 LegendComponent 13} from "echarts/components"; 14import VChart, { THEME_KEY } from "vue-echarts"; 15import { ref, provide } from "vue"; 16 17use([ 18 CanvasRenderer, 19 PieChart, 20 TitleComponent, 21 TooltipComponent, 22 LegendComponent 23]); 24 25provide(THEME_KEY, "dark"); 26 27const option = ref({ 28 title: { 29 text: "Traffic Sources", 30 left: "center" 31 }, 32 tooltip: { 33 trigger: "item", 34 formatter: "{a} <br/>{b} : {c} ({d}%)" 35 }, 36 legend: { 37 orient: "vertical", 38 left: "left", 39 data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"] 40 }, 41 series: [ 42 { 43 name: "Traffic Sources", 44 type: "pie", 45 radius: "55%", 46 center: ["50%", "60%"], 47 data: [ 48 { value: 335, name: "Direct" }, 49 { value: 310, name: "Email" }, 50 { value: 234, name: "Ad Networks" }, 51 { value: 135, name: "Video Ads" }, 52 { value: 1548, name: "Search Engines" } 53 ], 54 emphasis: { 55 itemStyle: { 56 shadowBlur: 10, 57 shadowOffsetX: 0, 58 shadowColor: "rgba(0, 0, 0, 0.5)" 59 } 60 } 61 } 62 ] 63}); 64</script> 65 66<style scoped> 67.chart { 68 height: 400px; 69} 70</style>
1<template> 2 <v-chart class="chart" :option="option" /> 3</template> 4 5<script> 6import { use } from "echarts/core"; 7import { CanvasRenderer } from "echarts/renderers"; 8import { PieChart } from "echarts/charts"; 9import { 10 TitleComponent, 11 TooltipComponent, 12 LegendComponent 13} from "echarts/components"; 14import VChart, { THEME_KEY } from "vue-echarts"; 15 16use([ 17 CanvasRenderer, 18 PieChart, 19 TitleComponent, 20 TooltipComponent, 21 LegendComponent 22]); 23 24export default { 25 name: "HelloWorld", 26 components: { 27 VChart 28 }, 29 provide: { 30 [THEME_KEY]: "dark" 31 }, 32 data() { 33 return { 34 option: { 35 title: { 36 text: "Traffic Sources", 37 left: "center" 38 }, 39 tooltip: { 40 trigger: "item", 41 formatter: "{a} <br/>{b} : {c} ({d}%)" 42 }, 43 legend: { 44 orient: "vertical", 45 left: "left", 46 data: [ 47 "Direct", 48 "Email", 49 "Ad Networks", 50 "Video Ads", 51 "Search Engines" 52 ] 53 }, 54 series: [ 55 { 56 name: "Traffic Sources", 57 type: "pie", 58 radius: "55%", 59 center: ["50%", "60%"], 60 data: [ 61 { value: 335, name: "Direct" }, 62 { value: 310, name: "Email" }, 63 { value: 234, name: "Ad Networks" }, 64 { value: 135, name: "Video Ads" }, 65 { value: 1548, name: "Search Engines" } 66 ], 67 emphasis: { 68 itemStyle: { 69 shadowBlur: 10, 70 shadowOffsetX: 0, 71 shadowColor: "rgba(0, 0, 0, 0.5)" 72 } 73 } 74 } 75 ] 76 } 77 }; 78 } 79}; 80</script> 81 82<style scoped> 83.chart { 84 height: 400px; 85} 86</style>
[!IMPORTANT] 我们鼓励手动从 ECharts 中引入组件和图表,以减小打包体积。我们已经为此构建了一个导入代码生成器。你只需要把
option
代码粘贴进去,就可以得到精确的导入代码。
但如果你实在需要全量引入 ECharts 从而无需手动引入模块,只需要在代码中添加:
1import "echarts";
用如下方式在 HTML 中插入 <script>
标签,并且通过 window.VueECharts
来访问组件接口:
1<script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script> 2<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script> 3<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
1const app = Vue.createApp(...) 2 3// 全局注册组件(也可以使用局部注册) 4app.component('v-chart', VueECharts)
1<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script> 2<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script> 3<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
1// 全局注册组件(也可以使用局部注册)
2Vue.component("v-chart", VueECharts);
可以在这里查看更多例子。
init-options: object
初始化附加参数。请参考 echarts.init
的 opts
参数。前往 →
Inject 键名:INIT_OPTIONS_KEY
。
theme: string | object
要应用的主题。请参考 echarts.init
的 theme
参数。前往 →
Inject 键名:THEME_KEY
。
option: object
ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 setOption
方法。查看详情 →
💡 在没有指定
update-options
时,如果直接修改option
对象而引用保持不变,setOption
方法调用时将默认指定notMerge: false
;否则,如果为option
绑定一个新的引用,将指定notMerge: true
。
update-options: object
图表更新的配置项。请参考 echartsInstance.setOption
的 opts
参数。前往 →
Inject 键名:UPDATE_OPTIONS_KEY
。
group: string
autoresize: boolean | { throttle?: number, onResize?: () => void }
(默认值false
)
图表在组件根元素尺寸变化时是否需要自动进行重绘。也可以传入一个选项对象来指定自定义的节流延迟和尺寸变化时的额外回调函数。
loading: boolean
(默认值:false
)
图表是否处于加载状态。
loading-options: object
加载动画配置项。请参考 echartsInstance.showLoading
的 opts
参数。前往 →
Inject 键名:LOADING_OPTIONS_KEY
。
manual-update: boolean
(默认值false
)
在性能敏感(数据量很大)的场景下,我们最好对于 option
prop 绕过 Vue 的响应式系统。当将 manual-update
prop 指定为 true
且不传入 option
prop 时,数据将不会被监听。然后,需要用 ref
获取组件实例以后手动调用 setOption
方法来更新图表。
可以使用 Vue 的 v-on
指令绑定事件。
1<template> 2 <v-chart :option="option" @highlight="handleHighlight" /> 3</template>
Note
仅支持
.once
修饰符,因为其它修饰符都与 DOM 事件机制强耦合。
Vue-ECharts 支持如下事件:
highlight
→downplay
→selectchanged
→legendselectchanged
→legendselected
→legendunselected
→legendselectall
→legendinverseselect
→legendscroll
→datazoom
→datarangeselected
→timelinechanged
→timelineplaychanged
→restore
→dataviewchanged
→magictypechanged
→geoselectchanged
→geoselected
→geounselected
→axisareaselected
→brush
→brushEnd
→brushselected
→globalcursortaken
→rendered
→finished
→zr:click
zr:mousedown
zr:mouseup
zr:mousewheel
zr:dblclick
zr:contextmenu
请参考支持的事件列表。前往 →
由于 Vue-ECharts 默认将事件绑定到 ECharts 实例,因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 native:
前缀来绑定原生 DOM 事件(可以在 Vue 2 中也可以使用 .native
修饰符,但这在 Vue 3 中已被废弃)。
1<template> 2 <v-chart @native:click="handleClick" /> 3</template>
Vue-ECharts 为 theme
、init-options
、update-options
和 loading-options
提供了 provide/inject API,以通过上下文配置选项。例如:可以通过如下方式来使用 provide API 为 init-options
提供上下文配置:
1import { THEME_KEY } from 'vue-echarts' 2import { provide } from 'vue' 3 4// 组合式 API 5provide(THEME_KEY, 'dark') 6 7// 选项式 API 8{ 9 provide: { 10 [THEME_KEY]: 'dark' 11 } 12}
1import { THEME_KEY } from 'vue-echarts' 2 3// 组件选项中 4{ 5 provide: { 6 [THEME_KEY]: 'dark' 7 } 8}
Note
在 Vue 2 中,如果你想动态地改变这些选项,那么你需要提供一个对象。
1// 组件选项中 2{ 3 data () { 4 return { 5 theme: { value: 'dark' } 6 } 7 }, 8 provide () { 9 return { 10 [THEME_KEY]: this.theme 11 } 12 } 13}
setOption
→getWidth
→getHeight
→getDom
→getOption
→resize
→dispatchAction
→convertToPixel
→convertFromPixel
→containPixel
→showLoading
→hideLoading
→getDataURL
→getConnectedDataURL
→clear
→dispose
→静态方法请直接通过 echarts
本身进行调用。
style-src
或 style-src-elem
如果你正在应用 CSP 来防止内联 <style>
注入,则需要使用 vue-echarts/csp
代替 vue-echarts
,并手动引入 vue-echarts/csp/style.css
。
Translate: Read the breaking changes document in the release log and the migration shoud be straightforward.
请阅读发布日志中的变更记录,之后迁移过程应该会相对简单。
1pnpm i 2pnpm serve
打开 http://localhost:8080
来查看 demo。
The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 8
Details
Reason
3 commit(s) and 5 issue activity found in the last 90 days -- score normalized to 6
Reason
Found 3/18 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
24 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More