vue项目中使用v-charts的一些问题
谷梁楚青
vue项目中初次使用v-charts的一些问题积累及解决办法。供日后参考
一、v-charts的参考网址
https://vue-echarts.github.io
https://v-charts.js.org/
二、v-charts常用的属性
1、data 绑定数据
columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标
rows 中是数据的集合。
格式：
data：{
columns: ['日期', '访问用户', '下单用户'],
rows: [
{ '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
{ '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
{ '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
]
}
2、setting 绑定配置
chartSettings: {
//用于指定维度
dimension: ['日期'],
//用于指定指标
metrics :[ '访问用户', '下单用户'],
//指标的显示名称
labelMap: {
访问用户: '访问',
下单用户: '下单',
},
//堆叠--'访问用户', '下单用户'都显示在一条显示轴上
stack: { count: ['onlineCount', 'offlineCount'] },
//折线区域性
area: true,
areaStyle: {
color: 'rgba(59, 161, 255, 0.2)',
},
},
3、extend扩展属性
chartExtend: {
legend: { bottom: '2%' },
xAxis: {
show: false, //不显示x轴
},
yAxis: {
show: false, //不显示x轴
},
series: {
smooth: false, //曲线改成折线
symbol: 'none', //这线上圆点去掉
},
},
三、遇到问题
1、条形图去掉刻x y 轴的线 ，且每条轴的颜色不同
解决：设置setting 中绑定属性itemStyle
chartExtend: {
grid: {
left: '10%',//容器距离左边的距离，
},
xAxis: {
show: false, //不显示x轴
},
yAxis: {
offset: 20,//指标与数据容器 的偏移量
},
},
chartSettings: {
labelMap: {
count: '数量',
},
itemStyle: {
normal: {
color: function (e) {
var colorarrays = ['#3ba1ff', '#4fcb74', '#fbd438', '#f2647c', '#37cbcb']
return colorarrays[e.dataIndex]
},
},
},
2、图例是空心圆，设计要求是实心圆且间距
chartExtend: {
legend: {
"textStyle": {
"color": "#999999"
},
"icon": 'circle',//实心圆
"itemHeight": 10,//图例实心圆的大小
"itemGap": 50// 图例间距
},
}
3、折线图 线段上不带圆环或者点
chartExtend: {
series: {
smooth: false, //曲线改成折线
symbol: 'none', //这线上圆点去掉
},
},
四、条形图案例
<template>
<ve-bar
height="300px"
:data="chartData"
:settings="chartSettings"
:legend-visible="false"
:axis-visible="false"
:extend="chartExtend"
>
</ve-bar>
</template>
<script>
import VeBar from 'v-charts/lib/bar.common'
import { theme } from './v-theme'
export default {
components: { VeBar },
data() {
return {
chartSettings: {
labelMap: {
count: '数量',
},
itemStyle: {
normal: {
color: function (e) {
var colorarrays = ['#3ba1ff', '#4fcb74', '#fbd438', '#f2647c', '#37cbcb']
return colorarrays[e.dataIndex]
},
},
},
},
chartExtend: {
grid: {
left: '10%',
},
xAxis: {
show: false, //不显示x轴
},
yAxis: {
offset: 20,
},
},
chartData: {
columns: ['label', 'count'],
rows: [
{ label: '出库', count: 22 },
{ label: '入库', count: 100 },
{ label: '借出', count: 20 },
{ label: '出租', count: 32 },
{ label: '剩余', count: 18 },
],
},
loading: false,
}
},
}
</script>
五、默认主题js
如果一个项目中统计图大致都是一个风格颜色的话可以讲主题写在一个js中 文件中直接引用即可使用
const theme = {
"color": ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "2"
},
"symbolSize": "6",
"symbol": 'none',
"smooth": true
},
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": 2,
"borderColor": "#fff"
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": false,
"lineStyle": {
"color": "#cccccc",
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
],
"type": 'dashed',
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999999"
},
"emphasis": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
},
"icon": 'circle',
"itemHeight": 10,
"itemGap": 50
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"visualMap": {
"color": [
"#516b91",
"#59c4e6",
"#a5e7f0"
]
},
}
export {
theme
}
六、使用感受
1、刚开始，没示例，感觉不知如何下手，但是看了官方文档还是很清晰明了的，好多属性都与echarts配置差不多，直接看echarts也可以。而且v-charts绘制简单的统计图非常的方便，配置简单。体积也不大。
类似资料：