v-charts使用心得

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

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

2)设置柱状图的宽度

<ve-histogram
      :data="chartData"
      :settings="chartSettings"
      :extend="chartExtend"
      ></ve-histogram>

chartSettings: {
    barWidth: 15 //设置宽度为15px
}

3)点击事件

 <ve-ring
              :data="amountData"
              :settings="amountSettings"
              :extend="amountExtend"
              :events="chartPEvents">
            </ve-ring>
data() {
    this.chartPEvents = {
      click: function(e) {
        console.log('dddd');
      }
    };
    return {

参考来源:
https://article.itxueyuan.com/Ae2g5v

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hi竹子

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值