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

最新推荐文章于 2024-05-27 15:23:56 发布
最新推荐文章于 2024-05-27 15:23:56 发布
阅读量283 收藏
点赞数
分类专栏： 前端 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57558631/article/details/124998557
版权
本文介绍了如何在Vue项目中使用Echarts，包括通过npm安装依赖，全局或按需引入Echarts，以及在组件中创建图表并在mounted钩子中初始化。强调了按需引入以减小包体积，并提供了页面展示的示例。
摘要由CSDN通过智能技术生成

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

安装echarts依赖

npm install echarts -S

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

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

创建图表

全局引入

  • main.js
 

 
 
    
  
  1.  
    // 引入echarts
     
    2. 
  
  2.  
    import echarts from 'echarts'
     
    3. 
  
  3. 
  
  4.  
    Vue.prototype.$echarts = echarts 
     
    5. 
 
 

 

    
 
  • Hello.vue
    • 

 

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
 
 

 

 
 
    
  
  1.  
    export default {
     
     
    2. 
 



                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  别说小李
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue项目每30秒刷新1次接口的实现方法

				
			

			

				

					10-17
				

			

		

		

			
				
在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理。这篇文章主要介绍了vue项目每30秒刷新1次接口的实现方法,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
vue项目中使用echarts

				
			

			

				

					小白菜的博客
				

				

					06-09
					
					1126
					
				

			

		

		

			
				
1、安装
npm install echarts --save

2、使用
在需要用到的页面引入
import echarts from 'echarts'

以下分别举例饼图、折线图、柱状图
一、例1（饼图）：

 <!-- 图表 -->
 <template>
 
    <div>
      <div style="height:400px;" ref="chart"></div>
    </div>
    
</te

			
		

	



                


  
              

                


	

		

			

				
					
Vue 项目中使用 Echarts

				
			

			

				

					ch_6319的博客
				

				

					10-31
					
					970
					
				

			

		

		

			
				
Echarts是一个纯JavaScript的图表库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

			
		

	





	

		

			

				
					
3分钟搞懂Vue整合Echarts实现可视化界面

					
最新发布

				
			

			

				

					2401_85124786的博客
				

				

					05-27
					
					884
					
				

			

		

		

			
				
🏅【Bug 终结者】博客的领域是【面向后端技术】的学习，未来会持续更新更多的【后端技术】以及【学习心得】。！🏅 如果有对【后端技术】、【前端领域】感兴趣的【小可爱】，欢迎关注【Bug 终结者】💞💞💞❤️❤️❤️❤️❤️❤️。

			
		

	



		

			
		



	

		

			

				
					
echarts在vue项目中的使用

				
			

			

				

					qq_52940988的博客
				

				

					04-15
					
					1978
					
				

			

		

		

			
				
echatrs在vue中的安装及使用
util.js?d5c9:404 Uncaught Error: id duplicates: u00000
Uncaught TypeError: Cannot read properties of null (reading 'setOption')

			
		

	





	

		

			

				
					
vue项目引入echarts

				
			

			

				

					weixin_43204211的博客
				

				

					02-15
					
					212
					
				

			

		

		

			
				
vue项目引入echarts

			
		

	





	

		

			

				
					
Vue 使用Echarts

				
			

			

				

					chenfairy的博客
				

				

					02-08
					
					8748
					
				

			

		

		

			
				
在vue中使用echarts有两种方法
一、安装并全局引入
1、通过npm获取echarts


npm install echarts --save

2、在 main.js 中添加下面两行代码




import echarts from 'echarts'

Vue.prototype.$echarts = echarts //挂载到Vue实例上面

二、使用https://echa...

			
		

	





	

		

			

				
					
在vue中使用echarts(折线图的demo,markline用法)

				
			

			

				

					01-21
				

			

		

		

			
				
公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo—— vue引入echarts（折线图的demo） 主要是解决引入echarts，markline的使用（基准线） 这是demo的效果图： vue脚手架不多赘述 1.安装依赖  cnpm ...

			
		

	





	

		

			

				
					
echarts.js 动态生成多个图表 使用vue封装组件操作

				
			

			

				

					01-19
				

			

		

		

			
				
组件只做了简单的传值处理，...vue 使用组件 ——在外层用v-for 循环，传不同值进charts 即可   <!-- 传入对应的数据给子组件 -->    id='charts +index' index=index  xss=removed>  <!-- 传入对应的数据给子

			
		

	





	

		

			

				
					
网页模板——vue+echarts高考分数双折线图统计代码.zip

				
			

			

				

					11-23
				

			

		

		

			
				
同时，你也需要熟悉ECharts的基本用法，知道如何导入库、设置图表选项、以及如何在Vue组件中与ECharts进行交互。  此外，为了部署和测试这个网页模板，你可能还需要HTML和CSS的基础知识，因为Vue组件通常嵌入到HTML...

			
		

	





	

		

			

				
					
【JavaScript源代码】Vue使用Echarts实现立体柱状图.docx

				
			

			

				

					12-29
				

			

		

		

			
				
在深入探讨如何使用Vue.js结合Echarts实现立体柱状图之前，我们先简要了解一下Vue.js和Echarts的基本概念。  - **Vue.js**：是一款用于构建用户界面的渐进式框架。它被设计为可以自底向上逐层应用，并且可以在现有的...

			
		

	





	

		

			

				
					
vue项目中使用Echarts插件

				
			

			

				

					weixin_44877713的博客
				

				

					12-24
					
					278
					
				

			

		

		

			
				
vue项目中使用Echarts插件
//1、第一步在Vue项目中引入Echarts插件(在Echarts官网中有详细的说明)
//2、第二步在H5标签中创建一个具有宽、高的块级元素，并在这个块级元素中插入ref='test'(test可以随便起名)
//3、第三步在data里面声明一个对象option并在这个对象里面设置你需要的图形参数
//4、第四步在Vue的生命周期‘mounted’中将用ref获取到的dom节点放到echarts.init()这个方法里面
//5、第五步在第四步的结果中使用setOpt

			
		

	





	

		

			

				
					
Vue怎么使用Echarts创建图表

				
			

			

				

					丫头
				

				

					03-05
					
					758
					
				

			

		

		

			
				
摘要：在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下：https://echarts.baidu.com/index.html，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。





本文流程：

1.安装插件→2.引入Echarts→3.创建图表→4.修改样式→5....

			
		

	





	

		

			

				
					
Vue初步使用Echarts

				
			

			

				

					gugugutime.com
				

				

					12-23
					
					769
					
				

			

		

		

			
				
echarts

			
		

	





	

		

			

				
					
Echarts图表相关知识

				
			

			

				

					m0_58293192的博客
				

				

					12-28
					
					605
					
				

			

		

		

			
				
Echarts图表相关知识

			
		

	





	

		

			

				
					
Echarts开源可视化库学习(一) 介绍与快速上手

				
			

			

				

					半岛铁盒的博客
				

				

					12-07
					
					789
					
				

			

		

		

			
				
介绍
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

一.

Echarts官网

二.

三.

四.编写图表网页快速上手
工具:Visual Studio Code
文件: echarts.js
参考官方文档

基本分为5个步骤,主要图标设定是在第四步
步骤1

			
		

	





	

		

			

				
					
echarts的深入学习

				
			

			

				

					WeiflR10的博客
				

				

					12-31
					
					813
					
				

			

		

		

			
				
安装使用请参考


<template>
  <div id="myChart1">

  </div>
</template>

<script>
import echarts from "echarts"
let echarts2 = require('echarts/lib/echarts')    // 引入基本模板
require('echarts/lib/chart/bar')               // 引入柱状图组件
requ

			
		

	





	

		

			

				
					
echarts_lib_echarts__WEBPACK_IMPORTED_MODULE_0__.helper.createTextStyle is not a function

				
			

			

				

					sunnyboysix的博客
				

				

					08-06
					
					2502
					
				

			

		

		

			
				
echarts词云使用时候出现


echarts_lib_echarts__WEBPACK_IMPORTED_MODULE_0__.helper.createTextStyle is not a function



echarts4.0以下的版本使用1.0的词云 默认安装是2.0



解决办法


npm install echarts-wordcloud@1




			
		

	





	

		

			

				
					
ECharts零基础使用思路 图表案例网站推荐

				
			

			

				

					monkey7
				

				

					12-08
					
					489
					
				

			

		

		

			
				
echarts0基础教程 如何从0开如整出一个饼图 各种图表案例网站推荐 echarts图表使用

			
		

	





	

		

			

				
					
vue+echarts项目实战

				
			

			

				

					08-22
				

			

		

		

			
				
在Vue和Echarts的项目实战中，首先要使用vue-cli3创建项目。可以通过运行命令"vue create 项目名称"来创建一个Vue项目。接下来，进入项目目录，使用命令"npm run serve"来运行项目。这样就可以在本地开发环境中开始项目实战了。

在数据可视化方面，Echarts是一个非常流行的图表库之一。除了Echarts外，还有其他一些流行的图表库，比如AntV、Highcharts和D3.js。这些图表库都是基于浏览器图形渲染技术实现的，主要有两种类型: Canvas和SVG。Canvas适合于大型渲染区域的应用程序，而SVG适合于图像密集型的应用。它们各自有不同的特点和适用场景，具体选择哪种图表库要根据项目需求和特点进行选择。

在具体的项目实战中，可以使用Echarts来创建各种图表和地图。Echarts提供了丰富的图表类型和交互功能，可以根据数据灵活地进行配置和展示。例如，可以使用Echarts来创建柱状图、折线图、饼图等各种类型的图表。同时，Echarts还支持对地图进行可视化展示，可以绘制各种地理信息和相关数据。使用Echarts可以通过配置项和数据来实现对图表和地图的定制化展示，使数据更加直观和易于理解。

在Vue和Echarts项目实战中，除了使用Echarts来创建图表和地图，还可以结合其他技术和工具来实现更多功能。例如，可以使用全局模态框来实现弹窗效果，使用Flex布局来实现页面的自适应布局，使用数字滚动来展示数据的动态变化，使用自定义小部件来实现一些炫酷的效果等等。此外，还可以利用rem和flexible.js进行智能大屏适配，使用cssrem插件来方便地使用rem单位进行样式开发等。

总之，在Vue和Echarts的项目实战中，可以根据具体需求和项目特点，结合Vue的开发框架和Echarts的数据可视化能力，实现丰富多样的图表和地图展示，同时还可以利用其他技术和工具来增强项目的功能和用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
-  *1* *2* *3* [echarts学习——（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）](https://blog.csdn.net/weixin_43148111/article/details/123982183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
别说小李

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值