VUE - v-charts 图表高级设置

最新推荐文章于 2024-08-15 11:16:20 发布
最新推荐文章于 2024-08-15 11:16:20 发布
阅读量5.4k 收藏 5
点赞数 2
分类专栏： VUE 文章标签： vue echart v-charts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/max229max/article/details/111574755
版权
本文档详细记录了在VUE项目中使用v-charts库进行图表高级设置的方法，包括调整线的粗细、标题样式、坐标轴字体颜色、线条区域颜色、x坐标标记以及隐藏线条的实现步骤。通过示例代码展示了具体操作过程。
摘要由CSDN通过智能技术生成

VUE - v-charts 图表高级设置

2020-12

Max.Bai

 

记录VUE 使用v-charts 图表设置

先看下效果：


修改的内容包括：
1. 修改线的粗细
2. 修改标题的样式
3. 修改坐标轴字体颜色
4. 修改线条区域的颜色
5. 添加x坐标的标记
6. 默认不显示线条

模板代码：

<ve-line
          :title="chartTitle[index-1]"
          :loading="loading[index-1]"
          :legend="chartLegend"
          :data="chartData[index-1]"
          :extend="extend"
          :settings="chartSettings"
          :width-change-delay="500"
          :resize-delay="500"
          :change-delay="500"
          :colors="corlors"
          height="310px"
        />

JS 代码：


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  max229max
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue中使用v-charts

				
			

			

				

					weixin_33943347的博客
				

				

					06-12
					
					3868
					
				

			

		

		

			
				
前段时间由于公司需要，产品临时安排任务，希望尽快出一个实时数据统计的图表，所以综合考虑就没有用echarts本身，而是使用了通过vue封装过的v-charts，希望能快速上手echarts,然后就有了这篇文章的实现过程。相关文档vue官方文档v-charts官方文档echarts官方文档界面效果图接下来按照上图红框从左到右从上到下一一讲解：框一、 环图占比因为是用vue实现的，不希望所有内容都写在...

			
		

	



                

              
                



	

		

			

				
					
使用V-chart时踩过的一些坑

				
			

			

				

					weixin_33724046的博客
				

				

					11-17
					
					3003
					
				

			

		

		

			
				
因为工作需要，使用v-chart也有一段时间了，期间针对配置图表也遇到了不少问题，在这里总结一下。
如何配置图表信息
echart的配置项可谓是相当的海量，能不看就不看。而v-chart对其进行了不少的简化，所以我们想要自定义一个图表时，最好按照以下步骤来检查：
图表私有属性
v-chart每一个图表都有自己...

			
		

	



                


  
              

                


	

		

			

				
					
v-charts基本参数的使用

					
最新发布

				
			

			

				

					macx_1371873xxxx的博客
				

				

					08-15
					
					210
					
				

			

		

		

			
				
二、额外属性的使用  :extend="lineChartExtend"，如，我这边的应用场景有：体现标题，图例靠右，第二条折线为虚线等等。四、另外，还有图表的一些事件，如点击事件、移入事件、移出事件等，我们该如何添加呢？直接上代码，以点击事件为例，代码写入mounted()中。一、vue为例，上面是使用方法，下面是数据。看起来好像很简单，假如我想要折线图中的图例消失，怎么办？echarts官网文档。肯定还有很多场景，如果后续用到，我会继续补充。今天以折线图为例，说一下v-charts基本参数的一些使用。

			
		

	





	

		

			

				
					
设置v-chart 地图的标注点样式_咦，这种地图怎么做？地图教程打卡01

				
			

			

				

					weixin_35529208的博客
				

				

					01-28
					
					525
					
				

			

		

		

			
				
大家好，本篇文章是我今天立的flag的第一篇打卡文章，今天选取的地图图片是我去年年底去成都出差在双流机场拍摄的这张照片。下面这张是我在QGIS中制作的效果图。具体怎么操作的呢？本教程使用的软件为QGIS，使用的数据见下图。下载地址为：https://pan.baidu.com/s/1f0vjK4Sy9XZXUDLPLIfkww提取码：QGIS压缩包解压密码：QGIS接下来就为大家详细进行介绍具体的...

			
		

	



		

			
		



	

		

			

				
					
