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

相关推荐
摇滚侠9 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记02
vue
zhong liu bin9 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
知识分享小能手10 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手16 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
赵得C20 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
叫我阿柒啊21 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
@八度余温1 天前
eslint 和 prettier 的相同点和区别
vue·eslint
周航宇JoeZhou1 天前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台
计算机学长felix1 天前
基于Django的“酒店推荐系统”设计与开发(源码+数据库+文档+PPT)
数据库·python·mysql·django·vue