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)

使用

<template>
<ve-line :data="chartData"></ve-line>
</template>

<script>
export default {
data: function () {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }
]
}
}
}
}
</script>

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

图表属性

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
但是画出来的虚线颜色好像固定了。。暂时只能多画几条不同颜色的虚线了

<template>
<ve-line :data="chartData" :extend="extend"></ve-line>
</template>

<script>
export default {
data () {
this.extend = {
'yAxis.0.name': 'y轴名字',
'yAxis.0.nameLocation': 'middle',
'yAxis.0.nameTextStyle.padding': 14,
'yAxis.0.nameTextStyle.fontSize': 14,
'series.0.type': 'line',
'series.0.name': '访问用户',
'series.0.lineStyle':{color:'#ef55a7',type: 'dashed'} ,
'series.0.itemStyle.color': '#ef55a7',
series: {
label: {
normal: {
show: true
}
}
},
legend: {
textStyle: {
},
data: [
{name:'访问用户',icon:'circle'},
{name:'下单用户',icon:'roundRect'},
{name:'下单率',icon: 'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogIDxsaW5lIHgxPSIwIiB5MT0iNSIgeDI9IjEwMCIgeTI9IjUiIHN0cm9rZS1kYXNoYXJyYXk9IjMgMSIgc3Ryb2tlPSIjZWY1NWE3Ii8+Cgo8L3N2Zz4='},
]
}
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
}
</script>

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

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

'series.0.type'