使用V-chart时踩过的一些坑

简介: 因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下。如何配置图表信息echart的配置项可谓是相当的海量,能不看就不看。

因为工作需要,使用v-chart也有一段时间了,期间针对配置图表也遇到了不少问题,在这里总结一下。

如何配置图表信息

echart的配置项可谓是相当的海量,能不看就不看。而v-chart对其进行了不少的简化,所以我们想要自定义一个图表时,最好按照以下步骤来检查:

图表私有属性

v-chart每一个图表都有自己独有的设置项,想要配置这些项需要在组件上加入 :setting="chartSettings",然后在vue组建的data里设置chartSettings的值,如下:


  



图表公有属性

v-chart所有图表组件中共有的属性,直接在图标组件上挂载:属性名称="属性值"即可设置,下面是一些比较常用的

名称 类型 默认值 介绍
data Object 图表的显示数据
setting Object 图表的私有属性
height String 400px 高度
width String auto 宽度,默认根据高度自动适配
tooltip-visible boolean true 是否显示提示框
legend-visible boolean true 是否显示图例
extend Object 设置echart的详细属性

公共属性上最重要的可以说就是extend属性了,在vchart的公共属性里extend居然不在基本属性了,而是放在文档后面专门开了一段讲。当时为了找到这个属性可以说是废了老半天功夫。如果你在前两者中都没有找到想要的设置项,那就可以通过这个属性来设置echart的配置,毕竟是基于echart的嘛,所以echart的所有配置在这里都可以适用,下边是配置示例:


  



Echart配置项

接下来就是重头戏了,如果你在前两者里都没有找到,那就只能从echart的配置项里找了,下面是一些目前比较常用的配置项

名称 类型 介绍
legend Object 用于控制图表的图例组件,包括位置、样式、类型、图标等
series Object 每个图表的专属设置项,用于控制图表的详细样式位置等

其中series的属性就可以完成绝大多数配置了,下边是一个配置示例 实现的效果为:

  • 图例位于图表右方,且距右边缘20px
  • 图例颜色#A0A0A0,字体12px
  • 环图中心相对于左上角距离112px, s92px
  • 隐藏环图上的文本标签和引导线
  • 环图内半径55px与外半径72px
//template


...

//script
data () {
  return {
    chartExtend: {
      series: {
        center: [112, 92]
      },
      legend: {
        right: 20,
        textStyle: {
          color: '#A0A0A0',
          fontSize: 12
        }
      }
    }
    chartSetting: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      radius: [55, 72]
    }
  }
}
目录
相关文章
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学生课堂考勤系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学生课堂考勤系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的古风生活体验交流网站的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的古风生活体验交流网站的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的原神游戏商城的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的原神游戏商城的详细设计和实现(源码+lw+部署文档+讲解等)
56 0
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学生实习管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学生实习管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的开心农家乐系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的开心农家乐系统的详细设计和实现(源码+lw+部署文档+讲解等)
echarts统计图踩坑合集
echarts统计图踩坑合集
57 0
|
API
三分钟上手Highcharts简易甘特图
三分钟上手Highcharts简易甘特图
108 0
R-plotly|甘特图(Gantt chart)- 一不小心年中了,立个flag
R-plotly|甘特图(Gantt chart)- 一不小心年中了,立个flag
|
定位技术
AMap+Three.js踩坑日记
最近有个项目要跟高德地图结合,2D功能和3D功能都要有,于是就用到`AMap.GLCustomLayer`,能让我用Three,那就可以放飞自我了,然而我头秃了!
|
数据可视化
Qt开发技术:Q3D图表开发笔记(二):Q3DBar三维柱状图介绍、Demo以及代码详解
qt提供了q3d进行三维开发,虽然这个框架没有得到大量运用也不是那么成功,性能上也有很大的欠缺,但是普通的点到为止的应用展示还是可以的。   其中就包括华丽绚烂的三维图表,数据量不大的时候是可以使用的。   上一篇介绍了基础的q3d散点图,本篇介绍基础的柱状图。
Qt开发技术:Q3D图表开发笔记(二):Q3DBar三维柱状图介绍、Demo以及代码详解