Vue系列——在vue项目中使用echarts

最新推荐文章于 2025-03-02 21:48:02 发布
最新推荐文章于 2025-03-02 21:48:02 发布
阅读量10w+ 收藏 257
点赞数 49
分类专栏： vue-js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_wuch/article/details/70225364
版权

该示例使用 vue-cli 脚手架搭建

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像：

  • 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 使用
cnpm install echarts -S

创建图表

全局引入

  • main.js
// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts
  • Hello.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

                

                
                
        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


              

                

              

            
              



	

		

			

				
					
vue使用 echarts

				
			

			

				

					06-09
				

			

		

		

			
				
这是一个vue 结合echarts的小项目

			
		

	



              


  
              

                


	

		

			

				
					
vue项目中使用echarts

				
			

			

				

					从零出发
				

				

					07-02
					
					1087
					
				

			

		

		

			
				
vue项目中使用echarts
一、使用场景
在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用 echarts 来制作。

二、使用步骤


安装 echarts
npm install echarts --save



在 main.js 中引入
import echarts from "echarts";



挂在到 Vue 实例上
Vue.prototype.$echarts = echarts;



DOM结构
<div id

			
		

	





	

		

			

				
					
vue引入Echarts 画饼图 详解

				
			

			

				

					懒虫的博客
				

				

					09-21
					
					8107
					
				

			

		

		

			
				
vue引入Echarts 画饼图 详解

			
		

	



		

			
		



	

		

			

				
					
关于Vue3中使用Echarts，详细指南、常见问题及最佳解决方案

				
			

			

				

					繁若华尘的博客
				

				

					02-20
					
					1139
					
				

			

		

		

			
				
通过以上方案，可以在 Vue3 中高效、稳定地使用 ECharts 实现复杂可视化需求，同时保证应用的性能和可维护性。

			
		

	





	

		

			

				
					
Vue中使用ECharts制作的一个统计分析页面

				
			

			

				

					weixin_42966151的博客
				

				

					12-21
					
					1万+
					
				

			

		

		

			
				
Vue中使用ECharts制作的一个统计分析页面

			
		

	





	

		

			

				
					
Vue中优雅的使用Echarts的三种方式

				
			

			

				

					weixin_43045869的博客
				

				

					11-12
					
					8883
					
				

			

		

		

			
				
这个例子中，EChart.vue组件通过props接收ECharts的配置项option，并在组件的mounted生命周期钩子中初始化ECharts实例，在watch中监控option的变化，并更新图表。）是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。vue中使用，直接添加options 数据即可。

			
		

	





	

		

			

				
					
Vue项目中使用echarts教程

				
			

			

				

					qq_20236937的博客
				

				

					05-08
					
					7206
					
				

			

		

		

			
				
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。

			
		

	





	

		

			

				
					
Vue 中使用 ECharts

				
			

			

				

					BradenHan的专栏
				

				

					01-21
					
					1304
					
				

			

		

		

			
				
通过以上步骤，我们已经学会了如何在Vue中使用ECharts，并实现数据的动态更新。除此之外，ECharts还可以用于制作多种类型的图表，如折线图、饼图、雷达图等。希望这篇教程能够帮助你更好的了解ECharts的使用方法。

			
		

	





	

		

			

				
					
在vue中使用echarts

					
热门推荐

				
			

			

				

					日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
				

				

					03-04
					
					6万+
					
				

			

		

		

			
				
1、安装



			
		

	





	

		

			

				
					
vue项目中——如何用echarts实现动态水球图

				
			

			

				

					Jiaberrr的博客
				

				

					09-20
					
					1166
					
				

			

		

		

			
				
有时候UI的脑洞真的很大，总是设计出一些稀奇古怪的图形，但又不得不佩服他们的审美，确实还挺好看的。今天给大家介绍echarts如何实现动态水球图。

			
		

	





	

		

			

				
					
Vue(ElementUI)使用Echarts(三)——Ajax异步获取数据赋值给Echarts

				
			

			

				

					m0_61820867的博客
				

				

					07-15
					
					2710
					
				

			

		

		

			
				
介绍了Ajax异步获取数据如何赋值给Echarts

			
		

	





	

		

			

				
					
【vue-echarts】——05.柱状图

				
			

			

				

					记录前端、后端、深度学习、大数据、Linux和无人机学习的过程
				

				

					03-02
					
					204
					
				

			

		

		

			
				
/ 'category' 类目轴，适用于离散的类目数据。// 'category' 类目轴，适用于离散的类目数据。// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计。// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计。// ///////////平均值//////////////////// ///////////平均值////////////////////   color:'red',//所有轴颜色设置。

			
		

	





	

		

			

				
					
