v-charts使用心得

Hi竹子2023-11-16 9:48

前端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