使用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]
    }
  }
}
目录
相关文章
vscode莫名其妙的错误:eslint的语法校验规则
vscode莫名其妙的错误:eslint的语法校验规则
345 0
|
机器学习/深度学习 分布式计算 数据挖掘
MaxCompute 应用场景实践
MaxCompute 应用场景实践
506 0
|
2月前
|
人工智能 边缘计算 自然语言处理
普通电脑也能跑AI:10个8GB内存的小型本地LLM模型推荐
随着模型量化技术的发展,大语言模型(LLM)如今可在低配置设备上高效运行。本文介绍本地部署LLM的核心技术、主流工具及十大轻量级模型,探讨如何在8GB内存环境下实现高性能AI推理,涵盖数据隐私、成本控制与部署灵活性等优势。
829 0
普通电脑也能跑AI:10个8GB内存的小型本地LLM模型推荐
|
12月前
|
移动开发 JavaScript 前端开发
UniApp低代码-颜色选择器diy-color-picker-代码生成器
UniApp低代码-颜色选择器diy-color-picker-代码生成器
412 5
|
存储 前端开发 定位技术
关于如何用wordpress搭建付费资源网站,modown付费主题推荐
关于如何用wordpress搭建付费资源网站,modown付费主题推荐
1020 0
关于如何用wordpress搭建付费资源网站,modown付费主题推荐
|
数据可视化 程序员
IDEA插件-Rainbow Variable/IDEA彩色变量
"Rainbow Variable"是一款用于 IntelliJ IDEA 的插件,旨在提高代码中变量的可视化区分度。通过使方法中的参数和变量呈现不同的颜色,提高代码可读性。 插件允许用户自定义颜色,使得在同一个函数内部相同的变量采用相同的颜色,从而避免误用。
2484 0
IDEA插件-Rainbow Variable/IDEA彩色变量
|
SQL 前端开发 关系型数据库
MYSQL基础知识之【ALERT】
MYSQL基础知识之【ALERT】
324 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生创新创业平台项目管理子系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生创新创业平台项目管理子系统的详细设计和实现(源码+lw+部署文档+讲解等)
207 0
|
JavaScript
Ant Design vue 表格内换行
Ant Design vue 表格内换行
485 1