v-charts图表问题记录

前言

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

安装

npm i v-charts echarts -S

文档地址:https://v-charts.js.org/
GitHub地址:https://github.com/ElemeFE/v-charts

问题总结

问题一 时间模式下右下角最后一个显示不全

  • 可以从最上面的图片中看出,右下角是时间显示不全的(目前只在折线图的时间下使用发现,别的没有测试),在github的issus中找到了解决办法
  • 可以使用grid来控制,可以发现左右往里收缩了一些,显示全了
1
2
3
<div id="app">
<ve-line :data="chartData" :settings="chartSettings" :grid="grid"></ve-line>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
new Vue({
el: '#app',
data () {
this.chartSettings = {
xAxisType: 'time'
}
// 这里是解决代码
this.grid = {
right: '5%',
left: '5%'
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '2018-01-02', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '2018-01-03', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '2018-01-05', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '2018-01-10', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '2018-01-20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
})

问题二 鼠标悬浮时间显示不全

  • 业务中后端传来的是一个时间戳,把data给到折线图中后鼠标悬浮显示的时间只有月-日-时-分的格式
  • extend参数可以把时间进行下格式化
1
2
3
<div id="app">
<ve-line :data="chartData" :settings="chartSettings" :grid="grid" :extend="chartExtend"></ve-line>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
new Vue({
el: '#app',
data () {
this.chartSettings = {
xAxisType: 'time'
}
// 这里是解决代码
this.chartExtend = {
xAxis: {
axisPointer: {
label: {
formatter: function (params) {
var date = new Date(params.value)
var texts = date.toLocaleDateString() + ' ' + date.toLocaleTimeString('chinese', { hour12: false })
return texts
}
}
}
}
}
this.grid = {
right: '5%',
left: '5%'
}
return {
chartData: {
columns: ['日期', '访问用户', '下单用户', '下单率'],
rows: [
{ '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
{ '日期': '2018-01-02', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
{ '日期': '2018-01-03', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
{ '日期': '2018-01-05', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
{ '日期': '2018-01-10', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
{ '日期': '2018-01-20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
]
}
}
}
})

本文内容仅供参考,还在不断学习中,如有错误欢迎评论指出,谢谢。