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

相关推荐
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏6 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
你喜欢喝可乐吗?10 小时前
RuoYi-Cloud 验证码处理流程
java·spring cloud·微服务·vue
魂兮归乡13 小时前
B2、进度汇报(— 25/06/16)
经验分享·spring boot·ai·vue·团队开发·课程设计·web app
灰海14 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue
布兰妮甜1 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
大菠萝学姐1 天前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
黄焖鸡能干四碗1 天前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全
知识分享小能手2 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
百锦再4 天前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down