MPAndroidChart 教程：图表的具体设置 Specific chart settings（六）

				
			

			

				

					fuxiaoyuqing的专栏
				

				

					11-01
					
					564
					
				

			

		

		

			
				
其余文章索引： 
MPAndroidChart 教程：概述 
MPAndroidChart 教程：开始 Getting Started（一） 
MPAndroidChart 教程：与图表进行手势交互 Interaction with the Chart（二） 
MPAndroidChart 教程：坐标轴，X轴，Y轴，Labels（三） 
MPAndroidChart 教程：设置数据，设置

			
		

	





	

		

			

				
					
v-echart 图表的简单使用

				
			

			

				

					易之晓的博客
				

				

					05-13
					
					1105
					
				

			

		

		

			
				
<!--  -->
<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">性别分布</div>
    <div>
      <ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"&gt.

			
		

	





	

		

			

				
					
VUE v-charts曲线图改成折线图

				
			

			

				

					TLROJE787的博客
				

				

					08-08
					
					4297
					
				

			

		

		

			
				
没啥可说的直接粘贴就行
下面放代码
//template
    <ve-line
      width="100%"
      height="300px"
      :data="chartData"
      :settings="chartSettings"
      :data-zoom="dataZoom"
      :loading="loading"
      ...

			
		

	





	

		

			

				
					
vue-cli和v-charts实现可视化图表过程解析

				
			

			

				

					01-19
				

			

		

		

			
				
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 v-charts的中文社区文档（https://v-charts.js.org/#/），可根据项目...

			
		

	





	

		

			

				
					
vue-chartjs-exporter:将由vue-chartjs创建的图表导出为PDF文件

				
			

			

				

					05-18
				

			

		

		

			
				
vue-chartjs-exporter  将由创建的图表导出为PDF文件。 演示。  在继续之前，请先阅读下面的“需求”部分，因为其中包含重要信息，您可以从中寻找更简单的解决方案 :expressionless_face: 。 查看以获得更简单但不...

			
		

	





	

		

			

				
					
vue-drag-chart 拖动/缩放的图表组件的实例代码

				
			

			

				

					10-15
				

			

		

		

			
				
值得注意的是，Vue-Drag-Chart 还利用了 v-charts 和 vue-draggable-resizable 这两个库，分别用于绘制图表和实现拖动与缩放的功能。因此，使用 Vue-Drag-Chart 时，你可能需要了解这两个库的基本用法，以便更好地...

			
		

	





	

		

			

				
					
v-charts离线文档开发版

				
			

			

				

					04-21
				

			

		

		

			
				
v-charts离线文档，适合内网开发参考用，最近参加内网开发，啥文档也没有，痛苦啊，有了离线文档，谁用谁知道，献给同样内网开发的前端小伙伴

			
		

	





	

		

			

				
					
Vue图表(v-charts, e-charts)入门安装使用

				
			

			

				

					weixin_45924425的博客
				

				

					08-25
					
					7929
					
				

			

		

		

			
				
Vue 中常使用的图标主要包括 e-charts 和 v-charts，如果仅为简单使用图表，推荐使用 v-charts，如果使用图表较为复杂，则使用 e-charts

			
		

	





	

		

			

				
					
前端基础学习-v-charts实现柱形图颜色渐变

				
			

			

				

					小夭的博客
				

				

					05-07
					
					991
					
				

			

		

		

			
				
在网上找了很多实例之后发现对于v-charts颜色渐变的实例很少
这里记录一下
首先对v-charts实现颜色渐变效果，要引入echarts
import echarts from 'echarts'

接下来进行相关的设置
			<ve-histogram
                :extend="verticalChartExtend"
                :data="chartData"
              />

// 柱状图相关参数
      verti

			
		

	





	

		

			

				
					
