介绍
在使用 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> 复制代码
如果图表不复杂，那么这个好像还挺简单地就结束了。。
图表属性
v-charts.js.org/#/props 非常重要！
下图是一些图表的公有属性，
网络异常，图片无法展示
|
假如要修改图表的legend，使用虚线和实线相结合的方式去表示数据。。。
网络异常，图片无法展示
|
如图这个红框的就是图例 Legend。
这时我们要用到 extend 属性，在上面图表属性的链接中有介绍
网络异常，图片无法展示
|
通过该属性 我们可以使用echarts中setOption的所有参数
echarts.apache.org/zh/option.h… 非常重要！
网络异常，图片无法展示
|
代码如下：
echart有自带的icon给我们使用，如前两个，但是没有这个虚线。。
我们可以用 svg 简单画一条虚线，然后根据要求转出图片的Data URI 。
可以直接参考菜鸟教程的 svg 教程 www.runoob.com/svg/svg-str…
但是画出来的虚线颜色好像固定了。。暂时只能多画几条不同颜色的虚线了
<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的官方文档查看：echarts.apache.org/zh/option.h…
不过配置 series 的时候 vchart无法像 echart 那样子直接用数组表示，需要使用
上面代码中的格式 'series.0.type' 才可以
