技术博客——V-charts基础

[222000321熊中伟]

这个作业属于哪个课程	2023软工W班
这个作业要求在哪里	https://bbs.csdn.net/topics/615712151
这个作业的目标	软件工程实践总结和技术博客
其他参考文献	无

目录

• 技术概述
• 技术详述
• 安装和引用
• 使用组件：以饼图为例
• data数据格式
• settings效果格式
• 技术使用中遇到的问题和解决过程
• 出现canvas但是没有图表内容
• 总结

技术概述

V-charts是知名js组件echart的vue封装。与echarts一样，v-charts可以对给定的动态数据生成不同图表，如饼图，折线图，条形图，并渲染在视图上，支持多种样式选择。相比于直接使用echarts，使用其vue封装能够更好地支持vue的相关特性。对于需要在前端使用图表的情况，可以使用v-charts来完成，避免手动编写css的麻烦。使用这个组件的难点在于图表数据注入和配置。

技术详述

安装和引用

和大多数npm模块一样，首先

npm install v-charts

如果你使用vue-cli 2.x这样的搭建工具，当然也可以在工程目录下

npm install v-charts --save-dev

随后引用这个模块

import v-charts from 'v-charts'

v-charts是一个组件，如果要全局使用，需要

Vue.use(V-charts)

使用组件：以饼图为例

在DOM视图设计中，使用标签<ve-pie>来使用饼图。这个标签的最基本API为:data和:settings前者提供负责将标签与一个表示数据源的dict绑定，后者负责将标签与一个表示样式设置信息的dict绑定。

data数据格式

与使用:开头的其他vue的dom属性一致，这个属性的值指向了vue周期变量，根据其内容动态渲染。格式为：{columns:[],rows:[]}，其中columns表示一个列举了表征数据枚举字段的list，rows表示一个根据list具体给出值的dict，key是columns的各值。

如：

chartData: {
        columns: ['标签', '花销'],
        rows: [{标签: key1, 花销: 1},{标签: key2, 花销: 2}]
      }

settings效果格式

settings的具体内容与组件的具体类型有关，这里只介绍他们的共性。dict中首先是一个seriesMap，其中将样式绑定的key指定为相应columns。

如：

chartSettings: {
        seriesMap: {
          比例: {
            title: {
              show: true
            },
            detail: {
              show: true
            }
          }
        }
      }

技术使用中遇到的问题和解决过程

出现canvas但是没有图表内容

导入并填写相关数据之后，在组件Template的对应位置有外层容器的div或者canvas，但是中间没有图表内容。

这是因为v-charts组件不能感知外界的容器的高度和宽度，只能通过给定height和width来设定图表的高度和宽度。如果没有给定宽度和高度，那就会产生空白的图表。

这时需要为相应的DOM添加height和width属性，形如：

<ve-pie :height="300" :width="300">

总结

本文介绍了基于vue的v-charts安装使用方法，并给出了一些实例。