vue2.6踩坑之vchart的使用（图表）

我的个人网站 www.ryzeyang.top

内容概览
折线图VeLine 自定义图例，在vchart中通过extend属性使用echart的setOption中的设置，用’series.0.type’这样的格式去设置每一条线的属性

介绍

vchart 官网地址

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

图表种类如下图：

引入

官网上有非常多图表类型给我们选择，我们在main.js中按需引入即可,如折线图：

import 'v-charts/lib/style.css'
import VeLine from 'v-charts/lib/line.common'
Vue.component(VeLine.name, VeLine)

使用

如果图表不复杂，那么这个好像还挺简单地就结束了。。

图表属性

https://v-charts.js.org/#/props 非常重要！

下图是一些图表的公有属性，

假如要修改图表的legend，使用虚线和实线相结合的方式去表示数据。。。

如图这个红框的就是图例Legend。

这时我们要用到extend属性，在上面图表属性的链接中有介绍

通过该属性 我们可以使用echarts中setOption的所有参数
https://echarts.apache.org/zh/option.html#legend 非常重要！

代码如下：
echart有自带的icon给我们使用，如前两个，但是没有这个虚线。。
我们可以用svg简单画一条虚线，然后根据要求转出图片的Data URI 。
可以直接参考菜鸟教程的svg教程 https://www.runoob.com/svg/svg-stroke.html
但是画出来的虚线颜色好像固定了。。暂时只能多画几条不同颜色的虚线了

当然不止这个图例可以改变， 还可以改变线的颜色，形状等等，具体可以通过这个echart的官方文档查看：https://echarts.apache.org/zh/option.html

不过配置series的时候vchart无法像echart那样子直接用数组表示，需要使用上面代码中的格式才可以 'series.0.type'