VUE使用v-charts的基本配置
1、柱状图配置
<template>
<div>
<ve-histogram
:data="dataAs"
:extend="extend"
:legend-visible="false"
:settings="chartSet"
height="280px" />
</div>
</template>
<script>
export default {
name: 'Bar',
props: {
height: {
type: Number,
default: 255
},
data: {
type: Array,
default: () => {
return []
}
},
position: {
type: String,
default: 'name*count'
}
},
data () {
return {
chartSet: {
labelMap: {
age: '年龄' // 显示的浮动的变量替换
}
},
extend: {
color: '#429fff', // 设置的主颜色
yAxis: {
// 是否显示y轴线条
axisLine: {
show: false
},
// 纵坐标网格线设置,同理横坐标,分割线
splitLine: {
show: true,
lineStyle: {
type: 'dashed' // 虚线 solid 为实线
}
},
// 线条位置
position: 'left',
splitNumber: 4 // y轴的数量分割比例
},
xAxis: {
name: '', // 坐标轴名称。
nameLocation: 'end', // 坐标轴名称显示位置。
axisLabel: {// 坐标轴刻度标签的相关设置。
interval: 0,
rotate: 0,
textStyle: { // x轴文字
color: '#171616',
fontSize: 13
}
},
axisLine: { // 设置轴线的属性
show: true,
lineStyle: {
color: '#909090',
width: 1
}
}
},
series: {
label: { show: true, position: 'top' }
}
// 数据过多时出现横向滚动条
/* dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 50
},
{
type: 'inside',
realtime: true,
start: 0,
end: 50
}
] */
},
chartData: { // 主要数据来源
columns: ['name', 'age'],
rows: [ {name: '张三', age: 25} ]
}
}
},
computed: {
dataAs () {
const data = this.chartData
const rows = this.data
rows.forEach((row) => {
data.rows.push({ name: row.x, value: row.y })
})
return data
}
}
}
</script>