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 的屬性是控制 柱狀圖折疊里的數據的，就是兩個折疊的柱狀圖中的大小顯示到柱狀圖中