最终效果
image.png
图表配置选项
// v-charts配置参数
vchartsConfig: {
setting:{
// 别称
labelMap: {
'area': '',
'count': '',
},
},
extend: {
title:{
show:true,
// text:'数据',
// subtext:'',
textAlign:'center',
},
// 图标顶部的标题及按钮
legend:{
show:true,
},
// backgroundColor:'red',//整个组件的背景颜色
//X轴线
xAxis: {
// name: "地区",
type:'category',
show:true,
// 坐标轴轴线
axisLine:{
show:false,
},
// 坐标轴刻度
axisTick:{
show:false,
},
// 坐标轴每项的文字
axisLabel:{
showMaxLabel:true,
showMinLabel:true,
// color:'#3a3a3a',
rotate:0, //刻度文字旋转，防止文字过多不显示
margin:8,//文字离x轴的距离
boundaryGap:true,
// backgroundColor:'#0f0',
formatter:(v)=>{
// console.log('x--v',v)
if(v.length>6){
return v.substring(0,6)+'...'
}
return v
},
},
// X轴下面的刻度小竖线
axisTick:{
show:false,
alignWithLabel:true,//axisLabel.boundaryGap=true时有效
interval:0,
length:6,//长度
},
// x轴对应的竖线
splitLine: {
show: false,
interval: 0,
lineStyle:{
color:'red',
backgroundColor:'red',
}
}
},
yAxis: {
show:true,
offset:0,
// 坐标轴轴线
axisLine:{
show:false,
},
// x轴对应的竖线
splitLine: {
show: false,
},
// 坐标轴刻度
axisTick:{
show:false,
},
boundaryGap:false,
axisLabel:{
color:'#3a3a3a',
},
},
// 滚动组件参数
dataZoom:[
//滚动组件参数上下两个的必须，注意点是end的不宜过大根据效果进行调整
{
show: true,
realtime: true,
start: 0,
end: 5
},
{
type: 'inside',
show: true,
realtime: true,
start: 0,
end: 5,
xAxisIndex: [0],
startValue: 0,
//显示的多少数据
endValue: 12,
zoomLock:true,//阻止区域缩放
}
],
// 柱形区域
grid: {
show: true,
// backgroundColor: "#FFF6F3",
borderColor: "#FFF6F3",
// containLabel:false,
},
// 每个柱子
series(v) {
// console.log("v", v);
// 设置柱子的样式
v.forEach(i => {
console.log("series", i);
i.barWidth = 30;
i.itemStyle={
// barBorderRadius:[10,10,10,10],
// color:'#FF6633',
borderWidth:0,
};
i.label={
// color:'#666',
show:true,
position:'top',
// backgroundColor:'yellow',
};
});
return v;
},
}
},
配置使用
<a-card :bordered="true">
<!--<ve-line :data="chartData" :extend="extend"></ve-line>-->
<!--<ve-line :extend="extend" :data="chartData_shuangshuju" :settings="chartSettings"></ve-line>-->
<ve-histogram :data="chartData_shuangshuju_lpjg" :settings="vchartsConfigjiage.setting"
:extend="vchartsConfigjiage.extend"></ve-histogram>
</a-card>