v-chart 图表样式调整  条形图位置调整及在条形图右边显示文字

					
热门推荐

				
			

			

				

					ymumi的博客
				

				

					03-26
					
					1万+
					
				

			

		

		

			
				
<ve-bar
  :colors="barColors"
  height="140px"
  :extend="barExtend">
</ve-bar>


 barColors:['#4ecb73','#f2637b','#fad337'], 
barExtend:{
            yAxis: {
              show:false, /...

			
		

	





	

		

			

				
					
vue v-charts 柱状图 x,y轴文本设置

				
			

			

				

					smile2333的博客
				

				

					11-30
					
					4075
					
				

			

		

		

			
				
v-charts 使用

下载：

     npm / cnpm i v-charts echarts -S


在 main.js 文件引入

     import VCharts from 'v-charts'
     Vue.use(VCharts)  //声明


可以直接使用了柱状图


1>. 在HTML 代码中写入相应代码占位
<ve-histogram :even...

			
		

	





	

		

			

				
					
MPAndroidChart 教程：图表的具体设置 Specific chart settings（六

				
			

			

				

					芯_v_648374雨馨博客
				

				

					03-22
					
					633
					
				

			

		

		

			
				
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。面试过程一定要有礼貌！

			
		

	





	

		

			

				
					
v-charts使用-柱状图属性

				
			

			

				

					weixin_48399505的博客
				

				

					09-30
					
					1万+
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
vue项目中使用v-charts的一些问题

				
			

			

				

					flora078的博客
				

				

					01-13
					
					1143
					
				

			

		

		

			
				
1、刚开始，没示例，感觉不知如何下手，但是看了官方文档还是很清晰明了的，好多属性都与echarts配置差不多，直接看echarts也可以。而且v-charts绘制简单的统计图非常的方便，配置简单。columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标。如果一个项目中统计图大致都是一个风格颜色的话可以讲主题写在一个js中 文件中直接引用即可使用。1、条形图去掉刻x y 轴的线 ，且每条轴的颜色不同。一、v-charts的参考网址。

			
		

	





	

		

			

				
					
vue-svg-icon 与 v-charts 冲突

				
			

			

				

					09-04
				

			

		

		

			
				
vue-svg-icon 和 v-charts 主要是两个不同的 Vue 库，可能在使用过程中会出现冲突的情况。

首先，vue-svg-icon 是一个用于在 Vue 中使用 SVG 图标的库。它提供了一个组件，可以将 SVG 图标直接导入到项目中，并通过指定名称来使用。这个库主要解决了在项目中使用 SVG 图标的问题，提供了方便的方式来管理和使用这些图标。

而 v-charts 是一个基于 Vue 和 ECharts 的图表库。它提供了一系列的图表组件，可以方便地在 Vue 项目中创建各种图表。v-charts 是为了解决在 Vue 项目中集成和使用 ECharts 图表的问题而开发的，它提供了一套易于使用的组件 API，可以轻松地创建和定制各种图表。

由于这两个库都对 Vue 进行了扩展和修改，它们可能会对 Vue 的内部机制产生冲突。例如，它们可能会修改 Vue 中的某些原型方法或者全局变量，导致在同时使用这两个库时出现问题。

如果遇到 vue-svg-icon 和 v-charts 的冲突问题，我们可以尝试以下几种解决方法：

1. 排除冲突的版本：检查 vue-svg-icon 和 v-charts 的版本，看是否存在已知冲突或者已修复的问题。如果有，可以尝试使用最新版本或已知没有冲突的版本。

2. 修改引入方式：如果可能，可以尝试修改这两个库的引入方式，例如改用按需加载的方式，只引入需要的组件，以减少潜在的冲突。

3. 自定义解决方案：如果以上方法无效，我们可以尝试自己解决冲突。这可能需要深入了解两个库的实现细节，查找冲突的原因，并尝试修改代码以解决冲突。

总之，vue-svg-icon 和 v-charts 之间可能存在冲突，但我们可以通过选择合适的版本、修改引入方式或者自定义解决方案来解决这个问题。更重要的是要深入了解这两个库的用法和实现，以便更好地集成和使用它们。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值