vue中使用echarts

最新推荐文章于 2025-05-30 10:06:40 发布

bigheadmonkey

最新推荐文章于 2025-05-30 10:06:40 发布

阅读量810

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： vue echarts

本文链接：https://blog.youkuaiyun.com/bigheadmonkey/article/details/111088857

本文分享了在Vue项目中如何使用ECharts的步骤：通过npm安装ECharts，然后在main.js中导入并挂载到Vue原型上，最后创建一个饼状图组件，并指出在复用组件时应注意避免ID冲突的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用echarts感悟

1.vue中下载echarts
进入vue项目的文件夹后使用 npm install echarts --save（使用该命令安装运行依赖）。
还可以使用npm install echarts@(“这里可以写版本号”) --save安装指定版本。
在这里插入图片描述
2.在main.js中导入echarts
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
在main.js中添加上面两条语句即可。
3.创建图表组件
下面创建一个饼状图组件：

<style scoped>
  #sector{
   
   
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
</style>
<template>
    <div id="sector">
    </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
   
   
    name:'sector',
    data() {
   
   
      return {
   
   
        option