欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

v-charts使用心得

程序员文章站 2022-05-08 08:08:56
前端er经常都会遇到使用 的时候,特别是弄后台管理的报表等地方,而 是`echarts`的vue版本(饿了么写的),基本上能应付普通的图表。 "传送门" 隐藏提示框与图例 v charts渲染的标题过于简单,有时候跟设计稿的很不一样,需要自己用样式重新写,这时候,你可以选择隐藏默认的提示框和标题 设 ......

前端er经常都会遇到使用echarts的时候,特别是弄后台管理的报表等地方,而v-chartsecharts的vue版本(饿了么写的),基本上能应付普通的图表。

隐藏提示框与图例

v-charts渲染的标题过于简单,有时候跟设计稿的很不一样,需要自己用样式重新写,这时候,你可以选择隐藏默认的提示框和标题

//:tooltip-visible="false"
// :legend-visible="false"
//把这两个属性设置为false即可
<ve-ring
        :tooltip-visible="false"
        :legend-visible="false"
        height="200px"></ve-ring>

设置柱状图的宽度

<ve-histogram
      :data="chartdata"
      :settings="chartsettings"
      :extend="chartextend"
      ></ve-histogram>

chartsettings: {
    barwidth: 15 //设置宽度为15px
}