v-charts修改点击图例事件，legendselectchanged

Posted 2021-11-23 yzhihao

html:

<!--折线图-->
<ve-line :extend="item.chartExtend"
         :data-zoom="dataZoom"
         :height="chartHeight"
         :legend="item.legend"
         :data="item"
         :events="chartEvents"
         :settings="isRateTypeData(item.id)?successRateSettings:chartSettings"></ve-line>


需要在v-charts图表添加legend属性

chartDataColumns.map(item => {
    console.log(‘chartDataColumns66‘,chartDataColumns)
    if(item !== ‘TIME‘){
        selectedObj[item] = true
    }
})
chartItem[‘legend‘] = selectedObj

this.chartEvents = {
    legendselectchanged: (item) => {
        let currSelectName = item.name
        let currChartItem = self.chartData[self.deleteIndex]
        let selectedObj = item.selected
        let selectedNum = 0
        for(let key in selectedObj){
            if(selectedObj[key]){ // selected对象内值为true
                selectedNum++
            }
            selectedObj[key] = false
        }
        if(selectedNum > 1){ // selectedNum > 1说明当前全部选中，此时点击，只有当前的设为选中
            for(let key in selectedObj){
                selectedObj[key] = false
            }
            selectedObj[currSelectName] = true
        }else{ // 当前只有一个选中，点击后，全部重置为选中
            for(let key in selectedObj){
                selectedObj[key] = true
            }
        }
        self.$set(currChartItem[‘legend‘], ‘selected‘, selectedObj)
    }
}