【Echarts】在Vue中使用Echarts

				
			

			

				

					weixin_46443403的博客
				

				

					03-05
					
					8276
					
				

			

		

		

			
				
Vue，Echarts

			
		

	





	

		

			

				
					
在Vue项目中引用ECharts

				
			

			

				

					....
				

				

					10-18
					
					712
					
				

			

		

		

			
				
ECharts官网:点击进入
安装依赖
npm install echarts
然后再main.js中引入
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

如图:

然后在vue文件中创建图表:
<template>
  <div id="app">
    <div id="main...

			
		

	





	

		

			

				
					
Vue 46 ，ECharts 3 ，如何在Vue项目中使用ECharts，全局注册Echarts（echarts不显示，echarts使用详细）

				
			

			

				

					weixin_65793170的博客
				

				

					03-27
					
					4706
					
				

			

		

		

			
				
⭐我们在写大屏项目和vue项目时经常会用到echarts，用于数据统计和可视化。它是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，下面分享下它在项目中的使用方式。

			
		

	





	

		

			

				
					
Vue项目中使用Echarts（一）

				
			

			

				

					zep
				

				

					06-28
					
					176
					
				

			

		

		

			
				
Echarts官方文档

1. 安装Echarts
在cmd命令行输入: npm install echarts --save

2. 代码中使用

注意：import 引入echarts 包时，不要使用 import echarts from ‘echarts’
而要使用import * as echarts from 'echarts'
否则会报错如下：

3. 页面展示效果


...

			
		

	





	

		

			

				
					
在Vue中使用echarts

				
			

			

				

					wzw0121的博客
				

				

					12-27
					
					497
					
				

			

		

		

			
				
使用echarts

1、安装echarts依赖

npm install echarts -S

2、创建图表

首先需要全局引入
在main.js中



importechartsfrom'echarts'

import'echarts/theme/macarons'

// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart'))



在Echarts.vue中&...

			
		

	





	

		

			

				
					
uni-app中vue3+ts项目如何使用echarts

					
最新发布

				
			

			

				

					03-19
				

			

		

		

			
				
### 配置和使用 ECharts

要在 uni-app Vue3 TypeScript 项目中集成和使用 ECharts，可以通过以下方法实现：

#### 1. 安装依赖
首先需要安装 `echarts` 和其对应的类型声明文件：
```bash
pnpm add echarts @types/echarts
```

这一步确保了项目的运行环境能够识别并加载 ECharts 库及其 TypeScript 类型支持[^1]。

---

#### 2. 创建一个通用的 ECharts 组件
为了方便在多个页面中重用 ECharts 图表功能，可以创建一个独立的组件来封装图表逻辑。以下是该组件的一个简单示例：

##### 文件路径：`components/EchartsComponent.vue`
```vue
<template>
  <view class="chart-container">
    <canvas :id="chartId" type="2d"></canvas>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  chartId: {
    type: String,
    required: true,
  },
});

onMounted(() => {
  const canvasElement = document.getElementById(props.chartId);
  if (canvasElement) {
    const chartInstance = echarts.init(canvasElement);

    // 设置初始选项
    const option = {
      title: {
        text: 'ECharts 示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    chartInstance.setOption(option); // 渲染图表
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>
```

此组件接受一个唯一的 `chartId` 属性作为参数，并初始化了一个基础柱状图实例[^2]。

---

#### 3. 修改 Vite 配置以支持 Canvas
由于 Uni-app 使用的是 HBuilderX 或其他构建工具，默认情况下可能不完全兼容某些第三方库的功能（如 Canvas）。因此，在 `vite.config.ts` 中需额外配置以支持这些特性：

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  plugins: [uni()],
})
```

上述配置已经包含了基本的别名设置，如果遇到特定问题可进一步调整插件或扩展项[^4]。

---

#### 4. 在页面中调用 ECharts 组件
最后，在某个具体页面中引入刚刚创建好的 ECharts 组件即可完成展示效果：

##### 页面代码示例 (`pages/Index/index.vue`)
```vue
<template>
  <view class="page-content">
    <text>这是一个带有 ECharts 的页面</text>
    <EchartsComponent :chart-id="'myChart'" />
  </view>
</template>

<script lang="ts" setup>
import EchartsComponent from '@/components/EchartsComponent.vue';
</script>

<style scoped>
.page-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
```

这样就完成了整个流程中的核心部分——即从安装到实际使用的全过程[^5]。

---

### 注意事项
- 如果目标平台为微信小程序，则需要注意一些特殊限制条件，比如是否允许动态生成 DOM 节点等问题。
- 对于复杂场景下的性能优化，推荐采用懒加载机制减少资源消耗。

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 17

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值