v-chart使用的相关实例

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 的属性是控制 柱状图折叠里的数据的，就是两个折叠的柱状图中的大小显示到柱状图中