v-charts官网参考,有什么想要的图表,应该现在官网查,再去百度找
https://v-charts.js.org/#/
1、在安装v-charts以后可能会出现渲染不不出来的问题,可能是版本的问题,降版本到4.9即可
npm i v-charts echarts@4.9.0 -S
2、柱形图 + 折线图 双y坐标对齐
<ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend"></ve-histogram>
在 chartExend 的data中,设置两个坐标轴的最小值,最大值,以及间距,就可以按照自己的想法控制他们的间距以及两条坐标轴对齐问题
this.chartExtend = { 'yAxis.0.min': 0, // yAxis.0:y轴左侧 //设置纵坐标的最小值 'yAxis.1.min': 0, // yAxis.0:y轴左侧 //设置纵坐标的最小值 'yAxis.0.max':Math.ceil(this.maxData[0]/5)*6, 'yAxis.1.max':Math.ceil(this.maxData[1]/5)*6, 'yAxis.0.interval': Math.ceil(this.maxData[0] / 5), 'yAxis.1.interval': Math.ceil(this.maxData[1] / 5), series:{ label:{show:true, position:"inside"}, barWidth:"50%", smooth:false } }
这个data如果是需要从后端获取最小最大值的话,需要放在return中,并且在created或者mounted的函数中来赋值
smooth 是来控制折线图中折现是曲线还是直线的,
label 的属性是控制 柱状图折叠里的数据的,就是两个折叠的柱状图中的大小显示到柱状图中