Vue使用Echarts

最新推荐文章于 2025-10-23 16:27:59 发布

原创

最新推荐文章于 2025-10-23 16:27:59 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue-echarts #v-charts

本文详细介绍了如何在Vue项目中使用v-charts组件配置Echarts的重要属性，包括grid、formatter和legend。内容包括grid的定位属性，如left和right，以及formatter的模板变量和自定义函数用法，还有legend的显示与位置控制。通过实例展示了如何调整这些配置以实现所需图表效果。

v-charts

此文章持续更新，每个配置都会以例子来讲解，对比v-charts，vue-charts和原生echarts分别描述。

v-charts是一个Echarts的封包，饿了么官方前端团队开发的Echarts基于Vue的图表组件。

v-charts的封装理念是将部分属性暴露在组件属性上，同时也可以通过哦extend属性设置对应属性。

echarts最重要的属性label,tooltip,grid,legend,series等怎么在v-charts组件中配置

以三个图表的为例：

<!--组件 不介绍具体组件引入-->
<ve-bar
	 ref='contactsRank'
	 :data='contactsRank.data'
	 :legend-visible='false'
	 :extend='contactsRank.extend'
	 height='280px'/>

//配置
contactsRank :{
   
   
  extend: {
   
   
    title:{
   
   
      text:'常用联系人和消息记录',//条形图标题
      x:'center',//条形图标题预设的定位
      bottom:0 //同样可以使用left、right、top来调整位置
    },
    tooltip:{
   
   
      formatter:"{b}:<br/>QQ:{c0}<br/>微信:{c1}" //hover的时候提示框模板配置
    },
    grid:{
   
   
      left:0,
      right:50,
      containLabel: true
    },
    xAxis:{
   
   
      axisLine:{
   
   
        show:false
      }